Solid Kobalte Select example not working

[cs-clarence]

Tried the example listed here. The TextField example works but the Select example doesn't. I put a log on the createEffect portion but it only logs once.

createEffect(() => {
  console.log("Trigger value: ", props.value);
  setSignalValue(props.options.find((option) => props.value === option.value));
});

Change the Select value works but it the form doesn't observe the new values.

What worked is adding an onChange listener directly on the Select.Root component and using setValue on the form.

onChange={(e) => {
  setValue(form, "field", e.value);
}}

[fabian-hiller]

Thank you very much for the hint. It is possible that my code samples are not up to date. If you need help with Kobalte, I recommend the Kobalte channel on the SolidJS Discord. If you find out what the problem is, I'd be happy if you let me know here.

[cs-clarence]

I also tried to attach logging event listeners to the Select.HiddenSelect component and they are all triggering when I change the select value. Just to confirm, the props (2nd argument) passed to the HiddenSelect are used to update the reactive store of the forms, right? If that's the case then it's probably a problem with modular forms.

This is the code that I tried and they are logging when I change the value of the Select component. I log the values then call the corresponding handlers on the props.

ref={(e) => {
  console.log(e);
  props.ref(e);
}}
onChange={(e) => {
  console.log(e);
  props.onChange(e);
}}
onInput={(e) => {
  console.log(e);
  props.onInput(e);
}}
onBlur={(e) => {
  console.log(e);
  props.onBlur(e);
}}

Here is the log when I change the select value:

[fabian-hiller]

Since I'm currently writing my bachelor thesis, my mind is on other things at the moment. Unfortunately I can't give you a detailed answer. Please share your further research with me here, so that I can fix the Kobalte documentation on the Modular Forms website in September. If you have questions about Kobalte, I recommend this channel in the SolidJS Discord.

[apollo79]

Maybe related: I am having problems with kobalte's combobox and modularforms where I control the value of the combobox. What I see is that the onChange and onInput listeners of Combobox.HiddenSelect fire, but the onBlur listener not. Getting the value of the input using the browser console gives me its correct value, but when modularforms validates, the value is always an empty string. Is the blur listener somehow important here?

[fabian-hiller]

For Modular Forms only onInput is important for capturing the new value.

[apollo79]

Oh I think I oversaw something... currentTarget is set to the document on the input event from kobalte. Might this be the problem? But it can't be it actually, because my selects work and when I select something manually in the combobox's dropdown it works too. Only when I set a new value programatically, modularforms doesn't seem to recognize it, but the events look almost identical. The only difference is, that explicitOriginalTarget is once set to the list item that is selected and once to the input of the combobox.

[fabian-hiller]

I'm sorry, due to time constraints I can't take a closer look. If the problem still exists in September, I can check and fix the Kobalte Guide in our docs.

[cs-clarence]

Somehow, I fixed my issue. It has something to do with zod's parsing/validation (or maybe with the type="" prop in the Field component). Initially, I was using zod's nativeEnum with numbers as enum values instead of strings. When I changed the enum values to strings, it worked as intended.

@apollo79 if you happen to also use zod and nativeEnum, try changing the values to strings.

enum E {
  FOO = "FOO"
}

Instead of:

enum E {
  FOO = 1
}

[fabian-hiller]

The type property specifies which data type is captured, but if the <input /> or <select /> element used does not support it, no input is captured at all.

[cs-clarence]

The type property specifies which data type is captured, but if the <input /> or <select /> element used does not support it, no input is captured at all.

I see, maybe an exception should be thrown when there's a mismatch between the value and the type? Just so the users know what they are doing wrong.

[fabian-hiller]

Good idea. Will have a look at it in September.

[apollo79]

Okay, I found a workaround for the combobox issue which is simply delaying setting the new value with a setTimeout(() => setValue(newOption), 0). I still don't know if the issue is on my side and the option just doesn't exist at the time I set the value or if it is something with kobalte / solid, but I think the issue isn't by modular-forms.

[purung]

I'll chime in, as just a regular user trying to follow the docs. I can confirm at least getting stuck on trying to use Kobalte Select in combination with zod form validation and a field value of type number. I got typescript errors that were really hard to understand, so I just figured that I must be lacking the know-how to make this work. I'm quite relieved to see that this is an issue on the repo and can't believe I didn't check this out sooner. I fully respect you are setting firm limits on your time to complete your education @fabian-hiller, although I at least would have really benefited from a notice on compatibility issues on the site. If you make the time to rework the examples, I'll be even grateful for the ability to combine two awesome libraries :)

[fabian-hiller]

@fabien-ml do you have time to revise the code of the Kobalte guide in the Modular Forms docs?