Solid Kobalte Select example not working about modular-forms HOT 14 OPEN

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.

from modular-forms.

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:

from modular-forms.

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.

from modular-forms.

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?

from modular-forms.

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

from modular-forms.

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.

from modular-forms.

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.

from modular-forms.

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
}

from modular-forms.

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.

from modular-forms.

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.

from modular-forms.

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

from modular-forms.

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.

from modular-forms.