63 lines
1.5 KiB
JavaScript
63 lines
1.5 KiB
JavaScript
|
/**
|
||
|
|
* This hook was directly copied from https://github.com/WordPress/gutenberg/blob/master/packages/compose/src/hooks/use-focus-on-mount/index.js
|
||
|
|
* to avoid its absence in older versions of WordPress.
|
||
|
|
*
|
||
|
|
* This can be removed once the minimum supported version of WordPress includes this hook.
|
||
|
|
*/
|
||
|
|
|
||
|
|
/**
|
||
|
|
* External dependencies
|
||
|
|
*/
|
||
|
|
import { useRef, useEffect, useCallback } from '@wordpress/element';
|
||
|
|
import { focus } from '@wordpress/dom';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Hook used to focus the first tabbable element on mount.
|
||
|
|
*
|
||
|
|
* @param {boolean|string} focusOnMount Focus on mount mode.
|
||
|
|
* @return {Function} Ref callback.
|
||
|
|
*
|
||
|
|
* @example
|
||
|
|
* ```js
|
||
|
|
* import { useFocusOnMount } from '@wordpress/compose';
|
||
|
|
*
|
||
|
|
* const WithFocusOnMount = () => {
|
||
|
|
* const ref = useFocusOnMount()
|
||
|
|
* return (
|
||
|
|
* <div ref={ ref }>
|
||
|
|
* <Button />
|
||
|
|
* <Button />
|
||
|
|
* </div>
|
||
|
|
* );
|
||
|
|
* }
|
||
|
|
* ```
|
||
|
|
*/
|
||
|
|
export default function useFocusOnMount( focusOnMount = 'firstElement' ) {
|
||
|
|
const focusOnMountRef = useRef( focusOnMount );
|
||
|
|
useEffect( () => {
|
||
|
|
focusOnMountRef.current = focusOnMount;
|
||
|
|
}, [ focusOnMount ] );
|
||
|
|
|
||
|
|
return useCallback( ( node ) => {
|
||
|
|
if ( ! node || focusOnMountRef.current === false ) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if ( node.contains( node.ownerDocument.activeElement ) ) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
let target = node;
|
||
|
|
|
||
|
|
if ( focusOnMountRef.current === 'firstElement' ) {
|
||
|
|
const firstTabbable = focus.tabbable.find( node )[ 0 ];
|
||
|
|
|
||
|
|
if ( firstTabbable ) {
|
||
|
|
target = firstTabbable;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
target.focus();
|
||
|
|
}, [] );
|
||
|
|
}
|