i-like-robots / react-tag-autocomplete

⚛️ A simple, accessible, tagging component ready to drop into your React projects (new repo)
https://i-like-robots.github.io/react-tag-autocomplete/
ISC License
178 stars 12 forks source link

Add option to not show listbox with no text input #15

Closed tarngerine closed 1 year ago

tarngerine commented 2 years ago

Would like the ability to not show the Listbox until you start typing. Thanks!

tarngerine commented 2 years ago

minQueryLength feels like a super specific prop, as does closeOnSelect. I wonder if both of those can be enabled by more generic props like: open, and onSelect (or onAdd). This way you can build support for something like minQueryLength yourself by tracking input with onInput, and close the element by managing an open useState and toggling it yourself. you can add an onOpenChange prop to allow syncing any internally driven open states that should toggle the controlled open. Radix uses the open/onOpenChange pattern and it works well https://www.radix-ui.com/docs/primitives/components/dialog

i-like-robots commented 2 years ago

The reason I removed minQueryLength and haven't implemented an alternative is because I have attempted to stay as close as possible to both the published combobox patterns and observed behaviour of the native datalist component. Neither of these demonstrate any controls to restrict the listbox expanding.

However, adding an option so that implementors may provide a function to override control of the listbox would be straightforward by amending this method to something like this:

    expand() {
      const shouldExpand = typeof onShouldExpand === 'function' ? onShouldExpand(state) : true
      shouldExpand && setIsExpanded(true)
    },

Manually expanding or collapsing the listbox is also possible via the API but this is not documented or tested yet.