Using Allow custom values in ComboBox

[lienas]

I want to allow custom values in a ComboBox.

How can I trigger to take the input as a new entry?

On a Keyboard I could take Enter"Key. Is there an event listening to Enter ?

What would you suggest in terms of accessibility?

[snowystinger]

Have you read this part of our docs? https://react-spectrum.adobe.com/react-aria/useComboBox.html#allow-custom-values

[lienas]

Of Course. But the docs do not answer my questions.
Here is how I use my ComboBox (I call it SearchBox)

<SearchBox label={'TAGS'}
   allowsCustomValue
   onSelectionChange={selectCertHandler}
   onInputChange={setUserInput}>
{
  certs ? certs.map(cert => {
      return (
          <Item key={cert.toLowerCase()}>{cert}</Item>
      )
  }) : []
}
</SearchBox>

I have userInput as state. But how do I know that the user has finished entering data??
Should I use sth. like onKeyDown and check for Enter.
What is Best Practice or suggested by WAI-ARIA Authoring Practices

[LFDanLu]

The described experience falls more inline with our search autocomplete hook, that will allow you to have a onSubmit event that fires when the user hits Enter to select an option from the dropdown or when confirming a custom value. Note that we don't have public documentation for this hook/component yet so I would suggest looking at our stories and the WIP alpha docs. Since it is in alpha, we also haven't vetted the experience entirely so keep in mind that it is subject to change

[lienas]

Hi Lu,

yes, that is what I am looking for. I want this as a basis for a MultiSelect generating Tags (or Badges).
I the example given in the submitted docs the SearchAutocomplete receives props without a type.

`
function SearchAutocomplete(props) {

// Setup filter function and state.

let { contains } = useFilter({ sensitivity: 'base' });
let state = useComboBoxState({ ...props, defaultFilter: contains })
...
`

What should be the type of the props???

[LFDanLu]

Well that really depends on what functionality you want to allow your SearchAutocomplete to support. Since you are creating your own SearchAutocomplete from the hooks, you can control what props are actually passed to the hooks. If you don't want to do too much customization, you could use SearchAutocompleteProps as a base for your props interface.

[lienas]

That sounds great and works for me. I am quite unexperienced with TypeScript, so I have one more question. The SearchAutocompleteProps extent the CollectionBase<T> containing the prop children: CollectionChildren<T>. I have a localState to collect the selected entries from the SearchAutocomplete. ` const [suggestions, setSuggestions] = useState<CollectionChildren<object>>([]);` With this state I render the `TAGS`and filter the suggestiions with the following code: ```const addTagHandler = (tag: string) => { setTags([...tags, tag]); setSuggestions((prevSuggestions : CollectionChildren<object>) => { return prevSuggestions.filter(suggestion => suggestion != tag) }) }``` Unfortunately filter does not exist on prevSuggestions ☹. I assume that I could use one of the hooks from react-stately , but I would like to understand how this works Von: Daniel Lu ***@***.***> Datum: Dienstag, 27. September 2022 um 22:23 An: adobe/react-spectrum ***@***.***> Cc: Thomas Lucas ***@***.***>, Author ***@***.***> Betreff: Re: [adobe/react-spectrum] Using Allow custom values in ComboBox (Discussion #3555) Well that really depends on what functionality you want to allow your SearchAutocomplete to support. Since you are creating your own SearchAutocomplete from the hooks, you can control what props are actually passed to the hooks. If you don't want to do too much customization, you could use SearchAutocompleteProps<https://github.com/adobe/react-spectrum/blob/main/packages/%40react-types/autocomplete/src/index.d.ts#L19> as a base for your props interface. — Reply to this email directly, view it on GitHub<#3555 (reply in thread)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AB7INGEBKHBRZGT275RIQT3WANJTPANCNFSM6AAAAAAQVPAXH4>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[LFDanLu]

Just to clarify, the suggestions that you mentioned are the options you will display in the drop down? If so, I'd recommend performing your filtering like its done here, aka filtering/modifying the items list you provide to your SearchAutocomplete instead. No need to use the CollectionChildren themselves

[lienas]

Yes, you are right! Ok- now I have it. I tried to pass the options with the children prop and not with items. Now my component works as expected 😊 Amazing Framework !!!! Von: Daniel Lu ***@***.***> Datum: Mittwoch, 28. September 2022 um 18:44 An: adobe/react-spectrum ***@***.***> Cc: Thomas Lucas ***@***.***>, Author ***@***.***> Betreff: Re: [adobe/react-spectrum] Using Allow custom values in ComboBox (Discussion #3555) Just to clarify, the suggestions that you mentioned are the options you will display in the drop down? If so, I'd recommend performing your filtering like its done here<https://reactspectrum.blob.core.windows.net/reactspectrum/26f9662ffb90217c26f906397b1a67b3197e476d/docs/react-aria/useSearchAutocomplete.html#custom-filtering>, aka filtering/modifying the items list you provide to your SearchAutocomplete instead. No need to use the CollectionChildren themselves — Reply to this email directly, view it on GitHub<#3555 (reply in thread)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AB7INGCTHXDO5U2XSLIQABLWARYVHANCNFSM6AAAAAAQVPAXH4>. You are receiving this because you authored the thread.Message ID: ***@***.***>