search

ant-design / ant-design

An enterprise-class UI design language and React UI library
https://ant.design
MIT License
92.33k stars 49.52k forks source link

<Upload /> component does not handle its inner input's `onFocus` events #16807

Open sheminusminus opened 5 years ago

sheminusminus commented 5 years ago

Reproduction link

Edit on CodeSandbox

Steps to reproduce

  1. Add an <Upload /> component to any form or page
  2. Try to trigger an onFocus callback using any method (either by clicking on the Upload component, or by pressing tab until it focuses, etc)
  3. Any attached onFocus props will not be fired

What is expected?

Form inputs need onFocus event callbacks; it's expected that any focusable input has it, and this has been standard input behavior for decades now. Tthe underlying file input allows all the regular methods of focusing, thus it is expected that the focus event callback would exist on <Upload /> like it does with any other form field.

What is actually happening?

onFocus callbacks are not fired for any of keyboard, mouse, or screen-reader focus events.

Environment Info
antd 3.19.0
React 16.8.6
System macOS 10.14
Browser Chrome 74

Beyond it being expected/standard behavior, the absence of onFocus here adds unnecessary difficulty and extra code when implementing nice accessibility features, smooth client-side validations, and other misc dev tasks that don't really need to be more tedious than they already can be. XD

sheminusminus commented 5 years ago

I apologize if this is a duplicate, but I can't translate the non-English issue titles :(

afc163 commented 5 years ago

https://stackoverflow.com/a/32659785

sheminusminus commented 5 years ago

@afc163 Sorry, could you provide some context with that link? (Are you suggesting I use a normal button instead of the component with the actual file input in it? Or is this just for-reference?)

afc163 commented 5 years ago

just for reference

zombieJ commented 5 years ago

Seems it's caused by onFocus not pass to internal tag component. Maybe add this? ref: https://github.com/react-component/upload/blob/master/src/AjaxUploader.jsx#L221

barrymichaeldoyle commented 4 years ago

Is this issue not going to be resolved? It seems like a pretty simple fix to add an optional onFocus prop to the component. This looks like it deserves a "Good First Issue" tag since it is such a basic fix.

afc163 commented 2 years ago

https://github.com/react-component/upload/blob/master/src/AjaxUploader.tsx#L291-L299