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]

let selectedItem = restProps.items.find(item => item.id === selected)
...
<Combobox
  onSelectionChange={id => {
    setSelected(id);
  }}
  // do not set selectedKey attribute if you want it to stay uncontrolled.

If I'm missing some constraint, maybe a real life demo in a codesandbox or stackblitz would be helpful

[imjhonny]

Here is a CodeSand example without styling https://codesandbox.io/p/sandbox/8zqvpv

There are two issues I would like to solve:

1. If you click a ListBoxItem, I would like to access it's text value instead of the ID
2. I have noticed that when you input a text to filter, then you blur and focus again the filtered results reset. Is there a way to keep them consistent?

To replicate point 2.

1. Input "dan", see the results
2. Blur
3. Focus
4. Results are different

[snowystinger]

1. Ah, you have a static combobox, why do you need the text value instead of the id? can the id be the same as the text value that you care about?

2. This is expected behaviour, @LFDanLu, correct me if I misspeak. Because it uses menuTrigger focus, it behaves the same when focused as though you clicked the button to forcibly open the entire set of choices.

[LFDanLu]

Yep that is correct, for context here is the logic for showing all items:

react-spectrum/packages/@react-stately/combobox/src/useComboBoxState.ts

Line 150 in 1457ded

let displayAllItems = (trigger === 'manual' || (trigger === 'focus' && menuTrigger === 'focus'));

.

[imjhonny]

1. Ah, you have a static combobox, why do you need the text value instead of the id? can the id be the same as the text value that you care about?
2. This is expected behaviour, @LFDanLu, correct me if I misspeak. Because it uses menuTrigger focus, it behaves the same when focused as though you clicked the button to forcibly open the entire set of choices.

1. We thought as well of that but I wanted to check if we are able to access the label value.
2. That is ok. Thanks!