Improvements to use-focus-first-element and utils (dom)

packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js

@@ -7,7 +7,12 @@ import { first, last } from 'lodash';
  * WordPress dependencies
  */
 import { useEffect, useRef } from '@wordpress/element';
-import { focus, isTextField, placeCaretAtHorizontalEdge } from '@wordpress/dom';
+import {
+	focus,
+	isFormElement,
+	isTextField,
+	placeCaretAtHorizontalEdge,
+} from '@wordpress/dom';
 import { useSelect } from '@wordpress/data';
 
 /**
@@ -52,16 +57,6 @@ function useInitialPosition( clientId ) {
 	);
 }
 
-function isFormElement( element ) {
-	const { tagName } = element;
-	return (
-		tagName === 'INPUT' ||
-		tagName === 'BUTTON' ||
-		tagName === 'SELECT' ||
-		tagName === 'TEXTAREA'
-	);
-}
-
 /**
  * Transitions focus to the block or inner tabbable when the block becomes
  * selected and an initial position is set.
@@ -107,17 +102,13 @@ export function useFocusFirstElement( clientId ) {
 		}
 
 		// Check to see if element is focussable before a generic caret insert.
-		if ( ! target.getAttribute( 'contenteditable' ) ) {
-			const focusElement = focus.tabbable.findNext( target );
-			// Make sure focusElement is valid, form field, and within the current target element.
-			// Ensure is not block inserter trigger, don't want to focus that in the event of the group block which doesn't contain any other focussable elements.
+		if ( ! ref.current.getAttribute( 'contenteditable' ) ) {
+			const focusElement = focus.tabbable.findNext( ref.current );
+			// Make sure focusElement is valid, contained in the same block, and a form field.
 			if (
 				focusElement &&
-				isFormElement( focusElement ) &&
-				target.contains( focusElement ) &&
-				! focusElement.classList.contains(
-					'block-editor-button-block-appender'
-				)
+				isInsideRootBlock( ref.current, focusElement ) &&
+				isFormElement( focusElement )
 			) {
 				focusElement.focus();
 				return;

packages/block-editor/src/components/writing-flow/use-tab-nav.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { focus } from '@wordpress/dom';
+import { focus, isFormElement } from '@wordpress/dom';
 import { TAB, ESCAPE } from '@wordpress/keycodes';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useRefEffect, useMergeRefs } from '@wordpress/compose';
@@ -12,16 +12,6 @@ import { useRef } from '@wordpress/element';
  */
 import { store as blockEditorStore } from '../../store';
 
-function isFormElement( element ) {
-	const { tagName } = element;
-	return (
-		tagName === 'INPUT' ||
-		tagName === 'BUTTON' ||
-		tagName === 'SELECT' ||
-		tagName === 'TEXTAREA'
-	);
-}
-
 export default function useTabNav() {
 	const container = useRef();
 	const focusCaptureBeforeRef = useRef();

packages/block-editor/src/utils/dom.js

@@ -1,5 +1,6 @@
 const BLOCK_SELECTOR = '.block-editor-block-list__block';
 const APPENDER_SELECTOR = '.block-list-appender';
+const BLOCK_APPENDER_CLASS = '.block-editor-button-block-appender';
 
 /**
  * Returns true if two elements are contained within the same block.
@@ -25,7 +26,7 @@ export function isInSameBlock( a, b ) {
  */
 export function isInsideRootBlock( blockElement, element ) {
 	const parentBlock = element.closest(
-		[ BLOCK_SELECTOR, APPENDER_SELECTOR ].join( ',' )
+		[ BLOCK_SELECTOR, APPENDER_SELECTOR, BLOCK_APPENDER_CLASS ].join( ',' )
 	);
 	return parentBlock === blockElement;
 }

packages/dom/README.md

@@ -184,6 +184,18 @@ _Returns_
 
 -   `boolean`: True if entirely selected, false if not.
 
+### isFormElement
+
+Detects if element is a form element.
+
+_Parameters_
+
+-   _element_ `Element`: The element to check.
+
+_Returns_
+
+-   `boolean`: True if form element and false otherwise.
+
 ### isHorizontalEdge
 
 Check whether the selection is horizontally at the edge of the container.

packages/dom/src/dom/index.js

@@ -6,6 +6,7 @@ export { default as getRectangleFromRange } from './get-rectangle-from-range';
 export { default as getScrollContainer } from './get-scroll-container';
 export { default as getOffsetParent } from './get-offset-parent';
 export { default as isEntirelySelected } from './is-entirely-selected';
+export { default as isFormElement } from './is-form-element';
 export { default as isHorizontalEdge } from './is-horizontal-edge';
 export { default as isNumberInput } from './is-number-input';
 export { default as isTextField } from './is-text-field';

packages/dom/src/dom/is-form-element.js

@@ -0,0 +1,20 @@
+/**
+ * Internal dependencies
+ */
+import isInputOrTextArea from './is-input-or-text-area';
+
+/**
+ *
+ * Detects if element is a form element.
+ *
+ * @param {Element} element The element to check.
+ *
+ * @return {boolean} True if form element and false otherwise.
+ */
+export default function isFormElement( element ) {
+	const { tagName } = element;
+	const checkForInputTextarea = isInputOrTextArea( element );
+	return (
+		checkForInputTextarea || tagName === 'BUTTON' || tagName === 'SELECT'
+	);
+}