diff --git a/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap b/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap index 067050cba81..d07cfa458eb 100644 --- a/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap +++ b/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap @@ -7,37 +7,35 @@ exports[`EuiColorPalettePicker is rendered 1`] = `
-
- + +
+
@@ -52,39 +50,37 @@ exports[`EuiColorPalettePicker is rendered with a selected custom text 1`] = `
-
- + +
+
- -
- -
+ aria-hidden="true" + class="euiFormControlLayoutCustomIcon__icon" + data-euiicon-type="arrowDown" + /> +
@@ -99,67 +95,65 @@ exports[`EuiColorPalettePicker is rendered with a selected fixed palette 1`] = `
-
- + +
-
- -
+ + +
+ +
@@ -174,47 +168,45 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette 1`]
-
- + +
+
- -
- - -
+
@@ -229,47 +221,45 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette with
-
- + +
+
- -
- - -
+
@@ -284,39 +274,37 @@ exports[`EuiColorPalettePicker is rendered with the prop selectionDisplay set as
-
- + +
+
- -
- -
+ aria-hidden="true" + class="euiFormControlLayoutCustomIcon__icon" + data-euiicon-type="arrowDown" + /> +
@@ -331,66 +319,64 @@ exports[`EuiColorPalettePicker more props are propagated to each option 1`] = `
-
- + +
-
- -
+ + +
+ +
diff --git a/src/components/date_picker/auto_refresh/__snapshots__/auto_refresh.test.tsx.snap b/src/components/date_picker/auto_refresh/__snapshots__/auto_refresh.test.tsx.snap index 3abd2bb1b97..d8ff3642f68 100644 --- a/src/components/date_picker/auto_refresh/__snapshots__/auto_refresh.test.tsx.snap +++ b/src/components/date_picker/auto_refresh/__snapshots__/auto_refresh.test.tsx.snap @@ -7,44 +7,42 @@ exports[`EuiAutoRefresh is rendered 1`] = `
-
-
+ -
- -
+ + +
+
@@ -58,43 +56,41 @@ exports[`EuiAutoRefresh isPaused is false 1`] = `
-
-
+ -
- -
+ + +
+
@@ -108,43 +104,41 @@ exports[`EuiAutoRefresh refreshInterval is rendered 1`] = `
-
-
+ -
- -
+ + +
+
diff --git a/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap b/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap index 354b88ed7b6..b3841a15267 100644 --- a/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap +++ b/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap @@ -155,43 +155,41 @@ exports[`EuiSuperDatePicker props isAutoRefreshOnly is rendered 1`] = `
-
-
+ -
- -
+ + +
+
@@ -210,45 +208,43 @@ exports[`EuiSuperDatePicker props isAutoRefreshOnly passes required props 1`] =
-
-
+ -
- -
+ + +
+
diff --git a/src/components/form/range/__snapshots__/range.test.tsx.snap b/src/components/form/range/__snapshots__/range.test.tsx.snap index 7a12e16e7e8..321d8d80cea 100644 --- a/src/components/form/range/__snapshots__/range.test.tsx.snap +++ b/src/components/form/range/__snapshots__/range.test.tsx.snap @@ -346,34 +346,32 @@ exports[`EuiRange props loading should display when showInput="inputWithPopover"
-
+
+
- -
- -
@@ -421,26 +419,24 @@ exports[`EuiRange props slider should display in popover 1`] = `
-
+
-
- -
+
@@ -465,7 +461,7 @@ exports[`EuiRange props slider should display in popover 1`] = ` data-popover-panel="true" data-test-subj="test" role="dialog" - style="top: 0px; left: -22px; will-change: transform, opacity; z-index: 2000;" + style="top: 0px; left: -22px; will-change: transform, opacity; z-index: 2000; inline-size: 0px;" >

-

+
diff --git a/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap b/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap index ed347f1ab88..6ae3b34d89b 100644 --- a/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap +++ b/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap @@ -7,37 +7,35 @@ exports[`EuiSuperSelect is rendered 1`] = `
-
- + +
+
@@ -52,37 +50,35 @@ exports[`EuiSuperSelect props compressed is rendered 1`] = `
-
- + +
+
@@ -97,36 +93,34 @@ exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
-
- + +
+
@@ -145,7 +139,7 @@ exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = ` class="euiPanel euiPanel--plain euiPopover__panel emotion-euiPanel-grow-m-plain-euiPopover__panel-isAttached-bottom" data-popover-panel="true" role="dialog" - style="top: 0px; left: -22px; will-change: transform, opacity; z-index: 2000;" + style="top: 0px; left: -22px; will-change: transform, opacity; z-index: 2000; inline-size: 0px;" >
-
-

- You are in a form selector and must select a single option. Use the Up and Down arrow keys to navigate or Escape to close. -

-
+ You are in a form selector and must select a single option. Use the Up and Down arrow keys to navigate or Escape to close. +

+
+ - + -
+ +
-
- + +
+
@@ -285,49 +275,47 @@ exports[`EuiSuperSelect props is rendered with a prepend and append 1`] = `
-
- + +
+
- +
-
+
@@ -340,38 +328,36 @@ exports[`EuiSuperSelect props more props are propogated to each option 1`] = `
-
- + +
+
- -
- -
+ aria-hidden="true" + class="euiFormControlLayoutCustomIcon__icon" + data-euiicon-type="arrowDown" + /> +
@@ -390,7 +376,7 @@ exports[`EuiSuperSelect props more props are propogated to each option 1`] = ` class="euiPanel euiPanel--plain euiPopover__panel emotion-euiPanel-grow-m-plain-euiPopover__panel-isAttached-bottom" data-popover-panel="true" role="dialog" - style="top: 0px; left: -22px; will-change: transform, opacity; z-index: 2000;" + style="top: 0px; left: -22px; will-change: transform, opacity; z-index: 2000; inline-size: 0px;" >
-
-

- You are in a form selector and must select a single option. Use the Up and Down arrow keys to navigate or Escape to close. -

-
+ You are in a form selector and must select a single option. Use the Up and Down arrow keys to navigate or Escape to close. +

+
+ - + -
+ +
-
- + +
+
@@ -536,7 +518,7 @@ exports[`EuiSuperSelect props options are rendered when select is open 1`] = ` class="euiPanel euiPanel--plain euiPopover__panel emotion-euiPanel-grow-m-plain-euiPopover__panel-isAttached-bottom" data-popover-panel="true" role="dialog" - style="top: 0px; left: -22px; will-change: transform, opacity; z-index: 2000;" + style="top: 0px; left: -22px; will-change: transform, opacity; z-index: 2000; inline-size: 0px;" >
-
-

- You are in a form selector and must select a single option. Use the Up and Down arrow keys to navigate or Escape to close. -

-
+ You are in a form selector and must select a single option. Use the Up and Down arrow keys to navigate or Escape to close. +

+
+ - + -
+ +
-
- + +
+
- -
- -
+ aria-hidden="true" + class="euiFormControlLayoutCustomIcon__icon" + data-euiicon-type="arrowDown" + /> +
@@ -681,7 +659,7 @@ exports[`EuiSuperSelect props renders popoverProps on the underlying EuiPopover class="euiPanel euiPanel--plain euiPopover__panel goes-on-popover-panel emotion-euiPanel-grow-m-plain-euiPopover__panel-isAttached-bottom" data-popover-panel="true" role="dialog" - style="top: 0px; left: -22px; will-change: transform, opacity; z-index: 2000;" + style="top: 0px; left: -22px; will-change: transform, opacity; z-index: 2000; inline-size: 0px;" >
-
-

- You are in a form selector and must select a single option. Use the Up and Down arrow keys to navigate or Escape to close. -

-
+ You are in a form selector and must select a single option. Use the Up and Down arrow keys to navigate or Escape to close. +

+
+ - + -
+ +
-
- + +
+
@@ -820,37 +794,35 @@ exports[`EuiSuperSelect props valueSelected is rendered 1`] = `
-
- + +
+
- -
- -
+ aria-hidden="true" + class="euiFormControlLayoutCustomIcon__icon" + data-euiicon-type="arrowDown" + /> +
diff --git a/src/components/popover/input_popover.spec.tsx b/src/components/popover/input_popover.spec.tsx index 1ba40253959..80fde317f43 100644 --- a/src/components/popover/input_popover.spec.tsx +++ b/src/components/popover/input_popover.spec.tsx @@ -10,10 +10,11 @@ /// /// -import React from 'react'; +import React, { FunctionComponent, PropsWithChildren, useState } from 'react'; import { EuiFieldText, EuiTextArea } from '../../components'; -import { EuiInputPopover } from './input_popover'; + +import { EuiInputPopover, EuiInputPopoverProps } from './input_popover'; describe('EuiPopover', () => { // The viewport width matters for position assertions, so ensure it's explicitly defined @@ -61,25 +62,142 @@ describe('EuiPopover', () => { cy.get('[data-popover-panel]').should('have.css', 'left', '200px'); }); - it('correctly repositions the popover on input resize', () => { - cy.mount( -
+ describe('on input resize', () => { + const initialWidth = 250; + const resizeProps = { + ...props, + display: 'inline-block', + input: ( + + ), + }; + const resizeInput = (width: number) => { + // Cypress doesn't seem to have a way to mimic manual dragging/resizing, so we'll do it programmatically + cy.get('textarea').then(($el) => ($el[0].style.width = `${width}px`)); + }; + + it('repositions and resizes the popover to match the input', () => { + cy.mount( +
+ Popover content +
+ ); + cy.get('[data-popover-panel]') + .should('have.css', 'inline-size', '250px') + .should('have.css', 'left', '125px'); + + resizeInput(150); + + cy.get('[data-popover-panel]') + .should('have.css', 'inline-size', '150px') + .should('have.css', 'left', '175px'); + }); + + it('repositions the popover even when the popover width does not change', () => { + cy.mount( +
+ + Popover content + +
+ ); + cy.get('[data-popover-panel]') + .should('have.css', 'inline-size', '250px') + .should('have.css', 'left', '125px'); + + resizeInput(100); + + cy.get('[data-popover-panel]') + .should('have.css', 'inline-size', '250px') + .should('have.css', 'left', '50px'); + }); + }); + + describe('focus/tab management', () => { + const StatefulInputPopover: FunctionComponent< + PropsWithChildren & Partial + > = ({ children, ...rest }) => { + const [isOpen, setIsOpen] = useState(true); + + return ( - } + {...rest} + isOpen={isOpen} + closePopover={() => setIsOpen(false)} + input={} > - Popover content + {children} -
- ); - cy.get('[data-popover-panel]').should('have.css', 'left', '175px'); - cy.wait(100); // Wait a tick, otherwise Cypress returns a false positive + ); + }; + + describe('with focus trap enabled', () => { + it('auto focuses popover content', () => { + cy.mount( + + + + ); + + cy.focused().invoke('attr', 'data-test-subj').should('eq', 'popover'); + cy.get('[data-popover-panel]').should('exist'); + }); + + it('automatically closes the popover when users tab off the last item in the popover', () => { + cy.mount( + + + + + ); + + cy.focused().invoke('attr', 'data-test-subj').should('eq', 'one'); + cy.realPress('Tab'); + cy.focused().invoke('attr', 'data-test-subj').should('eq', 'two'); + cy.realPress('Tab'); + + cy.get('[data-popover-panel]').should('not.exist'); + }); + }); + + describe('with focus trap disabled', () => { + it('does not auto focus popover content', () => { + cy.mount( + + + + ); + cy.wait(100); // wait a tick to prevent false positives + + cy.focused().invoke('attr', 'data-test-subj').should('eq', 'input'); + cy.get('[data-popover-panel]').should('exist'); + }); + + // Not sure how much sense this behavior makes, but this logic was + // apparently added to EuiInputPopover with EuiDualRange in mind + it('automatically closes the popover when users tab from anywhere in the popover', () => { + cy.mount( + <> + + + + + + ); + + cy.get('[data-test-subj="one"]').click(); + cy.realPress('Tab'); - // Cypress doesn't seem to have a way to mimic manual dragging/resizing, so we'll do it programmatically - cy.get('textarea').then(($el) => ($el[0].style.width = '500px')); - cy.get('[data-popover-panel]').should('have.css', 'left', '50px'); + cy.get('[data-popover-panel]').should('not.exist'); + }); + }); }); }); diff --git a/src/components/popover/input_popover.tsx b/src/components/popover/input_popover.tsx index 455ffedcfc5..1d61c2a708e 100644 --- a/src/components/popover/input_popover.tsx +++ b/src/components/popover/input_popover.tsx @@ -9,26 +9,25 @@ import React, { FunctionComponent, HTMLAttributes, + KeyboardEvent, useState, useEffect, useCallback, + useMemo, useRef, } from 'react'; +import { css } from '@emotion/react'; import classnames from 'classnames'; -import { tabbable, FocusableElement } from 'tabbable'; +import { tabbable } from 'tabbable'; +import { logicalCSS } from '../../global_styling'; +import { keys, useCombinedRefs, useEuiTheme } from '../../services'; import { CommonProps } from '../common'; +import { useResizeObserver } from '../observer/resize_observer'; import { EuiFocusTrap } from '../focus_trap'; -import { EuiPopover, EuiPopoverProps } from './popover'; -import { EuiResizeObserver } from '../observer/resize_observer'; -import { - cascadingMenuKeys, - useCombinedRefs, - useEuiTheme, -} from '../../services'; import { euiFormVariables } from '../form/form.styles'; -import { css } from '@emotion/react'; -import { logicalCSS } from '../../global_styling'; + +import { EuiPopover, EuiPopoverProps } from './popover'; export interface _EuiInputPopoverProps extends Omit { @@ -56,6 +55,7 @@ export type EuiInputPopoverProps = CommonProps & export const EuiInputPopover: FunctionComponent = ({ children, className, + closePopover, disableFocusTrap = false, focusTrapProps, input, @@ -66,87 +66,100 @@ export const EuiInputPopover: FunctionComponent = ({ panelRef: _panelRef, ...props }) => { - const euiThemeContext = useEuiTheme(); + const classes = classnames('euiInputPopover', className); + const euiTheme = useEuiTheme(); + const form = euiFormVariables(euiTheme); + + /** + * Ref setup + */ + + const popoverClassRef = useRef(null); + // The inputEl state ensures that width is correctly tracked on initial load const [inputEl, setInputEl] = useState(null); - const [inputElWidth, setInputElWidth] = useState(); + // The panelEl state ensures that width is correctly set every time the popover opens const [panelEl, setPanelEl] = useState(null); - const popoverClassRef = useRef(null); const inputRef = useCombinedRefs([setInputEl, _inputRef]); const panelRef = useCombinedRefs([setPanelEl, _panelRef]); - const setPanelWidth = useCallback( - (width?: number) => { - if (panelEl && (!!inputElWidth || !!width)) { - const newWidth = !!width ? width : inputElWidth; - const widthToSet = - newWidth && newWidth > panelMinWidth ? newWidth : panelMinWidth; + /** + * Sizing/width logic + */ + + const inputWidth = useResizeObserver(inputEl, 'width').width; + + const panelWidth = useMemo(() => { + return inputWidth < panelMinWidth ? panelMinWidth : inputWidth; + }, [panelMinWidth, inputWidth]); - panelEl.style.width = `${widthToSet}px`; - onPanelResize?.(widthToSet); - } - }, - [panelEl, inputElWidth, onPanelResize, panelMinWidth] - ); - const onResize = useCallback(() => { - if (inputEl) { - const width = inputEl.getBoundingClientRect().width; - setInputElWidth(width); - setPanelWidth(width); - popoverClassRef.current?.positionPopoverFluid(); - } - }, [inputEl, setPanelWidth]); useEffect(() => { - onResize(); - }, [onResize]); + if (panelEl) { + // We have to modify the popover panel DOM node directly instead of using + // `panelStyle`, as there's some weird positioning bugs on resize otherwise + panelEl.style.inlineSize = `${panelWidth}px`; + } + }, [panelEl, panelWidth]); + useEffect(() => { - setPanelWidth(); - }, [setPanelWidth]); - - const onKeyDown = (event: React.KeyboardEvent) => { - if (panelEl && event.key === cascadingMenuKeys.TAB) { - const tabbableItems = tabbable(panelEl).filter((el: FocusableElement) => { - return ( - Array.from(el.attributes) - .map((el) => el.name) - .indexOf('data-focus-guard') < 0 - ); - }); - if ( - disableFocusTrap || - (tabbableItems.length && - tabbableItems[tabbableItems.length - 1] === document.activeElement) - ) { - props.closePopover(); - } + // This fires on all input width changes regardless of minimum size, because on + // right/center anchored popovers, the input width affects the position of the popover + if (panelEl) { + popoverClassRef.current?.positionPopoverFluid(); } - }; + }, [inputWidth, panelEl]); - const classes = classnames('euiInputPopover', className); - const form = euiFormVariables(euiThemeContext); + /** + * Popover tab to close logic + */ + + const panelPropsOnKeyDown = props.panelProps?.onKeyDown; + + const onKeyDown = useCallback( + (event: KeyboardEvent) => { + panelPropsOnKeyDown?.(event); + + if (event.key === keys.TAB) { + if (disableFocusTrap) { + closePopover(); + } else { + const tabbableItems = tabbable(event.currentTarget).filter( + (el) => !el.hasAttribute('data-focus-guard') + ); + if (!tabbableItems.length) return; + + const tabbingFromLastItemInPopover = + document.activeElement === tabbableItems[tabbableItems.length - 1]; + + if (tabbingFromLastItemInPopover) { + closePopover(); + } + } + } + }, + [disableFocusTrap, closePopover, panelPropsOnKeyDown] + ); return ( - {(resizeRef) =>
{input}
} - - } + button={input} buttonRef={inputRef} panelRef={panelRef} className={classes} ref={popoverClassRef} + closePopover={closePopover} {...props} + panelProps={{ ...props.panelProps, onKeyDown }} > -
{children}
+ {children} ); diff --git a/src/components/suggest/__snapshots__/suggest.test.tsx.snap b/src/components/suggest/__snapshots__/suggest.test.tsx.snap index 2f0772cdab8..60eedbc96fb 100644 --- a/src/components/suggest/__snapshots__/suggest.test.tsx.snap +++ b/src/components/suggest/__snapshots__/suggest.test.tsx.snap @@ -10,49 +10,47 @@ exports[`EuiSuggest is rendered 1`] = `
-
+
-
- -
- + aria-hidden="true" + class="euiFormControlLayoutCustomIcon__icon" + data-euiicon-type="search" + /> +
+
-

- State: unchanged. - - Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options. -

+

+ State: unchanged. + + Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options. +

@@ -68,54 +66,52 @@ exports[`EuiSuggest props append 1`] = `
-
+
-
- -
- + aria-hidden="true" + class="euiFormControlLayoutCustomIcon__icon" + data-euiicon-type="search" + /> +
- - Appended - +
-

