Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[EuiFlyout] Memoize various internals to reduce rerenders #7259

Merged
merged 5 commits into from
Oct 6, 2023

Conversation

cee-chen
Copy link
Member

@cee-chen cee-chen commented Oct 6, 2023

Summary

The first commit is the primary one needed to resolve elastic/kibana#168164, the other following commits are just extra nice-to-haves.

Here's what I think is happening: the unmemoized focusTrapProps is causing <EuiFocusTrap> the underlying focus trap library to re-mount fully when it shouldn't, which then causes the focus issues because the focus trap will auto-focus the flyout wrapper on mount.

The remount is occurring because Security's flyouts are wrapped in a <Formik> lib that, on validation, cascades the state update down to the wrapped EuiFlyout and rerenders it.

QA

Fix testing

  • Go to https://cee-chen-branch-main.kbndev.co/app/management/security/api_keys
  • Log in with dev/local elastic credentials
  • Click the "Create API key" button
  • Once the flyout opens, click into the Name field and then press the tab key
  • Confirm an invalid error shows up
  • Confirm that you can continue to tab past the Name field and through the rest of the flyout, but that focus correctly traps and cycles back to the fixed headers and then back into the flyout

screencap_fix

Regression testing

General checklist

  • Browser QA - N/A, above QA should be sufficient
  • Docs site QA - N/A
  • Code quality checklist - N/A, should be sufficient for regressions if existing tests pass
  • Release checklist
    • A changelog entry exists and is marked appropriately.
      - [ ] If applicable, added the breaking change issue label (and filled out the breaking change checklist)
  • Designer checklist - N/A

@cee-chen cee-chen marked this pull request as ready for review October 6, 2023 18:12
@cee-chen cee-chen requested a review from a team as a code owner October 6, 2023 18:12
@cee-chen cee-chen requested a review from 1Copenut October 6, 2023 18:20
@kibanamachine
Copy link

Preview staging links for this PR:

@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

Copy link
Contributor

@1Copenut 1Copenut left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did a quick keyboard and mouse QA on the four evergreen browsers. All flyouts were behaving as in production, saw no regressions.

@cee-chen
Copy link
Member Author

cee-chen commented Oct 6, 2023

Thanks Trevor!

@SiddharthMantri - this will be be in EUI's Monday release, and should reach Kibana main sometime by end of next week (fingers crossed).

@cee-chen cee-chen merged commit dfe2da8 into elastic:main Oct 6, 2023
8 checks passed
@cee-chen cee-chen deleted the flyout-memoization branch October 6, 2023 19:43
1Copenut pushed a commit to elastic/kibana that referenced this pull request Oct 11, 2023
`v88.5.4`⏩`v89.0.0`

---

## [`89.0.0`](https://github.com/elastic/eui/tree/v89.0.0)

- Added new `pushAnimation` prop to push `EuiFlyout`s, which enables a
slide in animation ([#7239](elastic/eui#7239))
- Updated `EuiComboBox` to use `EuiInputPopover` under the hood
([#7246](elastic/eui#7246))
- Added `inputPopoverProps` to `EuiComboBox`, which allows customizing
the underlying popover
([#7246](elastic/eui#7246))
- Added a new beta `EuiTextBlockTruncate` component for multi-line
truncation ([#7250](elastic/eui#7250))
- Updated `EuiBasicTable` and `EuiInMemoryTable` to support multi-line
truncation. This can be set via `truncateText.lines` in the `columns`
prop. ([#7254](elastic/eui#7254))

**Bug fixes**

- Fixed `EuiFlexGroup` and `EuiFlexGrid`'s `m` gutter size
([#7251](elastic/eui#7251))
- Fixed focus trap rerender issues in `EuiFlyout` with memoization
([#7259](elastic/eui#7259))
- Fixed a visual bug with `EuiContextMenu`'s animation between panels
([#7268](elastic/eui#7268))

**Breaking changes**

- EUI's global body font-size now respects the `font.defaultUnits`
token. This means that the global font size will use the `rem` unit by
default, instead of `px`.
([#7182](elastic/eui#7182))
- Removed exported `accessibleClickKeys`, `comboBoxKeys`, and
`cascadingMenuKeys` services. Use the generic `keys` service instead
([#7256](elastic/eui#7256))
- Removed `EuiColorStops` due to low usage
([#7262](elastic/eui#7262))
- Removed `EuiSuggest`. We recommend using `EuiSelectable` or
`EuiComboBox` instead
([#7263](elastic/eui#7263))
- Removed `euiHeaderAffordForFixed` Sass mixin, and `$euiHeaderHeight`
and `$euiHeaderHeightCompensation` Sass variables. Use the CSS variable
`--var(euiFixedHeadersOffset, 0)` instead.
([#7264](elastic/eui#7264))

**Accessibility**

- When using `rem` or `em` font units, EUI now respects, instead of
ignoring, browser default font sizes set by end users.
([#7182](elastic/eui#7182))
dej611 pushed a commit to dej611/kibana that referenced this pull request Oct 17, 2023
`v88.5.4`⏩`v89.0.0`

---

## [`89.0.0`](https://github.com/elastic/eui/tree/v89.0.0)

- Added new `pushAnimation` prop to push `EuiFlyout`s, which enables a
slide in animation ([elastic#7239](elastic/eui#7239))
- Updated `EuiComboBox` to use `EuiInputPopover` under the hood
([elastic#7246](elastic/eui#7246))
- Added `inputPopoverProps` to `EuiComboBox`, which allows customizing
the underlying popover
([elastic#7246](elastic/eui#7246))
- Added a new beta `EuiTextBlockTruncate` component for multi-line
truncation ([elastic#7250](elastic/eui#7250))
- Updated `EuiBasicTable` and `EuiInMemoryTable` to support multi-line
truncation. This can be set via `truncateText.lines` in the `columns`
prop. ([elastic#7254](elastic/eui#7254))

**Bug fixes**

- Fixed `EuiFlexGroup` and `EuiFlexGrid`'s `m` gutter size
([elastic#7251](elastic/eui#7251))
- Fixed focus trap rerender issues in `EuiFlyout` with memoization
([elastic#7259](elastic/eui#7259))
- Fixed a visual bug with `EuiContextMenu`'s animation between panels
([elastic#7268](elastic/eui#7268))

**Breaking changes**

- EUI's global body font-size now respects the `font.defaultUnits`
token. This means that the global font size will use the `rem` unit by
default, instead of `px`.
([elastic#7182](elastic/eui#7182))
- Removed exported `accessibleClickKeys`, `comboBoxKeys`, and
`cascadingMenuKeys` services. Use the generic `keys` service instead
([elastic#7256](elastic/eui#7256))
- Removed `EuiColorStops` due to low usage
([elastic#7262](elastic/eui#7262))
- Removed `EuiSuggest`. We recommend using `EuiSelectable` or
`EuiComboBox` instead
([elastic#7263](elastic/eui#7263))
- Removed `euiHeaderAffordForFixed` Sass mixin, and `$euiHeaderHeight`
and `$euiHeaderHeightCompensation` Sass variables. Use the CSS variable
`--var(euiFixedHeadersOffset, 0)` instead.
([elastic#7264](elastic/eui#7264))

**Accessibility**

- When using `rem` or `em` font units, EUI now respects, instead of
ignoring, browser default font sizes set by end users.
([elastic#7182](elastic/eui#7182))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

API Key flyout UX behavior - Keyboard navigation broken
4 participants