API to deactivate?

[backspace]

Hello, thanks for your years of work on this, it’s been so useful to me!

I recently added a preliminary search interface to the Nomad UI and now I’m trying to refine the UX. One problem I have is that if the user presses escape while the search is active, I want the control to become inactive instead of closed but active. This GIF shows what I mean about closed-but-active, you can see that the field looks like a target for typing but isn’t:

It appears to me that there’s no method in the API for me to control the internal active state. I added this hack in a fork to give me an interface to manipulate that field which I can then use when a close event is triggered by the escape key.

What do you think of adding something to the public API to allow manipulation of active? My hack exposes setIsActive but my use case would be satisfied if only deactivate() existed in the public API.

It’s possible though that I’m going about this the wrong way, maybe I should change the styling so active-but-closed instead looks the same as inactive 🤔 I’ve just spent a lot of time fiddling with intermediate states and event inspection to get things like search-immediately-on-tabbing-in to work so I’m reluctant to tear up what I’ve accumulated 🤓

[cibernox]

@backspace sorry for the delay, I am on holidays :D

I believe this is a naming issue. A component is deemed active if the focus is in the trigger (or somewhere else inside the component, like the searchbox). This of this like a poor man's version of the :focus-within pseudo selector. In fact if that pseudo selector had existed in all browsers at the time I wouldn't have created this property.

So, to answer your question, if after pressing ESC you want users to still be able to reopen the component pressing enter/spacebar, the component must retain the focus, so isActive will be true and you need some sort of CSS hack to make it look the way you want.
If you don't need that, you can use @onKeydown to listen for presses on the esc key and move the focus wherever you want (including a hidden button that when pressed opens the select if you wanted) and isActive will be false because the focus is now elsewhere.

[backspace]

No problem re holidays, I’m glad you’re getting some time off!

Thanks for explanation, that makes it a lot more clear to me. I used blur() and it acts the same as manipulating isActive as you described!