Combobox onInputValueChange breaks suggestion filtering

[dioro]

Current Behavior

Adding the onInputValueChange attribute to a Combobox component breaks the suggestion filtering(see gif)

Expected Behavior

There shouldn't be a difference whether the attribute is added or not. It should look like this:

Steps To Reproduce

const APITypes = ["/api/article", "/api/product"];
let testing = $state([APITypes[0]]);

<Combobox
    allowCustomValue={true}
    classes="w-[400px]"
    onInputValueChange={(v) => {}}
    name="api"
    bind:value={testing}
    data={APITypes.map((api) => ({ label: api, value: api }))}
/>

Removing onInputValueChange makes it work

Link to Reproduction / Stackblitz

No response

Environment Information

System:
OS: Windows 10 10.0.19045
CPU: (8) x64 Intel(R) Core(TM) i7-9700K CPU @ 3.60GHz
Memory: 17.35 GB / 31.92 GB
Binaries:
Node: 23.6.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 8.13.2 - C:\Program Files\nodejs\npm.CMD
bun: 1.2.2 - ~.bun\bin\bun.EXE
Browsers:
Chrome: 124.0.6367.158
Edge: Chromium (127.0.2651.74), ChromiumDev (127.0.2610.3)
Internet Explorer: 11.0.19041.4355
npmPackages:
@skeletonlabs/skeleton: ^3.0.0-next.10 => 3.0.0-next.10
@skeletonlabs/skeleton-svelte: ^1.0.0-next.19 => 1.0.0-next.19

More Information

No response

[nullpointerexceptionkek]

Hey @endigo9740,

The issue seems to stem from how the zagProps are being passed:

context: {
  ...zagProps,
  get data() {
    return $state.snapshot(data);
  },
  get value() {
    return $state.snapshot(value);
  }
}

This setup effectively overrides the onInputValueChange function that was previously defined:

onInputValueChange(details) {
  console.log("i run");
  zagProps.onInputValueChange?.(details);
  
  const filtered = data.filter((item) => 
    item.label.toLowerCase().includes(details.inputValue.toLowerCase())
  );
  
  const newOptions = filtered.length > 0 ? filtered : data;
  collection.setItems(newOptions);
  options = newOptions;
}

From what I understand, the second argument in the userMachine is typically used for runtime state modification and is only used in ComboBox for updating collections. I’m not entirely sure why we’d need to pass all the zag props in.

The src is here

https://github.com/skeletonlabs/skeleton/blob/next/packages/skeleton-svelte/src/lib/components/Combobox/Combobox.svelte

[endigo9740]

@Hugos68 set the standard on this, so he can likely speak to it better than myself.

[Hugos68]

I'll take a look and see what's up

[Hugos68]

@endigo9740 This is caused because we have to hack around zag because we want to support $bindable, I think we should really discsuss about removing all $bindable, the Svelte docs recommend agaisnt using it, I personally think it creates needless complexity. And it has caused so many bugs.

[endigo9740]

@Hugos68 has brought up issues with bindable several times. I'm not opposed to splitting between the data in/out approach. But I won't have time personally to implement this right now. If Hugo/Long you want to handle this, go for it.