[EuiDataGrid][CRA] Fix header cell focus when moving columns left/right

[JasonStoltz]

(Note: #7698 fixed the issue for Kibana, but the underlying issue still persists for CRA and likely CodeSandbox - potentially due to various prod vs dev bundled race conditions)

Before	After

Problem

We noticed that focus was not updating visually after moving columns left or right in certain environments in this PR: #7698.

If you initiate a "Move left" from column 4 -- you're essentially swapping columns. Column 4 becomes moves to position 3 and column 3 moves to position 4.

When you click on the header cell to initiate that action, the column 4 header cell gets focus. After column 4 moves to position 3, we make a call to the focus service to let it know that the column 3 header cell should now have focus.

Subsequently, that service makes a call to the column 3 header to set its isFocused property to true, to reflect that it's now focused. If that cell was not already focused, updating isFocused will also trigger a call to the underlying element's .focus() to focus it.

In this case, this particular column's isFocused property is already set to true, because it just moved from position 4 to 3. So when its isFocused property is updated, it detects that it already has focus, so it doesn't make a call to .focus() to focus it.

However, something happens in between there that forces the focus away in the browser (likely the focus trap associated with the action's menu in the header cell). So the header cell's isFocused prop is essentially out of sync with the browser. The cell thinks that it's already focused, even though it's not, so it simply loses focus.

Solution

This PR resolves that issue by calling .focus() anytime setFocus is set, anticipating that there may be cases when the browser gets out of sync with this property.

QA

• (In EUI) yarn build-pack
• (in CRA) npx create-react-app my-app
• Follow the getting started guide for installing EUI (but point to to the built tgz file instead of @elastic/eui
• Copy the first basic datagrid example here (any examples where columns can be moved left/right also suffice) into the app
• yarn start and confirm that clicking left/right in the CRA works as expected, instead of losing focus

General checklist

• Browser QA
  • Checked in Chrome, Safari, Edge, and Firefox
  • Checked for accessibility including keyboard-only and screenreader modes
    - [ ] Checked in both light and dark modes
    - [ ] Checked in mobile
• Docs site QA - N/A, bugfix
• Code quality checklist - N/A, appears to only affect production builds
• Release checklist - merging existing changelog
• Designer checklist - N/A

[cee-chen]

Going to skip the changelog on this and merge it with #7698's changelog!

[kibanamachine]

Preview staging links for this PR:

• Docs site: https://eui.elastic.co/pr_7701/
• Storybook: https://eui.elastic.co/pr_7701/storybook

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 0828ade

History

• 💔 Build #1809 failed 5a979b0

[cee-chen]

Thanks again for catching this Jason!