Qwik "special form" example doesn't work with number select box

[ffMathy]

See example here, where I have (under "special") created a new combobox called "Select number".

Note that selecting the number does not give the value out of the form, whereas selecting the string does.

https://stackblitz.com/edit/modular-forms-qwik-gfsy2g?file=src%2Froutes%2Fspecial%2Findex.tsx,src%2Fcomponents%2FSelect.tsx

[fabian-hiller]

This is because <select /> cannot return numbers as values. Modular Forms builds on the functionality of the native HTML form elements here.

[ffMathy]

That's why I wrapped the calls in JSON.stringify. Shouldn't this still work?

[fabian-hiller]

This has no effect on it. Modular Forms can only capture a data type if it is supported by the HTML element being used and <select /> can only return strings. To maintain type safety, Modular Forms simply does not capture a value in this case. Here is the implementation: https://github.com/fabian-hiller/modular-forms/blob/main/packages/qwik/src/utils/getElementInput.ts

[ffMathy]

Hmmm okay. Is there another way to build (for instance) a date picker around Modular Forms, if the input element is of type Date for instance? Or maybe just a number field.

[fabian-hiller]

Yes, I think this is possible. For custom input elements, setValue can also be used to capture inputs.

[ffMathy]

I see. In that case, would I have a component which takes in a Form as a prop for this to work?

[ffMathy]

My dilemma is how I preserve the strong-typing inside the component.

[fabian-hiller]

You can also simply provide an onInput$ prop where you then call setValue directly in your form. This way you won't have any typing issues and your component will remain independent of Modular Forms.

[ffMathy]

Alright.

What I ended up with now is a component that looks like this:

<Select
    form={form}
    fieldPath="durationInMinutes"
    options={getDurationsInMinutes().map(durationInMinutes => ({
      label: getLabelFromDurationInMinutes(durationInMinutes),
      value: durationInMinutes
    }))}
    label="Duration"
  />

The fieldPath and form is strong-typed. However, when I call setValue(form, fieldPath, value), no value is set (confirmed by retrieving it again using getValue(form, fieldPath)).

Any ideas what may be causing this?

[fabian-hiller]

Is your component enclosed by the Field component? Is it perhaps related to the active state? Feel free to ask me any questions you may have. Otherwise I need a code example to investigate the problem.

[ffMathy]

Ah no. It's not. I keep forgetting that. Would be awesome if that was a runtime error.

To be honest, I don't think that adds a lot to the bundle size. People today don't care much about a 30 byte difference in libraries. It has neglectable performance difference compared to the things we install also.

[fabian-hiller]

Thanks for your feedback. I will consider it as soon as I have some more time for Modular Forms.

I recommend to always enclose a field with the Field component. This makes it easier to control your form field and display error messages.

[ffMathy]

Great stuff. I love your work.

I've been using getValue a lot lore by the way. I've not had one single case where I didn't need to set shouldActive to false. Sorry to bring that up again, just thought the new info would be helpful.

Not sure how I can fix that with this component too. Is it because I'm missing some other calls?

[fabian-hiller]

Thanks a lot! A new open source project will follow soon, which can be used together with Modular Forms.

If you send me a simple code example, I can take a look at it.