From dcf602ae538d434ba5e4dedc91eee1858353136b Mon Sep 17 00:00:00 2001 From: Dylan Pierce Date: Thu, 18 Jun 2020 09:24:04 -0400 Subject: [PATCH 1/9] More docs onFocus and onBlur events Including more substantial documentation around the `onFocus` and `onBlur` events that aren't so common sense on first look. --- content/docs/reference-events.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/content/docs/reference-events.md b/content/docs/reference-events.md index 0cadd3728df..f0e60d08950 100644 --- a/content/docs/reference-events.md +++ b/content/docs/reference-events.md @@ -165,6 +165,14 @@ onFocus onBlur These focus events work on all elements in the React DOM, not just form elements. +#### 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. + +#### onBlur + +`onBlur` prop is initiated when focus has left on the element. For example, when the user clicks into and then clicks outside of on a text input element, the function defined with the `onFocus` prop is called. + Properties: ```javascript From 7762214e0d4ab11a49c3aae0764700c207ca146c Mon Sep 17 00:00:00 2001 From: Dylan Pierce Date: Fri, 25 Sep 2020 12:21:29 -0400 Subject: [PATCH 2/9] Update content/docs/reference-events.md Co-authored-by: Darsh Shah --- content/docs/reference-events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/reference-events.md b/content/docs/reference-events.md index f0e60d08950..2b20dbd4d41 100644 --- a/content/docs/reference-events.md +++ b/content/docs/reference-events.md @@ -171,7 +171,7 @@ The `onFocus` prop is initiated when focus is on the element. For example, when #### onBlur -`onBlur` prop is initiated when focus has left on the element. For example, when the user clicks into and then clicks outside of on a text input element, the function defined with the `onFocus` prop is called. +`onBlur` prop is initiated when focus has left on the element. For example, when the user clicks into and then clicks outside of on a text input element, the function defined with the `onBlur` prop is called. Properties: From 9b24359bfc3b5744c27459679f5ba065aa0a45a7 Mon Sep 17 00:00:00 2001 From: Dylan Pierce Date: Fri, 25 Sep 2020 13:01:23 -0400 Subject: [PATCH 3/9] Update reference-events.md Adding an example of `relatedTarget` to determine orgin of onblur or onfocus events --- content/docs/reference-events.md | 66 ++++++++++++++++++++++++++++++++ 1 file changed, 66 insertions(+) diff --git a/content/docs/reference-events.md b/content/docs/reference-events.md index 2b20dbd4d41..0e9b327d163 100644 --- a/content/docs/reference-events.md +++ b/content/docs/reference-events.md @@ -169,15 +169,81 @@ These focus events work on all elements in the React DOM, not just form elements 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. +``` + function onFocusExample() { + return ( + { + console.log('Focused on input'); + }} + placeholder="onFocus is triggered when you click this input." + /> + ) + } +``` + #### onBlur `onBlur` prop is initiated when focus has left on the element. For example, when the user clicks into and then clicks outside of on a text input element, the function defined with the `onBlur` prop is called. +``` + function onBlurExample() { + return ( + { + console.log('Triggered because this input lost focus'); + }} + placeholder="onBlur is triggered when you click this input and then you click outside of it." + /> + ) + } +``` + Properties: ```javascript DOMEventTarget relatedTarget ``` +`relatedTarget` is useful for detecting _child_ focus events as well as bubbling vs encapsulating events. + +* _bubbling_: If the focus/blur event fires on a descendant node, this handler gets called. +* _encapsulation_: If focus passes between two descendant nodes, this handler does not get called. + +You can use the `currentTarget` and `relatedTarget` to differentiate if the focusing or blurring events originated from _outside_ of the parent element: + +``` +export default function App() { + return ( +
{ + console.log("focused on", e.target); + if (e.currentTarget === e.target) { + console.log("focused on (self)"); + } + if (!e.currentTarget.contains(e.relatedTarget)) { + console.log( + "Now focused on parent
, not triggered when swapping between children." + ); + } + }} + onBlur={(e) => { + console.log("left focus of", e.target); + if (e.currentTarget === e.target) { + console.log("left focus of (self)"); + } + if (!e.currentTarget.contains(e.relatedTarget)) { + console.log("left focus of
, not triggered when swapping focus between children inputs"); + } + }} + > + + +
+ ); +} +``` + * * * From 19bb5a62b00ef92eef54eafc721f663ebfe0bb77 Mon Sep 17 00:00:00 2001 From: Dylan Pierce Date: Fri, 25 Sep 2020 13:13:53 -0400 Subject: [PATCH 4/9] Update reference-events.md --- content/docs/reference-events.md | 3 --- 1 file changed, 3 deletions(-) diff --git a/content/docs/reference-events.md b/content/docs/reference-events.md index 0e9b327d163..6a535ecb8f7 100644 --- a/content/docs/reference-events.md +++ b/content/docs/reference-events.md @@ -206,9 +206,6 @@ DOMEventTarget relatedTarget ``` `relatedTarget` is useful for detecting _child_ focus events as well as bubbling vs encapsulating events. -* _bubbling_: If the focus/blur event fires on a descendant node, this handler gets called. -* _encapsulation_: If focus passes between two descendant nodes, this handler does not get called. - You can use the `currentTarget` and `relatedTarget` to differentiate if the focusing or blurring events originated from _outside_ of the parent element: ``` From e451ce6a519f853bae06093c94f83a1dc9d0d4e6 Mon Sep 17 00:00:00 2001 From: Dylan Pierce Date: Fri, 25 Sep 2020 13:43:35 -0400 Subject: [PATCH 5/9] Update content/docs/reference-events.md Fixing `onBlur` example bug. Co-authored-by: Darsh Shah --- content/docs/reference-events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/reference-events.md b/content/docs/reference-events.md index 6a535ecb8f7..d8bbbe110f2 100644 --- a/content/docs/reference-events.md +++ b/content/docs/reference-events.md @@ -226,7 +226,7 @@ export default function App() { }} onBlur={(e) => { console.log("left focus of", e.target); - if (e.currentTarget === e.target) { + if (e.currentTarget !== e.target) { console.log("left focus of (self)"); } if (!e.currentTarget.contains(e.relatedTarget)) { From 96135e5c48ac18b92f465f83d0283b390e46148d Mon Sep 17 00:00:00 2001 From: Dylan Pierce Date: Mon, 28 Sep 2020 09:11:56 -0400 Subject: [PATCH 6/9] Update reference-events.md Fixing spacing in `onBlur` `onFocus` examples and tagging them with `javascript` --- content/docs/reference-events.md | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/content/docs/reference-events.md b/content/docs/reference-events.md index d8bbbe110f2..2d4bbcb708b 100644 --- a/content/docs/reference-events.md +++ b/content/docs/reference-events.md @@ -169,16 +169,16 @@ These focus events work on all elements in the React DOM, not just form elements 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. -``` +```javascript function onFocusExample() { - return ( + return ( { console.log('Focused on input'); }} placeholder="onFocus is triggered when you click this input." /> - ) + ) } ``` @@ -186,17 +186,17 @@ The `onFocus` prop is initiated when focus is on the element. For example, when `onBlur` prop is initiated when focus has left on the element. For example, when the user clicks into and then clicks outside of on a text input element, the function defined with the `onBlur` prop is called. -``` - function onBlurExample() { - return ( - { - console.log('Triggered because this input lost focus'); - }} - placeholder="onBlur is triggered when you click this input and then you click outside of it." - /> - ) - } +```javascript +function onBlurExample() { + return ( + { + console.log('Triggered because this input lost focus'); + }} + placeholder="onBlur is triggered when you click this input and then you click outside of it." + /> + ) +} ``` Properties: @@ -208,7 +208,7 @@ DOMEventTarget relatedTarget You can use the `currentTarget` and `relatedTarget` to differentiate if the focusing or blurring events originated from _outside_ of the parent element: -``` +```javascript export default function App() { return (
Date: Fri, 23 Oct 2020 22:46:00 +0100 Subject: [PATCH 7/9] Update reference-events.md --- content/docs/reference-events.md | 57 +++++++++++++++----------------- 1 file changed, 27 insertions(+), 30 deletions(-) diff --git a/content/docs/reference-events.md b/content/docs/reference-events.md index 2d4bbcb708b..c45f48588bb 100644 --- a/content/docs/reference-events.md +++ b/content/docs/reference-events.md @@ -167,27 +167,27 @@ These focus events work on all elements in the React DOM, not just form elements #### 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. +The `onFocus` event is called when the element (or some element inside of it) receives focus. For example, when the user clicks on a text input element, the function defined with the `onFocus` prop is called. ```javascript - function onFocusExample() { - return ( - { - console.log('Focused on input'); - }} - placeholder="onFocus is triggered when you click this input." - /> - ) - } +function Example() { + return ( + { + console.log('Focused on input'); + }} + placeholder="onFocus is triggered when you click this input." + /> + ) +} ``` #### onBlur -`onBlur` prop is initiated when focus has left on the element. For example, when the user clicks into and then clicks outside of on a text input element, the function defined with the `onBlur` prop is called. +The `onBlur` event handler is called when focus has left the element (or left some element inside of it). For example, when the user clicks into and then clicks outside of on a text input element, the function defined with the `onBlur` prop is called. ```javascript -function onBlurExample() { +function Example() { return ( { @@ -199,38 +199,35 @@ function onBlurExample() { } ``` -Properties: - -```javascript -DOMEventTarget relatedTarget -``` -`relatedTarget` is useful for detecting _child_ focus events as well as bubbling vs encapsulating events. +#### Detecting Focus Entering and Leaving -You can use the `currentTarget` and `relatedTarget` to differentiate if the focusing or blurring events originated from _outside_ of the parent element: +You can use the `currentTarget` and `relatedTarget` to differentiate if the focusing or blurring events originated from _outside_ of the parent element. Here is a demo you can copy and paste that shows how to detect focusing a child, focusing the element itself, and focus entering or leaving the whole subtree. ```javascript -export default function App() { +function Example() { return (
{ - console.log("focused on", e.target); if (e.currentTarget === e.target) { - console.log("focused on (self)"); + console.log('focused self'); + } else { + console.log('focused child", e.target); } if (!e.currentTarget.contains(e.relatedTarget)) { - console.log( - "Now focused on parent
, not triggered when swapping between children." - ); + // Not triggered when swapping focus between children + console.log('focus entered self'); } }} onBlur={(e) => { - console.log("left focus of", e.target); - if (e.currentTarget !== e.target) { - console.log("left focus of (self)"); + if (e.currentTarget === e.target) { + console.log('unfocused self'); + } else { + console.log('unfocused child", e.target); } if (!e.currentTarget.contains(e.relatedTarget)) { - console.log("left focus of
, not triggered when swapping focus between children inputs"); + // Not triggered when swapping focus between children + console.log('focus left self'); } }} > From 5824fecddff5334b8fd06257b7696e10d3437da4 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Fri, 23 Oct 2020 22:53:07 +0100 Subject: [PATCH 8/9] Update reference-events.md --- content/docs/reference-events.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/docs/reference-events.md b/content/docs/reference-events.md index c45f48588bb..faeb5cb91e6 100644 --- a/content/docs/reference-events.md +++ b/content/docs/reference-events.md @@ -167,7 +167,7 @@ These focus events work on all elements in the React DOM, not just form elements #### onFocus -The `onFocus` event is called when the element (or some element inside of it) receives focus. For example, when the user clicks on a text input element, the function defined with the `onFocus` prop is called. +The `onFocus` event is called when the element (or some element inside of it) receives focus. For example, it's called when the user clicks on a text input. ```javascript function Example() { @@ -184,7 +184,7 @@ function Example() { #### onBlur -The `onBlur` event handler is called when focus has left the element (or left some element inside of it). For example, when the user clicks into and then clicks outside of on a text input element, the function defined with the `onBlur` prop is called. +The `onBlur` event handler is called when focus has left the element (or left some element inside of it). For example, it's called when the user clicks outside of a focused text input. ```javascript function Example() { @@ -212,7 +212,7 @@ function Example() { if (e.currentTarget === e.target) { console.log('focused self'); } else { - console.log('focused child", e.target); + console.log('focused child', e.target); } if (!e.currentTarget.contains(e.relatedTarget)) { // Not triggered when swapping focus between children @@ -223,7 +223,7 @@ function Example() { if (e.currentTarget === e.target) { console.log('unfocused self'); } else { - console.log('unfocused child", e.target); + console.log('unfocused child', e.target); } if (!e.currentTarget.contains(e.relatedTarget)) { // Not triggered when swapping focus between children From 36742764266d98155d09f170f34ef0791542e05a Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Fri, 23 Oct 2020 22:53:56 +0100 Subject: [PATCH 9/9] Update reference-events.md --- content/docs/reference-events.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/content/docs/reference-events.md b/content/docs/reference-events.md index faeb5cb91e6..728716b10bd 100644 --- a/content/docs/reference-events.md +++ b/content/docs/reference-events.md @@ -165,6 +165,12 @@ onFocus onBlur These focus events work on all elements in the React DOM, not just form elements. +Properties: + +```js +DOMEventTarget relatedTarget +``` + #### onFocus The `onFocus` event is called when the element (or some element inside of it) receives focus. For example, it's called when the user clicks on a text input.