[EuiModal] Permanently fix EuiModal to scroll-jumping issues, remove temporary workaround#6360
Conversation
7613ee0 to
8facecf
Compare
EuiModal to scroll-jumping issues, remove temporary workaround
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_6360/ |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_6360/ |
breehall
left a comment
There was a problem hiding this comment.
This looks good! I was able to confirm by testing code changes before running yarn to install packages. By doing this, I was able to see the page moving when opening the modal. After updating the packages, I confirmed locally that the behavior is resolved. Also confirmed in the PR preview that the scroll jumping is gone.
| return ( | ||
| <EuiOverlayMask> | ||
| <EuiFocusTrap initialFocus={initialFocus} scrollLock> | ||
| <EuiFocusTrap initialFocus={initialFocus} scrollLock preventScrollOnFocus> |
chandlerprall
left a comment
There was a problem hiding this comment.
We'll want to remember to bump Kibana's version of react-focus-on to 3.7 when we update (they're on 3.6 right now)
chandlerprall
left a comment
There was a problem hiding this comment.
Changes LGTM, tested modals in multiple pages/examples in the pr preview and everything work as expected.
Great call! I think @1Copenut is up next on the Kibana upgrade, so pinging him as an FYI for the next one |
`eui@70.2.4` ⏩ `eui@70.4.0` - "Fixed EuiButtonGroup firing onChange twice" required changing some tests from `click` to `change` ___ ## [`70.4.0`](https://github.com/elastic/eui/tree/v70.4.0) - Updated `EuiTourStep.footerAction` type to accept `ReactNode[]` ([#6384](elastic/eui#6384)) - Vertically aligned all footer content so that `euiTourStepIndicator` is always centered ([#6384](elastic/eui#6384)) - Added `filterInCircle` glyph to `EuiIcon` ([#6385](elastic/eui#6385)) - Added `color` prop to `EuiBeacon` ([#6420](elastic/eui#6420)) - Added the `euiMaxBreakpoint` and `euiMinBreakpoint` CSS-in-JS utilities for creating min/max-width media queries ([#6431](elastic/eui#6431)) **Bug fixes** - Restores the previous match operator behaviour when the query value is split into multiple terms after analysis. ([#6409](elastic/eui#6409)) - Fixed missing slide-in animation on `EuiCollapsibleNav`s and left-side `EuiFlyout`s ([#6422](elastic/eui#6422)) - Fix bug in `EuiCard` where footer were not aligned to the bottom of the card ([#6424](elastic/eui#6424)) - Fixed multiple component media queries for consumers with custom theme breakpoints ([#6431](elastic/eui#6431)) ## [`70.3.0`](https://github.com/elastic/eui/tree/v70.3.0) - `EuiSearchBar` now automatically wraps special characters not used by query syntax in quotes ([#6356](elastic/eui#6356)) - Added `alignment` prop to `EuiBetaBadge` ([#6361](elastic/eui#6361)) - `EuiButton` now accepts `minWidth={false}` ([#6373](elastic/eui#6373)) **Bug fixes** - Fixed `EuiPageTemplate` not correctly passing the `component` prop to the inner main content wrapper. ([#6352](elastic/eui#6352)) - `EuiSkipLink` now correctly calls `onClick` even when `fallbackDestination` is invalid ([#6355](elastic/eui#6355)) - Permanently fixed `EuiModal` to not cause scroll-jumping issues on modal open ([#6360](elastic/eui#6360)) - Re-fixed `EuiPageSection` not correctly merging `contentProps.css` ([#6365](elastic/eui#6365)) - Fixed `EuiTab` not defaulting to size `m` ([#6366](elastic/eui#6366)) - Fixed the shadow sizes of `.eui-yScrollWithShadows` and `.eui-xScrollWithShadows` ([#6374](elastic/eui#6374)) - Fixed bug in `EuiCard` where the inner content in vertical cards was not growing 100% in width ([#6377](elastic/eui#6377)) - Fixed incorrect margins in `EuiSuperDatePicker` caused by `EuiFlex` CSS gap change ([#6380](elastic/eui#6380)) - Fixed visual bug in nested `EuiFlexGroup`s, where the parent `EuiFlexGroup` is responsive but a child `EuiFlexGroup` is not ([#6381](elastic/eui#6381)) **CSS-in-JS conversions** - Converted `EuiModal` to Emotion ([#6321](elastic/eui#6321)) **Fixes** - `EuiButton` no longer outputs unnecessary inline styles for `minWidth={0}` or `minWidth={false}` ([#6373](elastic/eui#6373)) - `EuiFacetButton` no longer reports type issues when passing props accepted by `EuiButton` ([#6373](elastic/eui#6373)) Co-authored-by: Constance Chen <constance.chen@elastic.co>
Summary
Now that theKashey/react-focus-on#63 has been merged in, we can use
react-focus-on's newpreventScrollOnFocusprop to... prevent scrolling on focus.QA
General checklist