diff --git a/packages/format-library/CHANGELOG.md b/packages/format-library/CHANGELOG.md index df1eeff7c6dbf6..ebe4074c8b5242 100644 --- 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 index c4b64e9e3c45ce..7a4384f987c67f 100644 --- 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={ () => (