Skip to content

Patch for Chrome 105 bug concerning sticky positioning

Danni edited this page Sep 10, 2022 · 16 revisions

The latest release of Chrome (105 and above) contains a bug that causes the page to crash when using sticky positioning. This affects React Spectrum TableView with checkbox selection and scrolling. React Spectrum has released a patch to temporarily remove the sticky positioning from TableView in affected versions of Chrome. Once Chrome releases a fix, we will re-instate sticky positioning. ** Please note this only affects TableViews with selection enabled.

Options for teams to fix:

Upgrade React Spectrum:

Upgrade to @adobe/react-spectrum@3.21.2 to pull the temporary fix which disables the sticky positioning for Chrome v105 only.

Using resolutions (yarn)/overrides (npm):

If you cannot update all React Spectrum components, you can update just TableView using package manager resolutions/overrides.

"resolutions": { "@react-spectrum/table": "3.3.2" }

or

"overrides": { "@react-spectrum/table": "3.3.2", "@react-stately/layout": "3.7.1" }

Using patch-package:

Turn off sticky positioning for all browsers (easiest)

  1. Run yarn add patch-package –dev
  2. Edit node_modules/@react-stately/layout/dist/module.js
  3. Find instances of isSticky = and comment out.
  4. Run yarn patch-package @react-stately/layout

Turn off sticky positioning for Chrome v105+ only Please refer to our PR for the code changes needed.

Clone this wiki locally