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

[EuiContextMenuPanel] Fix popover toggle focus restoration issues and remove need for watchedItemProps #5880

Merged
merged 10 commits into from
May 10, 2022

Commits on May 5, 2022

  1. [misc] move componentDidUpdate fn

    - move it closer to updateFocus / componentDidMount for easier context between the other two methods
    cee-chen committed May 5, 2022
    Configuration menu
    Copy the full SHA
    a5be54f View commit details
    Browse the repository at this point in the history
  2. [setup] Refactor popover parent finding logic

    - move to separate method
    - create instance var
    
    - specify `initialPopover` and add `transitionType` check, as the popover doesn't re-initialize when moving between panels in the same popover, and we don't want this to re-fire unnecessarily
    - add E2E tests for popover behavior
    cee-chen committed May 5, 2022
    Configuration menu
    Copy the full SHA
    1e3d257 View commit details
    Browse the repository at this point in the history
  3. [fix] Add a wait condition/state for popover focus

    - this makes it so EuiContextMenu doesn't call `.focus()` too early and hijack the `returnFocus` element that our focus trap dependency sets via `document.activeElement` - see elastic#5760 (comment)
    
    + Add Cypress E2E tests for popover close focus return (w/ bonus `initialFocus` regression test)
    cee-chen committed May 5, 2022
    Configuration menu
    Copy the full SHA
    f6c99b8 View commit details
    Browse the repository at this point in the history
  4. [!!!] EuiContextMenuPanels with children are still broken and do no…

    …t correctly return focus :(
    
    - this is because of `shouldComponentUpdate` - the `items` API updates focus less than `children`, so `children` is still updating/hijacking focus after the popover focus trap returns focus to the button
    cee-chen committed May 5, 2022
    Configuration menu
    Copy the full SHA
    6ef9342 View commit details
    Browse the repository at this point in the history
  5. [!!!] Remove shouldComponentUpdate logic & watchedItemProps

    - replace `updateFocus` with `takeInitialFocus`, and do not continue to update/hijack focus once initial focus has been set
    
     - this removes the need to restrict how often `EuiContextMenuPanel` updates (which also requires a bunch of tedious `items` diffing that we will no longer need)
    cee-chen committed May 5, 2022
    Configuration menu
    Copy the full SHA
    1fb9b24 View commit details
    Browse the repository at this point in the history
  6. [!!!] Move tabbable iteration out of focus logic and into its own m…

    …ethod
    
    - it shouldn't be tied to the focus call anymore since the focus call no longer occurs after update, and makes more sense as a separate call
    
    + updates to logic:
      - do not run `tabbable` on `children` API since it won't even use the navigation - return early
      - use `this.backButton` instead for back button focusing, since `children` will no longer have `menuItems`
      - Check for a valid focusedItem - it's possible for consumers to either pass in bad indices or for `items` to update and the index to no longer exist
    
    - Add E2E tests confirming changes & new logic work as expected
    cee-chen committed May 5, 2022
    Configuration menu
    Copy the full SHA
    40dc5c4 View commit details
    Browse the repository at this point in the history
  7. [!!!] Restore up/down key navigation behavior

    - rename `incrementFocusedItemIndex` to `focusMenuItem` and change args to be a bit more human readable
    
    - instead of having the previous `updateFocus` handle up/down nav, we can simply call `.focus()` from within this method, and arrow navigation works as before
    
    - note `?.focus();` - this is important to keep as users can start mashing up/down before `tabbable` is done running and there are any menu items to focus
    
    - no specific E2E tests for this, tests should simply not be failing
    cee-chen committed May 5, 2022
    Configuration menu
    Copy the full SHA
    4b397b0 View commit details
    Browse the repository at this point in the history

Commits on May 6, 2022

  1. changelog

    cee-chen committed May 6, 2022
    Configuration menu
    Copy the full SHA
    1721abf View commit details
    Browse the repository at this point in the history

Commits on May 9, 2022

  1. Configuration menu
    Copy the full SHA
    6a7a464 View commit details
    Browse the repository at this point in the history
  2. Configuration menu
    Copy the full SHA
    f8e7a5c View commit details
    Browse the repository at this point in the history