WithFocusOutside
Edit
withFocusOutside
is a React higher-order component to enable behavior to occur when focus leaves an element. Since a blur
event will fire in React even when focus transitions to another element in the same context, this higher-order component encapsulates the logic necessary to determine if focus has truly left the element.
Usage
Wrap your original component with withFocusOutside
, defining a handleFocusOutside
instance method on the component class.
Note: withFocusOutside
must only be used to wrap the Component
class.
import { withFocusOutside, TextControl } from '@wordpress/components'; const MyComponentWithFocusOutside = withFocusOutside( class extends React.Component { handleFocusOutside() { console.log( 'Focus outside' ); } render() { return ( <div> <TextControl onChange={ ( ) => { } }/> <TextControl onChange={ ( ) => { } }/> </div> ); } } );
In the above example, the handleFocusOutside
function is only called if focus leaves the element, and not if transitioning focus between the two inputs.