- State: unchanged. - - Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options. -

+ Appended +
+

+ State: unchanged. + + Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options. +

@@ -131,49 +127,47 @@ exports[`EuiSuggest props isVirtualized 1`] = `
-
+
-
- -
- + aria-hidden="true" + class="euiFormControlLayoutCustomIcon__icon" + data-euiicon-type="search" + /> +
+
-

- State: unchanged. - - Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options. -

+

+ State: unchanged. + + Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options. +

@@ -189,49 +183,47 @@ exports[`EuiSuggest props maxHeight 1`] = `
-
+
-
- -
- + aria-hidden="true" + class="euiFormControlLayoutCustomIcon__icon" + data-euiicon-type="search" + /> +
+
-

- State: unchanged. - - Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options. -

+

+ State: unchanged. + + Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options. +

@@ -247,49 +239,47 @@ exports[`EuiSuggest props options common 1`] = `
-
+
-
- -
- + aria-hidden="true" + class="euiFormControlLayoutCustomIcon__icon" + data-euiicon-type="search" + /> +
+
-

- State: unchanged. - - Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options. -

+

+ State: unchanged. + + Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options. +

@@ -305,49 +295,47 @@ exports[`EuiSuggest props options standard 1`] = `
-
+
-
- -
- + aria-hidden="true" + class="euiFormControlLayoutCustomIcon__icon" + data-euiicon-type="search" + /> +
+
-

