react icon indicating copy to clipboard operation
react copied to clipboard

Bug: File input element missing cancel event handler

Open uipoptart opened this issue 1 year ago • 3 comments

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: https://github.com/whatwg/html/issues/6376

uipoptart avatar Dec 27 '23 22:12 uipoptart

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

uipoptart avatar Dec 27 '23 23:12 uipoptart

Can I get assigned this task??

Martins100-Tmd avatar Dec 28 '23 12:12 Martins100-Tmd

Can I get assigned this task??

Yes @Martins100-Tmd You can

iamamanprajapati avatar Dec 29 '23 10:12 iamamanprajapati

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.

zh-lx avatar Jan 08 '24 12:01 zh-lx

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[bot] avatar Apr 10 '24 18:04 github-actions[bot]

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[bot] avatar Apr 17 '24 18:04 github-actions[bot]