Combobox Component doesn't recognize preset value if collection is only loaded after

[mrchrishahn]

We've been trying to pin down a pesky bug recently where forms where we were using the combobox as a field that loads options from the server wouldn't display the preselected value.

The situation was as follows:

1. We have a form that features a combobox which has options that get populated from the server
2. Due to it being an update form, we were able to preset the current value of the combobox from the existing state (but not the list of options) - we'd pass this through the value prop
3. When the options were loaded, they were packed into a collection and passed to the Combobox component - before we'd default to an empty collection
4. After the options has loaded, the preselected value wouldn't populate to be the inputValue - users had to manually select that value

I believe the issue lies in how when the collection is set, the function to check for a matching selected value isn't triggered.

zag/packages/machines/combobox/src/combobox.machine.ts

Lines 888 to 890 in 2ddd37a

	setCollection(ctx, evt) {
	ctx.collection = evt.value
	},

I worked around it for now by delaying the passing of the value to only once the data has loaded - kinda hacky but works for the meantime

[segunadebayo]

Could you share a reproduction and I can suggest a more appropriate way to handle it?

I imagine setting the inputValue instead of value could help mitigate this.

[mrchrishahn]

@segunadebayo Here's a minimal reproduction. See that the preset value isn't reflected in the inputValue.

https://stackblitz.com/edit/3rxhif?file=src%2FCombobox.tsx

[mrchrishahn]

I tried the inputValue instead of value approach in the Combobox2 component in the reproduction. Now the input is set but the value not selected.

I personally believe that it wouldn't hurt to trigger the syncSelectedItems on collection.set to handle such cases.

[segunadebayo]

We can't trigger syncSelectedItems since it affects the filtering logic.

Here's what will happen: When you start filtering, and the value isn't part of the filtered options, the selected item isn't up to date.

I need to think about this some more. For now, here's a quick workaround you can add to Combobox.tsx

  let called = useRef(false);

  if (api.value.length && !api.selectedItems.length && collection.size) {
    if (!called.current) {
      const inputValue = collection.stringify(api.value[0]);
      api.setInputValue(inputValue || '');
      called.current = true;
    }
  }