InputSwitch inside Label doesn't toggle correctly.

[nazar]

I'm submitting a ... (check one with "x")

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://forum.primefaces.org/viewforum.php?f=57

Codesandbox Case (Bug Reports)

https://codesandbox.io/s/loving-panini-krzfe?file=/src/demo/InputSwitchDemo.js

Current behavior

When InputSwitch is enclosed in a label, it appears that the onChange event triggers twice and doesn't toggle.

<label>
  <InputSwitch checked={checked1} onChange={setChecked1} />
  checked 1
</label>

With the above, InputSwitch doesn't toggle as onChange is triggered twice: first with a true followed by a false (if starting with a checked={true} state.

<InputSwitch checked={checked2} onChange={setChecked2} />

The above works fine when not enclosed with a label

Expected behavior

InputSwitch should work as expected when enclosed with a label.

Minimal reproduction of the problem with instructions

See this sandbox where Basic doesn't toggle when clicking on the InputSwitch and Basic only toggle when clicking on the label text.

[ogzogz88]

@nazar, if you wrap an input element with label, input element's change event triggers twice because of event bubbling. So when you click, first InputSwitch's value changes to true and immediately changes to false again as you mentioned. You do not have to wrap it with label,
instead of:
<label> <InputSwitch checked={checked1} onChange={setChecked1} /> checked 1 </label>
you can use:
<InputSwitch inputId="inputSwitch" checked={checked1} onChange={setChecked1} /> <label for="inputSwitch">checked 1</label>

[nazar]

Thank you for your comment @ogzogz88 - as you mentioned, I did have to resort to the non-nested usage of label in this instance.

This does limit our usage of the InputSwitch component on large forms since each input unnecessarily needs an ID attribute for the label, which is not necessary in the nested usage of label.

[vytya]

Also faced with this
#2299