From d29d9381fe31366d6edbd6795e91b93e9fcc3f19 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 11 Jan 2022 11:59:59 -0800 Subject: [PATCH] [#4923] Fix focus returning to document body when hiding a column via header --- .../datagrid/body/header/column_actions.test.tsx | 5 ++++- .../datagrid/body/header/column_actions.tsx | 15 +++++++++++++-- .../body/header/data_grid_header_cell.tsx | 4 ++++ src/components/datagrid/data_grid_types.ts | 1 + .../datagrid/utils/__mocks__/focus_context.ts | 1 + src/components/datagrid/utils/focus.ts | 2 ++ 6 files changed, 25 insertions(+), 3 deletions(-) diff --git a/src/components/datagrid/body/header/column_actions.test.tsx b/src/components/datagrid/body/header/column_actions.test.tsx index 1a0d6e740d9..058353544bb 100644 --- a/src/components/datagrid/body/header/column_actions.test.tsx +++ b/src/components/datagrid/body/header/column_actions.test.tsx @@ -19,6 +19,7 @@ import { describe('getColumnActions', () => { const setVisibleColumns = jest.fn(); + const focusFirstVisibleInteractiveCell = jest.fn(); const setIsPopoverOpen = jest.fn(); const switchColumnPos = jest.fn(); @@ -28,6 +29,7 @@ describe('getColumnActions', () => { schema: {}, schemaDetectors, setVisibleColumns, + focusFirstVisibleInteractiveCell, setIsPopoverOpen, sorting: undefined, switchColumnPos, @@ -104,9 +106,10 @@ describe('getColumnActions', () => { `); }); - it('sets column visibility on click', () => { + it('hides the current column on click and refocuses into the grid', () => { callActionOnClick(hideColumn); expect(setVisibleColumns).toHaveBeenCalledWith(['A', 'C']); + expect(focusFirstVisibleInteractiveCell).toHaveBeenCalled(); }); }); diff --git a/src/components/datagrid/body/header/column_actions.tsx b/src/components/datagrid/body/header/column_actions.tsx index fcfc8601bc0..2a557bdcd0a 100644 --- a/src/components/datagrid/body/header/column_actions.tsx +++ b/src/components/datagrid/body/header/column_actions.tsx @@ -13,6 +13,7 @@ import { EuiDataGridSchema, EuiDataGridSchemaDetector, EuiDataGridSorting, + DataGridFocusContextShape, } from '../../data_grid_types'; import { EuiI18n } from '../../../i18n'; import { EuiListGroupItemProps } from '../../../list_group'; @@ -28,6 +29,7 @@ interface GetColumnActions { schema: EuiDataGridSchema; schemaDetectors: EuiDataGridSchemaDetector[]; setVisibleColumns: (columnId: string[]) => void; + focusFirstVisibleInteractiveCell: DataGridFocusContextShape['focusFirstVisibleInteractiveCell']; setIsPopoverOpen: (value: boolean) => void; sorting: EuiDataGridSorting | undefined; switchColumnPos: (colFromId: string, colToId: string) => void; @@ -39,6 +41,7 @@ export const getColumnActions = ({ schema, schemaDetectors, setVisibleColumns, + focusFirstVisibleInteractiveCell, setIsPopoverOpen, sorting, switchColumnPos, @@ -52,6 +55,7 @@ export const getColumnActions = ({ column, columns, setVisibleColumns, + focusFirstVisibleInteractiveCell, }), ...getSortColumnActions({ column, @@ -85,20 +89,27 @@ export const getColumnActions = ({ */ type HideColumnAction = Pick< GetColumnActions, - 'column' | 'columns' | 'setVisibleColumns' + | 'column' + | 'columns' + | 'setVisibleColumns' + | 'focusFirstVisibleInteractiveCell' >; export const getHideColumnAction = ({ column, columns, setVisibleColumns, + focusFirstVisibleInteractiveCell, }: HideColumnAction): EuiListGroupItemProps[] => { const items = []; - const onClickHideColumn = () => + const onClickHideColumn = () => { setVisibleColumns( columns.filter((col) => col.id !== column.id).map((col) => col.id) ); + // Since we hid the current column, we need to manually set focus back onto the grid + focusFirstVisibleInteractiveCell(); + }; const action = { label: ( diff --git a/src/components/datagrid/body/header/data_grid_header_cell.tsx b/src/components/datagrid/body/header/data_grid_header_cell.tsx index 5c9f937ad6a..d7cbb919618 100644 --- a/src/components/datagrid/body/header/data_grid_header_cell.tsx +++ b/src/components/datagrid/body/header/data_grid_header_cell.tsx @@ -21,6 +21,7 @@ import { EuiIcon } from '../../../icon'; import { EuiListGroup } from '../../../list_group'; import { EuiPopover } from '../../../popover'; import { DataGridSortingContext } from '../../utils/sorting'; +import { DataGridFocusContext } from '../../utils/focus'; import { EuiDataGridHeaderCellProps } from '../../data_grid_types'; import { getColumnActions } from './column_actions'; @@ -58,6 +59,8 @@ export const EuiDataGridHeaderCell: FunctionComponent () => void; + focusFirstVisibleInteractiveCell: () => void; } export type CommonGridProps = CommonProps & diff --git a/src/components/datagrid/utils/__mocks__/focus_context.ts b/src/components/datagrid/utils/__mocks__/focus_context.ts index 41783a079f1..65b682a18bd 100644 --- a/src/components/datagrid/utils/__mocks__/focus_context.ts +++ b/src/components/datagrid/utils/__mocks__/focus_context.ts @@ -11,4 +11,5 @@ export const mockFocusContext = { onFocusUpdate: jest.fn(), setFocusedCell: jest.fn(), setIsFocusedCellInView: jest.fn(), + focusFirstVisibleInteractiveCell: jest.fn(), }; diff --git a/src/components/datagrid/utils/focus.ts b/src/components/datagrid/utils/focus.ts index d570b5679a1..c204525e1c8 100644 --- a/src/components/datagrid/utils/focus.ts +++ b/src/components/datagrid/utils/focus.ts @@ -32,6 +32,7 @@ export const DataGridFocusContext = createContext({ setFocusedCell: () => {}, setIsFocusedCellInView: () => {}, onFocusUpdate: () => () => {}, + focusFirstVisibleInteractiveCell: () => {}, }); type FocusProps = Pick, 'tabIndex' | 'onFocus'>; @@ -127,6 +128,7 @@ export const useFocus = ({ focusedCell, setFocusedCell, setIsFocusedCellInView, + focusFirstVisibleInteractiveCell, focusProps, }; };