Set focus back to rich text after mere button click

WordPress · Sep 27, 2019 · 9de7520 · 9de7520
1 parent 032d0dd
commit 9de7520
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 6 deletions.
diff --git a/packages/block-editor/src/components/rich-text/toolbar-button.js b/packages/block-editor/src/components/rich-text/toolbar-button.js
@@ -3,8 +3,17 @@
  */
 import { Fill, ToolbarButton } from '@wordpress/components';
 import { displayShortcut } from '@wordpress/keycodes';
+import { useRef } from '@wordpress/element';
+
+export function RichTextToolbarButton( {
+	name,
+	shortcutType,
+	shortcutCharacter,
+	onClick,
+	...props
+} ) {
+	const activeElement = useRef( null );
 
-export function RichTextToolbarButton( { name, shortcutType, shortcutCharacter, ...props } ) {
 	let shortcut;
 	let fillName = 'RichText.ToolbarControls';
 
@@ -21,6 +30,19 @@ export function RichTextToolbarButton( { name, shortcutType, shortcutCharacter,
 			<ToolbarButton
 				{ ...props }
 				shortcut={ shortcut }
+				extraProps={ {
+					onMouseDown: () => {
+						activeElement.current = document.activeElement;
+					},
+				} }
+				onClick={ () => {
+					onClick( ...arguments );
+
+					if ( activeElement.current ) {
+						activeElement.current.focus();
+						activeElement.current = null;
+					}
+				} }
 			/>
 		</Fill>
 	);

diff --git a/packages/e2e-tests/specs/__snapshots__/rich-text.test.js.snap b/packages/e2e-tests/specs/__snapshots__/rich-text.test.js.snap
@@ -48,6 +48,12 @@ exports[`RichText should not lose selection direction 1`] = `
 <!-- /wp:paragraph -->"
 `;
 
+exports[`RichText should not return focus when tabbing to formatting button 1`] = `
+"<!-- wp:paragraph -->
+<p>Some <strong>bold</strong>.</p>
+<!-- /wp:paragraph -->"
+`;
+
 exports[`RichText should not undo backtick transform with backspace after selection change 1`] = `""`;
 
 exports[`RichText should not undo backtick transform with backspace after typing 1`] = `""`;
@@ -76,14 +82,14 @@ exports[`RichText should transform backtick to code 2`] = `
 <!-- /wp:paragraph -->"
 `;
 
-exports[`RichText should update internal selection after fresh focus 1`] = `
+exports[`RichText should undo backtick transform with backspace 1`] = `
 "<!-- wp:paragraph -->
-<p>1<strong>2</strong></p>
+<p>\`a\`</p>
 <!-- /wp:paragraph -->"
 `;
 
-exports[`RichText should undo backtick transform with backspace 1`] = `
+exports[`RichText should update internal selection after fresh focus 1`] = `
 "<!-- wp:paragraph -->
-<p>\`a\`</p>
+<p>1<strong>2</strong></p>
 <!-- /wp:paragraph -->"
 `;
diff --git a/packages/e2e-tests/specs/rich-text.test.js b/packages/e2e-tests/specs/rich-text.test.js
@@ -84,11 +84,33 @@ describe( 'RichText', () => {
 		await page.mouse.move( 0, 0 );
 		await page.mouse.move( 10, 10 );
 		await page.click( '[aria-label="Bold"]' );
-		await pressKeyTimes( 'Tab', 5 );
 		await page.keyboard.type( 'bold' );
 		await page.mouse.move( 0, 0 );
 		await page.mouse.move( 10, 10 );
 		await page.click( '[aria-label="Bold"]' );
+		await page.keyboard.type( '.' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+
+	it( 'should not return focus when tabbing to formatting button', async () => {
+		await clickBlockAppender();
+		await page.keyboard.type( 'Some ' );
+		await pressKeyWithModifier( 'alt', 'F10' );
+		// Wait for button to receive focus.
+		await page.waitForFunction( () =>
+			document.activeElement.nodeName === 'BUTTON'
+		);
+		await pressKeyTimes( 'Tab', 2 );
+		await page.keyboard.press( 'Space' );
+		await pressKeyTimes( 'Tab', 5 );
+		await page.keyboard.type( 'bold' );
+		await pressKeyWithModifier( 'alt', 'F10' );
+		await page.waitForFunction( () =>
+			document.activeElement.nodeName === 'BUTTON'
+		);
+		await pressKeyTimes( 'Tab', 2 );
+		await page.keyboard.press( 'Space' );
 		await pressKeyTimes( 'Tab', 5 );
 		await page.keyboard.type( '.' );
 

diff --git a/packages/rich-text/src/component/index.js b/packages/rich-text/src/component/index.js
@@ -526,6 +526,8 @@ class RichText extends Component {
 	 * @param {Object}  $2                Named options.
 	 * @param {boolean} $2.withoutHistory If true, no undo level will be
 	 *                                    created.
+	 * @param {boolean} $2.focus          If true, the rich text element will
+	 *                                    receive focus.
 	 */
 	onChange( record, { withoutHistory, focus } = {} ) {
 		if ( focus ) {