Added properties for using dropdown in search

[sidharthramesh]

No description provided.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/shoelace/shoelace/H6rP5BKpFBt9ZfLvbwWyhpLkHmnX
✅ Preview: https://shoelace-git-fork-sidharthramesh-next-shoelace.vercel.app

[claviska]

What is the intent here? Is it to simply disable typeToSelect functionality? It's not clear what the focusKeys prop is being used for.

[sidharthramesh]

@claviska the intent is to use sl-dropdown with an sl-input in the trigger slot. This provides good functionality as a search drop-down/combobox.

The typeToSelect Boolean is to disable/enable that function. The focusKeys props is so that spacebar or enter can be manually disabled if needed. In the case of a search component, spacebar must be disabled so that a space character can be entered in the input.

Although the methods can be overridden easily in the context of a search component, I thought these two should be part of the API for easier customisation.

[claviska]

The focusKeys props is so that spacebar or enter can be manually disabled if needed. In the case of a search component, spacebar must be disabled so that a space character can be entered in the input.

I'm only seeing focusKeys defined as a prop. I'm not seeing it used anywhere.

In the case of a search component, spacebar must be disabled so that a space character can be entered in the input.

This may cause a11y issues so we need to be careful here.

Is this more or less what you're trying to achieve?

If so, it probably needs to be incorporated into <sl-menu> since that's where most of the keyboard logic lives. We also need to think about how arrow keys and tabbing should behave (right now arrows only traverse menu items and shift + tabbing back into the input won't work because of that).

To be honest, this is probably a separate component that utilizes <sl-dropdown> and replaces <sl-menu> with custom behavior. I don't think it's wise to hack this into place with composition because it won't be fully accessible nor easy to maintain as a pattern.

[sidharthramesh]

Sorry, my bad. I forgot to cherry-pick a commit. My use case is more like this:

[claviska]

I appreciate the PR. At this point, I don't feel comfortable exposing these options. Let's revisit this as part of #127 after the 2.0 stable release. 😄

[staabm]

If so, it probably needs to be incorporated into <sl-menu> since that's where most of the keyboard logic lives. We also need to think about how arrow keys and tabbing should behave (right now arrows only traverse menu items and shift + tabbing back into the input won't work because of that).

To be honest, this is probably a separate component that utilizes <sl-dropdown> and replaces <sl-menu> with custom behavior. I don't think it's wise to hack this into place with composition because it won't be fully accessible nor easy to maintain as a pattern.

we have a similar need and will try to build a searchable select like you proposed (to get rid of chosen.js components we have right now)