cloudscape-design / components

React components for Cloudscape Design System
https://cloudscape.design/
Apache License 2.0
2.3k stars 140 forks source link

fix: Fix table grid navigation for React 18 #2311

Closed pan-kot closed 1 month ago

pan-kot commented 1 month ago

Description

In a recent bugfix (https://github.com/cloudscape-design/components/pull/2294) to table keyboard navigation for Firefox and Safari the focus lost detection transitioned from listening to focusout event to monitoring focusable element unmounts. That introduced problems in React 18 because there the unmount events come after the focus transition occurred so the check nodeBelongs(focusable, document.activeElement) no longer works. This is fixed by updating the single tab stop navigation context subscription to use layout effect instead of effect.

How has this been tested?

Review checklist _The following items are to be evaluated by the author(s) and the reviewer(s)._ #### Correctness - _Changes include appropriate documentation updates._ - _Changes are backward-compatible if not indicated, see [`CONTRIBUTING.md`](https://github.com/cloudscape-design/components/blob/main/CONTRIBUTING.md#public-apis)._ - _Changes do not include unsupported browser features, see [`CONTRIBUTING.md`](https://github.com/cloudscape-design/components/blob/main/CONTRIBUTING.md#browsers-support)._ - _Changes were manually tested for accessibility, see [accessibility guidelines](https://cloudscape.design/foundation/core-principles/accessibility/)._ #### Security - _If the code handles URLs: all URLs are validated through [the `checkSafeUrl` function](https://github.com/cloudscape-design/components/blob/main/src/internal/utils/check-safe-url.ts)._ #### Testing - _Changes are covered with new/existing unit tests?_ - _Changes are covered with new/existing integration tests?_

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

codecov[bot] commented 1 month ago

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 95.46%. Comparing base (2e52856) to head (8ce6e71).

Additional details and impacted files ```diff @@ Coverage Diff @@ ## main #2311 +/- ## ======================================== Coverage 95.46% 95.46% ======================================== Files 705 705 Lines 18780 18780 Branches 6300 5971 -329 ======================================== Hits 17929 17929 - Misses 797 843 +46 + Partials 54 8 -46 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.