Combobox access selectedItem

[imjhonny]

I am trying to access the selectedItem from Combobox component. I tried with the context but it is not available. Should I use the hooks useComboBoxState and useComboBox if I want this?

[snowystinger]

What are you trying to do with it? Maybe there's another solution.

[imjhonny]

We are doing a search component. That has a SeachField that wraps a ComboBox, when something in the comboBox is selected we want to update the value of the search state. However, we can only set the key.

We try to update the SearchField value with the context setValue onSelectionChange in ComboBox but we are only getting the Key. This should work for controlled/uncontrolled.

<SearchField
        ref={objectRef}
        aria-label={restProps['aria-label']}
        defaultValue={defaultInputValue || defaultSelectedKey?.toString()}
      >
        {context => (
          <ComboBox
            {...restProps}
            defaultSelectedKey={defaultSelectedKey}
            isDisabled={isDisabled}
            inputValue={inputValue || context.state.value}
            defaultInputValue={defaultInputValue}
            onSelectionChange={key => {
              context.state.setValue(key?.toString() || '')
              onSelectionChange?.(key)
            }}
            onInputChange={onInputChange}
            allowsEmptyCollection={allowsEmptyCollection}
            menuTrigger={menuTrigger}
            autoFocus={autoFocus || defaultOpen}
            /* Needed to keep the input value around if the combobox is closed */
            allowsCustomValue
          >
            <SearchInputContainer motif={motif} width={width} isExpanded>
              <SearchInputSymbol {...pressProps} isDisabled={isDisabled}>
                {resolvePropWithContext(symbol, context)}
              </SearchInputSymbol>
              <SearchInputField
                ref={inputRef}
                onChange={event => {
                  context.state.setValue(event.target.value)
                }}
                placeholder={placeholder}
                isExpanded
              />
              <SearchInputSuffix {...pressProps}>
                <SearchInputControl
                  slot={null}
                  isDisabled={isDisabled}
                  onPress={() => {
                    context.state.setValue('')
                    inputRef.current?.focus()
                    onSelectionChange?.(null)
                    onInputChange?.('')
                    onClear?.()
                  }}
                  isVisible={!!inputValue || !context.isEmpty}
                  preventFocusOnPress
                  excludeFromTabOrder
                />
              </SearchInputSuffix>
            </SearchInputContainer>
            <SearchPopover
              triggerRef={objectRef}
              offset={SEARCH_DEFAULT_POPOVER_OFFSET}
              style={{
                width:
                  width === 'full' ? objectRef.current?.clientWidth : width,
              }}
            >
              <ScrollArea_Default type="always" excludeTouchDeviceAssistance>
                <SearchListBox
                  renderEmptyState={emptyStateContext =>
                    emptyState(emptyStateContext, context.state.value)
                  }
                  width={width}
                  items={restProps.items}
                >
                  {children}
                </SearchListBox>
              </ScrollArea_Default>
            </SearchPopover>
          </ComboBox>
        )}
      </SearchField>

[snowystinger]

I'm sorry, but I still don't understand what you're trying to build. What purpose does the wrapping SearchField have?

Can you use onSelectionChange to get the key, then lookup the item in items by looking for that key?

This is just a guess, but I think instead of Combobox, you might want the Autocomplete component https://react-spectrum.adobe.com/react-aria/Autocomplete.html#autocomplete, more complete docs will be coming in our next release hopefully this week or next.

[imjhonny]

We are currently using. onSelectionChange. However, the component can be uncontrolled so I don't have direct access to the items only the children. What would you suggest would be the best way to get the value based on the key?

Combobox context doesn't not give access to the active value or items.