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

[gadishimwe]

I'm using a file input rendered in the list and somehow onChange handler of one (the first in CodeSandbox example) item is being used for the rest items in the list as their onChange handler when I click the label instead of the input (because I'm planning to hide it later).

React version:
18.2.0

Steps To Reproduce

1. Map over any list and render a file input with a label.
2. Console.log() the index from the map in the onChange handler.
3. Click the label of any item in the list, not the actual input. It should log 0 for all items. It should work normally as usual if you click input though.

(U can use the CodeSandbox below. These steps are already implemented)

Link to code example:

https://codesandbox.io/s/modern-firefly-8qm4ws?file=/src/App.tsx

Check the console.

The current behavior

One onChange handler is being used for all items in the list when I use a label to trigger input change.

The expected behavior

Every item (input) should have a unique onChange handler as usual in 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.