Combobox – is there a way to always have one of the options selected?

[punkpeye]

https://ark-ui.com/react/docs/components/combobox

My use case is that I've built a cmd+k prompt using Combobox.

It works really well. The only thing I need to figure out is how to always have at least one option selected.

export const CommandBar = () => {
  const [open, setOpen] = useState(false);

  const [firstRender, setFirstRender] = useState(true);

  useEffect(() => {
    if (firstRender) {
      setFirstRender(false);
    }
  }, [firstRender]);

  useHotkeys(
    'meta+k',
    () => {
      setOpen((open) => !open);
    },
    {
      enableOnFormTags: true,
    },
  );

  const [selectCapture, setSelectCapture] = useState<string>('');

  const navigate = useNavigate();

  const items = [
    { label: 'New Chat', value: 'new-chat' },
    { label: 'Settings', value: 'settings' },
  ].sort((a, b) => {
    return (
      stringSimilarity(b.label, selectCapture) -
      stringSimilarity(a.label, selectCapture)
    );
  });

  const [key, setKey] = useState(0);

  if (firstRender) {
    return null;
  }

  return (
    <Dialog.Root
      key={key}
      lazyMount
      onOpenChange={(details) => {
        setOpen(details.open);
      }}
      open={open}
    >
      <Portal>
        <Dialog.Backdrop
          className={css({
            background: 'rgba(13, 22, 24, 0.5)',
          })}
        />
        <Dialog.Positioner>
          <Dialog.Content
            className={css({
              background: '#111618',
              border: '2px solid #1b2326',
              margin: '0 8px',
              minWidth: '480px',
              outline: 'none',
              padding: '8px',
            })}
          >
            <div>
              <Combobox.Root
                allowCustomValue={false}
                autoFocus
                immediate
                items={items}
                multiple={false}
                onSelectCapture={(event) => {
                  setSelectCapture(
                    'value' in event.target &&
                      typeof event.target.value === 'string'
                      ? event.target.value
                      : '',
                  );
                }}
                onValueChange={({ value }) => {
                  console.log('value change');

                  setOpen(false);
                  setKey((key) => key + 1);

                  if (value[0] === 'new-chat') {
                    navigate(getPath('/chat'));
                  }

                  if (value[0] === 'settings') {
                    navigate(getPath('/settings'));
                  }
                }}
                open={open}
                required
                unmountOnExit
              >
                <Combobox.Control>
                  <Combobox.Input
                    className={css(
                      textInput.raw(),
                      css.raw({
                        borderRadius: '2px',
                        width: '100%',
                      }),
                    )}
                  />
                </Combobox.Control>

                <Combobox.Content
                  className={css({
                    background: 'none',
                    padding: '0',
                  })}
                >
                  <Combobox.ItemGroup
                    className={css({
                      background: 'none',
                      border: 'none',
                      outline: 'none',
                    })}
                  >
                    {items.map((item) => (
                      <Combobox.Item
                        className={css({
                          '&[data-highlighted]': {
                            background: '#182322',
                            outline: '2px solid #00d992',
                          },
                          background: 'none',
                        })}
                        item={item}
                        key={item.label}
                      >
                        <Combobox.ItemText
                          onClick={() => {
                            console.log('click');
                          }}
                        >
                          {item.label}
                        </Combobox.ItemText>
                        <Combobox.ItemIndicator>✓</Combobox.ItemIndicator>
                      </Combobox.Item>
                    ))}
                  </Combobox.ItemGroup>
                </Combobox.Content>
              </Combobox.Root>
            </div>
          </Dialog.Content>
        </Dialog.Positioner>
      </Portal>
    </Dialog.Root>
  );
};

[punkpeye]

I am trying to use highlightedValue. But the problem is that the moment you set highlightedValue, then key shortcuts no longer work.

[segunadebayo]

Consider setting both the highlightedValue and onHighlightChange to control the highlighted value fully. That way, you can set the initially highlighted value