OMG HTML FTW

I've been banging my head against a frustrating work problem for a couple of weeks, but I think I found a good solution today and guess what? It's markup! So I had to do a post.

The problem

We have a global search feature powered by Cludo — they have crawlers that index our pages and pick up category metatags, and we plug in a couple of scripts that fetch these data and inject them into our pages.

The bug is with our search bar: the button that's supposed to clear the input

• only appears on blur, rather than on change
• doesn't work at all on Chrome
• works in Firefox, but then the value repopulates on blur
• requires a combination of update and blur to re-appear

It's been a nightmare to troubleshoot; the clear functionality actually lives on the input component, which is three levels down in the component library. The input has multiple other components built on top it, and they're all used across multiple projects.

The process

I won't subject you to a blow-by-blow account of all the different avenues of inquiry that have turned out to be dead ends, or the multiple experiments I've done to try and find a solution.

The bottom line is that the site search UI works fine when the Cludo scripts are removed and breaks as described when they're attached. I have no idea what's going on under the hood that's causing our SSR'd Vue components to choke, and the colleagues I've consulted have agreed with me that it's a difficult scenario. The only options that seem to hold promise are unconscionable hacky, overengineered and labour-intensive.

The proposal

I can't call this section "The solution" because I just put in an initial PR and who knows what will come out of code review and testing, but at the risk of jinxing myself, I'm feeling pretty confident.

Somehow or other I stumbled across the fact that type="search" is a thing for inputs these days, and (for webkit-based browsers at least) it has a native clear button! My god.

I did a few rough-and-ready tests and it seems like the native UI does not suffer from whatever JS clash is afflicting the Vue component — and really, why would it? It even turned out that site search component already used the type="search" attribute on its root element, but the native behaviour was being suppressed in favour of the home-rolled version.

So I've ended the day on a high:

• Assuming QA processes don't identify any issues, this completey resolves the primary issue (clear button not working in Chrome).
• The Chromatic build detected no discrepancies which I'm kind of amazed by. I thought replacing an icon font with a base64-encoded SVG would flag with some kind of human-imperceptible pixel diff, at least, or maybe there'd be issues between Storybook stories… but apparently not. There's no visual compromise.
• The PR is small and elegant, with a net gain of one line of code (I need to review the unit tests, so don't hold me to that!).
• It's a move away from imperative JS to declarative HTML.

The (next) problem

The intended outcome here is that in Chrome, Safari and Edge we'll get an input clear button that works exactly as expected. Firefox will simply have no clear button: users will have to go through the onerous process of double-clicking their input and hitting backspace.

I think this is cool. The problem is not really "users can't clear the input with a click", it's "the UI doesn't function as implied".

But something tells me there's some politics to be navigated before this thing is over.

END