Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Radio buttons not working with numeric value #273

Open
PeterDraex opened this issue Dec 18, 2024 · 7 comments
Open

Radio buttons not working with numeric value #273

PeterDraex opened this issue Dec 18, 2024 · 7 comments
Assignees
Labels
enhancement New feature or request

Comments

@PeterDraex
Copy link

PeterDraex commented Dec 18, 2024

I've read the docs and implemented a form with radio buttons, but when you click on a radio button, the form state is not updated.

Here is a simplified code example.

const entities = [
  { id: 1, label: 'one' },
  { id: 2, label: 'two' },
];

type RadioForm = {
  entityID: number;
};
<For each={entities}>
  {(entity) => (
    <Field name="entityID" type="number">
      {(field, props) => (
        <label>
          <input
            {...props}
            type="radio"
            value={entity.id}
            checked={field.value == entity.id}
          />
          {entity.label}
        </label>
      )}
    </Field>
  )}
</For>
Current value: {getValue(radioForm, 'entityID')}

Manually adding onChange={(e) => setValue(radioForm, 'entityID', parseInt(e.target.value))} to the input fixes the issue, but I'm guessing that's not the correct use, since no other input type requires manually setting the new value.

The full example is available on Stackblitz.

Is this a bug?

@fabian-hiller
Copy link
Owner

What framework are you using? I am happy to share a working example from our playground with you.

@fabian-hiller fabian-hiller self-assigned this Dec 19, 2024
@fabian-hiller fabian-hiller added the question Further information is requested label Dec 19, 2024
@PeterDraex
Copy link
Author

PeterDraex commented Dec 19, 2024

I'm using SolidJS. Right, in the StackBlitz example above, I used the playground as the basis.

The issue is that when I use number for the form field type, it breaks the radio buttons. I am assuming numeric values should be working too?

@fabian-hiller
Copy link
Owner

I don't think <input type="radio />" supports the .valueAsNumber property. When using number, the library doesn't do any transformation itself, it just reads the value of the HTML element.

@PeterDraex PeterDraex changed the title Radio buttons not working Radio buttons not working with numeric value Dec 19, 2024
@PeterDraex
Copy link
Author

PeterDraex commented Dec 19, 2024

I see. Would a PR that implements the conversion be welcomed? I think this is an unnecessary caveat

@fabian-hiller
Copy link
Owner

No, because I plan to rewrite the library. I will take this into account when rewriting. For now, I recommend to stick with string and transform it afterwards.

@PeterDraex PeterDraex closed this as not planned Won't fix, can't repro, duplicate, stale Dec 20, 2024
@fabian-hiller
Copy link
Owner

I reopen it so that I don't forget this when rewriting the library.

@fabian-hiller fabian-hiller reopened this Dec 20, 2024
@fabian-hiller fabian-hiller added enhancement New feature or request and removed question Further information is requested labels Dec 20, 2024
@brandonpittman
Copy link
Contributor

Glad I found this. I got stuck on this for a while this morning.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants