Use the "placeholder" attribute on the "input" tag

There are a few nasty UI conflicts because the greyed out “Search by topic…” placeholder behavior is implemented by controlling the input field’s value attribute.

To reproduce:

1. Enter some text (e.g. runtime).
2. Select a topic bubble (e.g. runtime).
3. Dismiss the topic bubble.
4. Start typing again.

2 issues seen. In both the following screenshots, I typed runtime again once the topic bubble had been dismissed.

1. The text is just appended to the placeholder.

1. The placeholder disappears, but so does the start of the next text you type. Here it got as far as showing Search by topic...ru before the text was cleared, leaving only the ntime of runtime.

The input tag used for search should be showing Search by topic... as a placeholder attribute, not the value attribute.

[jgravois]

I must be a foreigner in this repo.

not anymore. you’ve earned the 🔑s

[nixta]

Yeah, works much better. Nice work.

I think we should fix up the CSS before we release though. Seems the CSS from the old chosen library was just copied wholesale into our home.css and there isn’t a proper match now. Should mostly be some overrides for the bubble sizes and backgrounds, and the chooser line height.

@alaframboise might have some insight here, but it was so long ago I wouldn’t be surprised if that information has been flushed.

Cheers,

Nick.