Change search box's "X" button behavior

[JVimes]

Feature Request

Summary

I thought the "X" button next to the search box would close the modal, but it seems to clear the search text instead.

Would it be better if it closed the modal?

Motivation

I was just confused by current behavior.

[welpo]

Hey @JVimes!

Thanks for sharing your confusion :) It's understandable.

I used other search bars for inspiration. I see Google, Kagi, and DuckDuckGo all use an X inside the search field to clear input.

However:

• They only show the X after text has been entered (tabi always shows it, even with a blank query)
• They are not modals

The GitHub search also shows the X after text has been entered, and it's kind of a modal.

---

My first solution would be to hide the X by default, and only show it if the search bar is not blank. Would that be clearer? I'm hoping the way to close modals is obvious to users (press Esc or click outside of it), but I'm not sure this is the case.

Another option I see, which could be added alongside the previous suggestion, is to add another X icon, outside the search input, to close the modal. Not as big of a fan of this one, though. Might look less clean.

I'm open to alternatives!

[JVimes]

Ah, I see. Interesting problem. I think hiding the X until there's input would help.

One idea is, the X-and-Esc-key command could be overloaded: When there's text input, first run clears input and second run closes the modal. (Edit: the X is not hidden in this idea.)

[welpo]

I appreciate the second idea, though I'm not sure it would be obvious behaviour.

I'll implement the "X only appears if input is not empty" for now. Once we see it live we can decide if it's enough :)

[JVimes]

Sounds good to me! Thank you.

[welpo]

@JVimes implemented the feature in #388. You can see the changes live on the demo.

What are your thoughts?

Hopefully the button's purpose is much clearer now!

[JVimes]

That's great, thank you!