Same file upload doesn't fire input event, even when clearing `input.value`
See original GitHub issue@testing-library/user-event
version: 12.8.2
- Testing Framework and version: jest 26.6.0
- DOM Environment: jsdom 16.4.0
Relevant code or config
const handleChange = jest.fn();
render(<InputComponent changeHandler={handleChange} />);
const inputEl = screen.getByLabelText("Select file") as HTMLInputElement;
const file = new File([], "image.jpg");
userEvent.upload(inputEl, file);
await waitFor(() => expect(handleChange).toBeCalled());
inputEl.value = "";
userEvent.upload(inputEl, file);
//fails
await waitFor(() => expect(handleChange).toBeCalledTimes(2));
What you did:
In #575, upload was changed so it correctly doesn’t fire an onChange/onInput event when the same files are selected. In our use case, we do want it to fire again, and our workaround is adding an onClick
event that sets inputEl.value = ""
.
What happened: Second input event doesn’t fire, even when the value is reset to blank.
Problem description:
Looking at the source, it doesn’t appear to take value
into account.
Suggested solution:
It should consider the value of the input field, but I’m not sure how the value relates to input.files
, which is what is normally used.
Issue Analytics
- State:
- Created 2 years ago
- Comments:6 (3 by maintainers)
Top Results From Across the Web
HTML input file selection event not firing upon selecting the ...
This will reset the input 's value and trigger the onchange event even if the same path is selected. var input = document.getElementsByTagName('input')[0]; ......
Read more >Input File change event not working - EncodeDna.com
A simple solution to get rid of this issue will be, to clear the file input value. I'll show you how. Let's see...
Read more >Solved: on change of html input form element does not work...
I assume it's since the "change" event has not occurred since it remembers the previous file.
Read more >Using files from web applications - Web APIs - MDN Web Docs
Here, we retrieve the dataTransfer field from the event, pull the file list out of it, and then pass that to handleFiles() ....
Read more >Upload same image not working - OutSystems
The solution is to set the value of inputs[i] to "" so that the next time you upload the same image, the upload...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
jsdom seems to implement the correct behaviour for clearing: https://github.com/jsdom/jsdom/blob/bd50bbe219799980d9c9a173309cafcef3d9d8bc/lib/jsdom/living/nodes/HTMLInputElement-impl.js#L416
The issue has been resolved in #794
https://codesandbox.io/s/solitary-mountain-vlttj?file=/src/index.test.js