Is it possible to passthrough complex values on Combobox?

[martinpengellyphillips]

👋 I just started exploring Ark with Solid. I'm testing out the Combobox and wondering if there is a way to passthrough a more complex value (e.g. object)?

For example in https://solid-select.com/?example=Format the value from the select onChange is the full object rather than only the extracted string value for display purpose. Ideally I'd like to achieve something similar with ark, without having to do mappings separately via a unique key. Currently though I can only seem to passthrough a string as value - anything else leads to errors.

And if not in Ark, would it be possible using the underlying Zag implementation directly instead?

Thanks!

[anubra266]

@martinpengellyphillips we only allow string values. Objects will be unnecessary complexity during value comparisms.
There's sincerely no usecase where strings won't work. You can share your usecase, I'll show how to achieve that with strings.

[martinpengellyphillips]

@anubra266 thanks for confirming it is not possible with Ark (nor intended for future).

My use case is that I have a list of entities that can be selected and I'd like to avoid having an intermediate lookup/indirection. I understand it is niche and I can work around it / use my own thing, but just wanted to check in case I was missing something in Ark.

Imagine the following:

const entities = [{name: 'a', ...}, {name: 'b', ...}, ...]
const [inputValue, setInputValue] = createSignal('')
const options = () => entities.filter(e => e.name.startsWith(inputValue()))

const onSelect = ({value}) => {
  // I'd rather this
  store.set('selected', value); 

  // than this
  store.set('selected', entities.find(entity => entity.name === value)  
}

<Combobox onSelect={onSelect}>
...
  <ComboboxContent>
    <For each={options()}>
      {(option, index) => (
        <ComboboxOption
          label={option.name}
          value={option.name} // Here I'd rather be able to pass just option through
          index={index()}
        >
          {option.name}
        </ComboboxOption>
      )}
    </For>
  </ComboboxContent>

</Combobox>

Curious: when you say "Objects will be unnecessary complexity during value comparisms." what comparison are you referring to? Is this for auto highlighting the option for the current value?

[anubra266]

@martinpengellyphillips what I mean by comparism, is our internal logic will need to do checks like

const optionIsSelected - comboboxValue === option.value

Now it's easy to do that with strings. But it gets messy once that becomes an object.

[martinpengellyphillips]

Wouldn't that work with objects as well - the same object would match and others wouldn't? I guess it depends on the implementation in Ark and how used 🤔

For reference - I built https://solid-select.com/ so I do appreciate the complexity and that you have to make tradeoffs. One of my reasons for this discussion was actually whether I could replace solid select with ark ultimately 😄

[alimozdemir]

Hi @cschroeter I think this is really important information at first glance that you can only have string values for Combobox/Select.

Components are generic types, that can take complex objects. I thought I was doing something right, but once I set the complex object. ValueText is not working and Keyboard functionalities (up/down) are not working either.

That did take a lot of time to find this. And in the documentation, it doesn't say anything related to this. I think this information should be in the documentation as an alert or something.

[anubra266]

@alimozdemir According to this objects are supported now. You just need to specify how to detect label and value with itemToString and itemToValue

Default implementation is found here: https://github.com/chakra-ui/zag/blob/9072eb4ed2b67680df61023141f639b59ac46ee3/packages/utilities/collection/src/collection.ts#L9

cc @martinpengellyphillips I'm one year late. 😁

[alimozdemir]

From the implementation, it looks like we need to obey this complex object type :)

const items = ref([
{ label: 'React', value: 'react' },
{ label: 'Solid', value: 'solid' },
{ label: 'Vue', value: 'vue' },
{ label: 'Svelte', value: 'svelte', disabled: true },
]);

Always have the "label", "value" and "disabled". We can't use "id", "name", "disabled" for example. am I right? 😄

[anubra266]

@alimozdemir You can use anything, but you'll need the two props I mentioned to tell Ark what to use as value and label in its internal logic, please take a look at the default implementation I cited

https://ark-ui.com/react/examples/async-select

[btroop]

@martinpengellyphillips i was running into the same issue and posted an idea request in the zag repo chakra-ui/zag#1608

like you, would love to see this implemented because the filtering step to get to the list of selected objects is silly

[cschroeter]

@btroop

itemToValue={(item) => item.id}
itemToString={(item) => item.name}