Fix table block cell selection (#16653)

* Forward focus to child RichText when a table cell is selected

* Add e2e tests

* Update e2e test to ensure cell is clicked instead of the rich text

packages/block-library/src/table/edit.js

@@ -446,22 +446,30 @@ export class TableEdit extends Component {
  rowIndex,
  columnIndex,
  };
-
  const isSelected = isCellSelected( cellLocation, selectedCell );
 
  const cellClasses = classnames( {
  'is-selected': isSelected,
  [ `has-text-align-${ align }` ]: align,
  } );
+ const richTextClassName = 'wp-block-table__cell-content';
 
  return (
  <CellTag
  key={ columnIndex }
  className={ cellClasses }
  scope={ CellTag === 'th' ? scope : undefined }
+ onClick={ ( event ) => {
+ // When a cell is selected, forward focus to the child RichText. This solves an issue where the
+ // user may click inside a cell, but outside of the RichText, resulting in nothing happening.
+ const richTextElement = event && event.target && event.target.querySelector( `.${ richTextClassName }` );
+ if ( richTextElement ) {
+ richTextElement.focus();
+ }
+ } }
  >
  <RichText
- className="wp-block-table__cell-content"
+ className={ richTextClassName }
  value={ content }
  onChange={ this.onChange }
  unstableOnFocus={ this.createOnFocus( cellLocation ) }

packages/e2e-tests/specs/blocks/__snapshots__/table.test.js.snap

@@ -12,6 +12,12 @@ exports[`Table allows adding and deleting columns across the table header, body
 <!-- /wp:table -->"
 `;
 
+exports[`Table allows cells to be selected when the cell area outside of the RichText is clicked 1`] = `
+"<!-- wp:table {\\"hasFixedLayout\\":true} -->
+<figure class=\\"wp-block-table\\"><table class=\\"has-fixed-layout\\"><tbody><tr><td>Some long text that will wrap onto multiple lines.</td><td>This content is in the second cell.</td></tr><tr><td></td><td></td></tr></tbody></table></figure>
+<!-- /wp:table -->"
+`;
+
 exports[`Table allows columns to be aligned 1`] = `
 "<!-- wp:table -->
 <figure class=\\"wp-block-table\\"><table class=\\"\\"><tbody><tr><td>None</td><td class=\\"has-text-align-left\\" data-align=\\"left\\">To the left</td><td class=\\"has-text-align-center\\" data-align=\\"center\\">Centered</td><td class=\\"has-text-align-right\\" data-align=\\"right\\">Right aligned</td></tr><tr><td></td><td class=\\"has-text-align-left\\" data-align=\\"left\\"></td><td class=\\"has-text-align-center\\" data-align=\\"center\\"></td><td class=\\"has-text-align-right\\" data-align=\\"right\\"></td></tr></tbody></table></figure>

packages/e2e-tests/specs/blocks/table.test.js

@@ -203,7 +203,43 @@ describe( 'Table', () => {
  await page.keyboard.type( 'Right aligned' );
  await changeCellAlignment( 'right' );
 
- // Expect the post to have the correct written content inside the table.
+ // Expect the post to have the correct alignment classes inside the table.
+ expect( await getEditedPostContent() ).toMatchSnapshot();
+ } );
+
+ // Testing for regressions of https://github.com/WordPress/gutenberg/issues/14904.
+ it( 'allows cells to be selected when the cell area outside of the RichText is clicked', async () => {
+ await insertBlock( 'Table' );
+
+ // Create the table.
+ const createButton = await page.$x( createButtonSelector );
+ await createButton[ 0 ].click();
+
+ // Enable fixed width as it exascerbates the amount of empty space around the RichText.
+ const fixedWidthSwitch = await page.$x( "//label[text()='Fixed width table cells']" );
+ await fixedWidthSwitch[ 0 ].click();
+
+ // Add lots of text to the first cell.
+ await page.click( '.wp-block-table__cell-content' );
+ await page.keyboard.type(
+ `Some long text that will wrap onto multiple lines.`
+ );
+
+ // Get the bounding client rect for the second cell.
+ const { x: secondCellX, y: secondCellY } = await page.evaluate( () => {
+ const secondCell = document.querySelectorAll( '.wp-block-table td' )[ 1 ];
+ // Page.evaluate can only return a non-serializable value to the
+ // parent process, so destructure and restructure the result
+ // into an object.
+ const { x, y } = secondCell.getBoundingClientRect();
+ return { x, y };
+ } );
+
+ // Click in the top left corner of the second cell and type some text.
+ await page.mouse.click( secondCellX, secondCellY );
+ await page.keyboard.type( 'This content is in the second cell.' );
+
+ // Expect that the snapshot shows the text in the second cell.
  expect( await getEditedPostContent() ).toMatchSnapshot();
  } );
 } );