Format Library: Refactor inline link to use onFocusOutside

WordPress · May 22, 2019 · 6419f0d · 6419f0d
1 parent 36416be
commit 6419f0d
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/packages/format-library/CHANGELOG.md b/packages/format-library/CHANGELOG.md
@@ -1,3 +1,9 @@
+## Unreleased
+
+### Internal
+
+- The inline link component has been refactored to focus changes using the `Popover` component's `onFocusOutside` prop.
+
 ## 1.2.10 (2019-01-03)
 
 ## 1.2.9 (2018-12-18)

diff --git a/packages/format-library/src/link/inline.js b/packages/format-library/src/link/inline.js
@@ -135,7 +135,7 @@ class InlineLinkUI extends Component {
 		this.onKeyDown = this.onKeyDown.bind( this );
 		this.onChangeInputValue = this.onChangeInputValue.bind( this );
 		this.setLinkTarget = this.setLinkTarget.bind( this );
-		this.onClickOutside = this.onClickOutside.bind( this );
+		this.onFocusOutside = this.onFocusOutside.bind( this );
 		this.resetState = this.resetState.bind( this );
 		this.autocompleteRef = createRef();
 
@@ -226,13 +226,13 @@ class InlineLinkUI extends Component {
 		}
 	}
 
-	onClickOutside( event ) {
+	onFocusOutside() {
 		// The autocomplete suggestions list renders in a separate popover (in a portal),
-		// so onClickOutside fails to detect that a click on a suggestion occurred in the
+		// so onFocusOutside fails to detect that a click on a suggestion occurred in the
 		// LinkContainer. Detect clicks on autocomplete suggestions using a ref here, and
 		// return to avoid the popover being closed.
 		const autocompleteElement = this.autocompleteRef.current;
-		if ( autocompleteElement && autocompleteElement.contains( event.target ) ) {
+		if ( autocompleteElement && autocompleteElement.contains( document.activeElement ) ) {
 			return;
 		}
 
@@ -259,7 +259,7 @@ class InlineLinkUI extends Component {
 				value={ value }
 				isActive={ isActive }
 				addingLink={ addingLink }
-				onClickOutside={ this.onClickOutside }
+				onFocusOutside={ this.onFocusOutside }
 				onClose={ this.resetState }
 				focusOnMount={ showInput ? 'firstElement' : false }
 				renderSettings={ () => (