Bug: Clicking file input label that's rendered in the list changes onChange handler behavior(to non-react behavior) about react

[nusr]

Probably not a bug, but an HTML feature。

Note: The input and change events do not apply to this input type. Hidden inputs cannot be focused even using JavaScript (e.g. hiddenInput.focus()).

MDN source link

[gadishimwe]

Hey @nusr, thanks for the information. I wasn't aware of that as well. But I think this issue is different because even if you remove the hidden attribute, you still get the same issue if you click on the label, instead of the actual input. Maybe I should update the steps to reproduce it and remove the hidden attributes to remove the confusion.

[nusr]

Hey @nusr, thanks for the information. I wasn't aware of that as well. But I think this issue is different because even if you remove the hidden attribute, you still get the same issue if you click on the label, instead of the actual input. Maybe I should update the steps to reproduce it and remove the hidden attributes to remove the confusion.

If the same content is selected, the change event will not be triggered.

Add event.target.value = '' fix the problem.

https://codesandbox.io/s/white-leftpad-98w2kx?file=/src/App.tsx

https://stackoverflow.com/questions/12030686/html-input-file-selection-event-not-firing-upon-selecting-the-same-file

[gadishimwe]

@nusr it's not that I'm selecting the same file. I just updated the issue description and the CodeSandbox. You can try it again and just so that you know that it's not about selecting the same file, try first to click the item which is not the first one in the list, you'll see the 0 in the console no matter which file you pick.

[gadishimwe]

Thanks, @groetzi for pointing out the cause of the issue. It turns out I was using the same id for input and that's what was causing the issue. It can be fixed by either removing the id and htmlFor from input and label respectively or proving a unique id.