More docs onFocus and onBlur events #3044
Conversation
Including more substantial documentation around the `onFocus` and `onBlur` events that aren't so common sense on first look.
|
Hi @ctrlaltdylan! Thank you for your pull request and welcome to our community.We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA. If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks! |
|
Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks! |
Co-authored-by: Darsh Shah <imdarshshah@gmail.com>
|
How do you feel about incorporating this example? Seems like it’s a useful collection of behaviors people want. facebook/react#6410 (comment) |
|
Deploy preview for reactjs ready! Built with commit 3674276 |
content/docs/reference-events.md
Outdated
|
|
||
| #### onFocus | ||
|
|
||
| The `onFocus` prop is initiated when focus is on the element. For example, when the user clicks on a text input element, the function defined with the `onFocus` prop is called. |
There was a problem hiding this comment.
That is certainly true for chrome on windows and linux as far as I know. But does not apply to e.g. firefox macOS.
More specifically: By spec it is up to the user agent (e.g. a browser) to determine whether a clicked element is also focused.
There was a problem hiding this comment.
Or it might be true for inputs. I was a bit suspicious because of the "click-focus" association which is a bit tricky on other platforms.
There was a problem hiding this comment.
@eps1lon I just booted up Firefox + Mac and ran through a sample:
https://www.loom.com/share/34f1a18300b44187b7a65e2c01b73f8b
Sandbox: https://codesandbox.io/s/busy-browser-0me16?file=/src/App.js:146-191
It appears to be 1:1 to Chrome, at least for the basic examples I wanted to document. If you find something else different please feel free to edit/tack on.
Adding an example of `relatedTarget` to determine orgin of onblur or onfocus events
@gaearon Forked your explanation and changed the logging events to be a tad more people friendly and specific. Added a few more examples to cover vanilla |
Fixing `onBlur` example bug. Co-authored-by: Darsh Shah <imdarshshah@gmail.com>
|
Code blocks need to be consistently indented and should use JS language |
Fixing spacing in `onBlur` `onFocus` examples and tagging them with `javascript`
|
@gaearon thanks, missed that. Updated |
|
Deployment failed with the following error: |
7 participants
Including more substantial documentation around the
onFocusandonBlurevents that aren't so common sense on first look.