italia / design-react-kit

Il toolkit React conforme alle linee guida di design per i siti internet e i servizi digitali della PA.
https://italia.github.io/design-react-kit/
BSD 3-Clause "New" or "Revised" License
152 stars 80 forks source link

[BUG] Numeric input increase/decrease button causes form submit #1011

Closed roffus closed 5 months ago

roffus commented 5 months ago

Describe the bug When you have a form with a numeric input, if you try to increase or decrease the value, the button triggers the submission of the form.

Virtute90 commented 5 months ago

Describe the bug When you have a form with a numeric input, if you try to increase or decrease the value, the button triggers the submission of the form.

hi @roffus, can you write code that reproduces this error?

roffus commented 5 months ago

I'm using useForm hook, but I think it's not related to that library. I see that the two buttons (.input-number-add and .input-number-sub) has not a type attribute and the default is submit. So probably it's enough to add type:"button" to solve this issue

const App = () => {
  const { control, handleSubmit } = useForm<any>({ mode: 'onChange' });
  const onSubmit = () => {
    console.log('submit');
  };
  return (
    <form style={{ width: '100px' }} onSubmit={handleSubmit(onSubmit)}>
      <Input control={control} name="name" type="number" />
    </form>
  );
};