- State: unchanged. - - Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options. -

+

+ State: unchanged. + + Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options. +

@@ -363,71 +351,69 @@ exports[`EuiSuggest props remaining EuiFieldSearch props are spread to the searc
-
+
-
- -
- - + +
+ -
+ +
-

- State: unchanged. - - Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options. -

+

+ State: unchanged. + + Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options. +

@@ -443,58 +429,56 @@ exports[`EuiSuggest props status status: loading is rendered 1`] = `
-
+
-
- - -
- -
+ +
+ +
+
-

- State: loading. - - Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options. -

+

+ State: loading. + + Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options. +

@@ -510,58 +494,56 @@ exports[`EuiSuggest props status status: saved is rendered 1`] = `
-
+
-
- -
- + aria-hidden="true" + class="euiFormControlLayoutCustomIcon__icon" + data-euiicon-type="search" + /> +
- - - +
-

- State: saved. - - Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options. -

+ +
+

+ State: saved. + + Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options. +

@@ -577,49 +559,47 @@ exports[`EuiSuggest props status status: unchanged is rendered 1`] = `
-
+
-
- -
- + aria-hidden="true" + class="euiFormControlLayoutCustomIcon__icon" + data-euiicon-type="search" + /> +
+
-

- State: unchanged. - - Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options. -

+

+ State: unchanged. + + Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options. +

@@ -635,58 +615,56 @@ exports[`EuiSuggest props status status: unsaved is rendered 1`] = `
-
+
-
- -
- + aria-hidden="true" + class="euiFormControlLayoutCustomIcon__icon" + data-euiicon-type="search" + /> +
- - - +
-

- State: unsaved. - - Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options. -

+ +
+

+ State: unsaved. + + Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options. +

@@ -702,58 +680,56 @@ exports[`EuiSuggest props tooltipContent tooltipContent for status: loading is r
-
+
-
- - -
- -
+ +
+ +
+
-

- State: loading. - - Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options. -

+

+ State: loading. + + Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options. +

@@ -769,58 +745,56 @@ exports[`EuiSuggest props tooltipContent tooltipContent for status: saved is ren
-
+
-
- -
- + aria-hidden="true" + class="euiFormControlLayoutCustomIcon__icon" + data-euiicon-type="search" + /> +
- - - +
-

- State: saved. - - Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options. -

+ +
+

+ State: saved. + + Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options. +

@@ -836,49 +810,47 @@ exports[`EuiSuggest props tooltipContent tooltipContent for status: unchanged is
-
+
-
- -
- + aria-hidden="true" + class="euiFormControlLayoutCustomIcon__icon" + data-euiicon-type="search" + /> +
+
-

- State: unchanged. - - Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options. -

+

+ State: unchanged. + + Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options. +

@@ -894,58 +866,56 @@ exports[`EuiSuggest props tooltipContent tooltipContent for status: unsaved is r
-
+
-
- -
- + aria-hidden="true" + class="euiFormControlLayoutCustomIcon__icon" + data-euiicon-type="search" + /> +
- - - +
-

- State: unsaved. - - Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options. -

+ +
+

+ State: unsaved. + + Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options. +