diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js index dea27caa36049..abf99ca987f0b 100644 --- a/packages/block-library/src/table/edit.js +++ b/packages/block-library/src/table/edit.js @@ -6,7 +6,7 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { useEffect, useState } from '@wordpress/element'; +import { useEffect, useRef, useState } from '@wordpress/element'; import { InspectorControls, BlockControls, @@ -105,6 +105,9 @@ function TableEdit( { const colorProps = useColorProps( attributes ); const borderProps = useBorderProps( attributes ); + const tableRef = useRef(); + const [ hasTableCreated, setHasTableCreated ] = useState( false ); + /** * Updates the initial column count used for table creation. * @@ -137,6 +140,7 @@ function TableEdit( { columnCount: parseInt( initialColumnCount, 10 ) || 2, } ) ); + setHasTableCreated( true ); } /** @@ -341,6 +345,15 @@ function TableEdit( { } }, [ isSelected ] ); + useEffect( () => { + if ( hasTableCreated ) { + tableRef?.current + ?.querySelector( 'td[contentEditable="true"]' ) + ?.focus(); + setHasTableCreated( false ); + } + }, [ hasTableCreated ] ); + const sections = [ 'head', 'body', 'foot' ].filter( ( name ) => ! isEmptyTableSection( attributes[ name ] ) ); @@ -426,7 +439,7 @@ function TableEdit( { const isEmpty = ! sections.length; return ( -
+
{ ! isEmpty && ( <> diff --git a/packages/e2e-tests/specs/editor/blocks/table.test.js b/packages/e2e-tests/specs/editor/blocks/table.test.js index 7afb8c9cfbbba..bc9d806a39cc2 100644 --- a/packages/e2e-tests/specs/editor/blocks/table.test.js +++ b/packages/e2e-tests/specs/editor/blocks/table.test.js @@ -269,7 +269,6 @@ describe( 'Table', () => { // Create the table. await clickButton( createButtonLabel ); - await page.keyboard.press( 'Tab' ); await page.keyboard.type( '1' ); await page.keyboard.press( 'ArrowDown' ); await page.keyboard.type( '2' ); @@ -280,4 +279,18 @@ describe( 'Table', () => { expect( await getEditedPostContent() ).toMatchSnapshot(); } ); + + it( 'should not have focus loss after creation', async () => { + // Insert table block. + await insertBlock( 'Table' ); + + // Create the table. + await clickButton( createButtonLabel ); + + // Focus should be in first td. + const isInTd = await page.waitForSelector( + 'td[contentEditable="true"]' + ); + await expect( isInTd ).toHaveFocus(); + } ); } ); diff --git a/packages/e2e-tests/specs/editor/various/writing-flow.test.js b/packages/e2e-tests/specs/editor/various/writing-flow.test.js index 1389d3bc770e1..9211d0e9bbf3b 100644 --- a/packages/e2e-tests/specs/editor/various/writing-flow.test.js +++ b/packages/e2e-tests/specs/editor/various/writing-flow.test.js @@ -678,27 +678,11 @@ describe( 'Writing Flow', () => { await page.keyboard.press( 'Tab' ); // Create the table. await page.keyboard.press( 'Space' ); - // Return focus after focus loss. This should be fixed. - await page.keyboard.press( 'Tab' ); // Navigate to the second cell. await page.keyboard.press( 'ArrowRight' ); await page.keyboard.type( '2' ); // Confirm correct setup. expect( await getEditedPostContent() ).toMatchSnapshot(); - // The content should only have one tab stop. - await page.keyboard.press( 'Tab' ); - expect( - await page.evaluate( () => - document.activeElement.getAttribute( 'aria-label' ) - ) - ).toBe( 'Post' ); - await pressKeyWithModifier( 'shift', 'Tab' ); - await pressKeyWithModifier( 'shift', 'Tab' ); - expect( - await page.evaluate( () => - document.activeElement.getAttribute( 'aria-label' ) - ) - ).toBe( 'Table' ); } ); it( 'Should unselect all blocks when hitting double escape', async () => {