search

SAP / ui5-webcomponents-react

A wrapper implementation for React of the UI5 Web Components that are compliant with the SAP Fiori User Experience
https://sap.github.io/ui5-webcomponents-react/
Apache License 2.0
438 stars 98 forks source link

[FileUploader]: [Cannot fire OnChange when reselect same file after resetting fileUploaderRef.current.value ] #6398

Open kushalkaranjkar opened 23 hours ago

kushalkaranjkar commented 23 hours ago

Describe the bug

We have file uploader which is inside the dialog and has ref pass to it. If you select a file and then use FileUploaderRef to reset the value of FileUploader. And Then Again try to select same file, It won't fire fileUploader OnChange event ? e.g. fileUploaderRef.current.value = "abc.txt" We have 'cancel' button on Dialog, and we are trying to reset value of fileUploader if user hit cancel. which is working as expected. But once cancel, if user reselect same file , onchange event won't fire and we cannot select same file.

Code Example:

const skillsFileName = "abc.docx". <FileUploader ref={fileUploaderRef} data-testid="resumeFileUploader" accept=".doc,.docx,.pdf,.txt,.rtf" onChange={onFileChange} disabled={busy} value={skillsFileName ? "${skillsFileName}" : ""}

Isolated Example

No response

Reproduction steps

  1. Create FileUploader using following snippet const skillsFileName = "abc.docx". <FileUploader ref={fileUploaderRef} data-testid="resumeFileUploader" accept=".doc,.docx,.pdf,.txt,.rtf" onChange={onFileChange} disabled={busy} value={skillsFileName ? "${skillsFileName}" : ""}

  2. Upload a file - e.g."abc.txt"
  3. Upload another file - "new_abc.txt"
  4. reset fileUploader value using - fileUploaderRef.current.value = "abc.txt"
  5. Again, try to upload previous file - "new_abc.txt"

Issue == File Uploader onChange event don't get fire ? ...

Expected Behaviour

Even after fileUploaderRef.current.value is reset, previous file to upload should be allowed .

Screenshots or Videos

https://github.com/user-attachments/assets/bca0c536-15c9-47c7-aa05-94a630d940ad

UI5 Web Components for React Version

1.29

UI5 Web Components Version

1.24

Browser

Chrome

Operating System

Mac

Additional Context

No response

Relevant log output

No response

Organization

SAP successfactors

Declaration

Lukas742 commented 16 hours ago

Hi @kushalkaranjkar

I wasn't able to reproduce this behavior. Please add an isolated example, preferably by leveraging this StackBlitz template.

Additionally, if you're resetting the value using a React ref, meaning directly via the attribute or property of the element, it's happening outside of React's lifecycle. This means React doesn't "know" that the element has changed, which is not recommended if you want to control the value in some other way.