Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug: File input element missing cancel event handler #27858

Closed
uipoptart opened this issue Dec 27, 2023 · 6 comments
Closed

Bug: File input element missing cancel event handler #27858

uipoptart opened this issue Dec 27, 2023 · 6 comments
Labels
Resolution: Stale Automatically closed due to inactivity Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug

Comments

@uipoptart
Copy link

React version: 18.2.0

Steps To Reproduce

  1. Add an input of type file with a cancel prop like this to a functional component: <input type="file" cancel={cancel}>
  2. Observe error in console:
    Warning: Invalid value for prop `cancel` on <input> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details, see https://reactjs.org/link/attribute-behavior at input at App

Link to code example: https://codesandbox.io/p/sandbox/keen-grothendieck-jcr72t?file=%2Fsrc%2FApp.js

The current behavior

The cancel prop is considered an invalid prop on the file input.

The expected behavior

input of type file includes cancel event listener.
See documentation here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#detecting_cancellations
See a working vanilla JS/HTML code example: https://jsfiddle.net/snjm9p5d/
The PR where this functionality was added to the HTML standard: whatwg/html#6376

@uipoptart uipoptart added the Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug label Dec 27, 2023
@uipoptart
Copy link
Author

Another helpful link I meant to include is the browser compatibility for cancel on the element: https://pr30946.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement

@Martins100-Tmd
Copy link

Can I get assigned this task??

@iamamanprajapati
Copy link

Can I get assigned this task??

Yes @Martins100-Tmd You can

@zh-lx
Copy link
Contributor

zh-lx commented Jan 8, 2024

cancel is an event so you should use <input type="file" onCancel={cancel}>. However, react dosen't support cancel for input[type="file"], I add a PR #27897 for this.

Copy link

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

@github-actions github-actions bot added the Resolution: Stale Automatically closed due to inactivity label Apr 10, 2024
Copy link

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

@github-actions github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Apr 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Resolution: Stale Automatically closed due to inactivity Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants