From 8253ede6ce51b9d58a3614db81b7ff808a66c9e9 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Sat, 30 Sep 2023 19:06:06 -0700 Subject: [PATCH 1/6] [nit] Reorganize import order --- src/components/popover/input_popover.tsx | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/src/components/popover/input_popover.tsx b/src/components/popover/input_popover.tsx index 455ffedcfc5..2c128702f26 100644 --- a/src/components/popover/input_popover.tsx +++ b/src/components/popover/input_popover.tsx @@ -14,21 +14,18 @@ import React, { useCallback, useRef, } from 'react'; +import { css } from '@emotion/react'; import classnames from 'classnames'; import { tabbable, FocusableElement } from 'tabbable'; +import { logicalCSS } from '../../global_styling'; +import { keys, useCombinedRefs, useEuiTheme } from '../../services'; import { CommonProps } from '../common'; -import { EuiFocusTrap } from '../focus_trap'; -import { EuiPopover, EuiPopoverProps } from './popover'; import { EuiResizeObserver } from '../observer/resize_observer'; -import { - cascadingMenuKeys, - useCombinedRefs, - useEuiTheme, -} from '../../services'; +import { EuiFocusTrap } from '../focus_trap'; 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 { @@ -104,7 +101,7 @@ export const EuiInputPopover: FunctionComponent = ({ }, [setPanelWidth]); const onKeyDown = (event: React.KeyboardEvent) => { - if (panelEl && event.key === cascadingMenuKeys.TAB) { + if (panelEl && event.key === keys.TAB) { const tabbableItems = tabbable(panelEl).filter((el: FocusableElement) => { return ( Array.from(el.attributes) From 9ba6fa9df7af7ebf88960f3c972d58ed7181e3b0 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Sat, 30 Sep 2023 19:24:16 -0700 Subject: [PATCH 2/6] Refactor `EuiResizeObserver` to `useResizeObserver` - allows us to remove an extra unnecessary div wrapper, and it general lends itself to cleaner and more React-like code + add more detailed/clearer tests to reflect the comments added to the useEffects --- src/components/popover/input_popover.spec.tsx | 75 ++++++++++++++----- src/components/popover/input_popover.tsx | 56 +++++++------- 2 files changed, 81 insertions(+), 50 deletions(-) diff --git a/src/components/popover/input_popover.spec.tsx b/src/components/popover/input_popover.spec.tsx index 1ba40253959..079b4945ce1 100644 --- a/src/components/popover/input_popover.spec.tsx +++ b/src/components/popover/input_popover.spec.tsx @@ -61,25 +61,62 @@ describe('EuiPopover', () => { cy.get('[data-popover-panel]').should('have.css', 'left', '200px'); }); - it('correctly repositions the popover on input resize', () => { - cy.mount( -
- - } - > - Popover content - -
- ); - cy.get('[data-popover-panel]').should('have.css', 'left', '175px'); - cy.wait(100); // Wait a tick, otherwise Cypress returns a false positive + 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); - // 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('have.css', 'inline-size', '250px') + .should('have.css', 'left', '50px'); + }); }); }); diff --git a/src/components/popover/input_popover.tsx b/src/components/popover/input_popover.tsx index 2c128702f26..cc39e4d6c63 100644 --- a/src/components/popover/input_popover.tsx +++ b/src/components/popover/input_popover.tsx @@ -12,6 +12,7 @@ import React, { useState, useEffect, useCallback, + useMemo, useRef, } from 'react'; import { css } from '@emotion/react'; @@ -21,7 +22,7 @@ import { tabbable, FocusableElement } from 'tabbable'; import { logicalCSS } from '../../global_styling'; import { keys, useCombinedRefs, useEuiTheme } from '../../services'; import { CommonProps } from '../common'; -import { EuiResizeObserver } from '../observer/resize_observer'; +import { useResizeObserver } from '../observer/resize_observer'; import { EuiFocusTrap } from '../focus_trap'; import { euiFormVariables } from '../form/form.styles'; @@ -65,40 +66,37 @@ export const EuiInputPopover: FunctionComponent = ({ }) => { const euiThemeContext = useEuiTheme(); const [inputEl, setInputEl] = useState(null); - const [inputElWidth, setInputElWidth] = useState(); 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]); + // 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 onKeyDown = (event: React.KeyboardEvent) => { if (panelEl && event.key === keys.TAB) { @@ -127,11 +125,7 @@ export const EuiInputPopover: FunctionComponent = ({ css={css(fullWidth ? undefined : logicalCSS('max-width', form.maxWidth))} repositionToCrossAxis={false} ownFocus={false} - button={ - - {(resizeRef) =>
{input}
} -
- } + button={input} buttonRef={inputRef} panelRef={panelRef} className={classes} From 3283c1dc209166b5c5eb17aae0f7c5dc27ec82ab Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Sat, 30 Sep 2023 20:36:50 -0700 Subject: [PATCH 3/6] Clean up and memoize `onKeyDown` - [microperf] don't bother finding/iterating through tabbable items when `disableFocusTrap` is true - [microperf] Clean up unnecessary extra Array map by using `.hasAttribute()` instead - make if conditions more readable/understandable by using early returns, var names, and writing tests - pull out `closePopover` from props to add it to dependency array - remove unnecessary type --- src/components/popover/input_popover.spec.tsx | 85 ++++++++++++++++++- src/components/popover/input_popover.tsx | 49 +++++++---- 2 files changed, 114 insertions(+), 20 deletions(-) diff --git a/src/components/popover/input_popover.spec.tsx b/src/components/popover/input_popover.spec.tsx index 079b4945ce1..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 @@ -119,4 +120,84 @@ describe('EuiPopover', () => { .should('have.css', 'left', '50px'); }); }); + + describe('focus/tab management', () => { + const StatefulInputPopover: FunctionComponent< + PropsWithChildren & Partial + > = ({ children, ...rest }) => { + const [isOpen, setIsOpen] = useState(true); + + return ( + setIsOpen(false)} + input={} + > + {children} + + ); + }; + + 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'); + + 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 cc39e4d6c63..49e8a5d0a93 100644 --- a/src/components/popover/input_popover.tsx +++ b/src/components/popover/input_popover.tsx @@ -9,6 +9,7 @@ import React, { FunctionComponent, HTMLAttributes, + KeyboardEvent, useState, useEffect, useCallback, @@ -17,7 +18,7 @@ import React, { } 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'; @@ -54,6 +55,7 @@ export type EuiInputPopoverProps = CommonProps & export const EuiInputPopover: FunctionComponent = ({ children, className, + closePopover, disableFocusTrap = false, focusTrapProps, input, @@ -98,24 +100,34 @@ export const EuiInputPopover: FunctionComponent = ({ } }, [inputWidth, panelEl]); - const onKeyDown = (event: React.KeyboardEvent) => { - if (panelEl && event.key === keys.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(); + /** + * Popover tab to close logic + */ + + const onKeyDown = useCallback( + (event: KeyboardEvent) => { + if (!panelEl) return; + + if (event.key === keys.TAB) { + if (disableFocusTrap) { + closePopover(); + } else { + const tabbableItems = tabbable(panelEl).filter( + (el) => !el.hasAttribute('data-focus-guard') + ); + if (!tabbableItems.length) return; + + const tabbingFromLastItemInPopover = + document.activeElement === tabbableItems[tabbableItems.length - 1]; + + if (tabbingFromLastItemInPopover) { + closePopover(); + } + } } - } - }; + }, + [panelEl, disableFocusTrap, closePopover] + ); const classes = classnames('euiInputPopover', className); const form = euiFormVariables(euiThemeContext); @@ -130,6 +142,7 @@ export const EuiInputPopover: FunctionComponent = ({ panelRef={panelRef} className={classes} ref={popoverClassRef} + closePopover={closePopover} {...props} > Date: Sat, 30 Sep 2023 21:14:18 -0700 Subject: [PATCH 4/6] More `onKeyDown` cleanup - Remove unnecessary div by passing onKeyDown to the parent EuiPanel popover - now that the current target of the keydown event can be guaranteed to be the panel, we can remove the `panelEl` dependency from the array --- src/components/popover/input_popover.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/components/popover/input_popover.tsx b/src/components/popover/input_popover.tsx index 49e8a5d0a93..84c20a0469a 100644 --- a/src/components/popover/input_popover.tsx +++ b/src/components/popover/input_popover.tsx @@ -104,15 +104,17 @@ export const EuiInputPopover: FunctionComponent = ({ * Popover tab to close logic */ + const panelPropsOnKeyDown = props.panelProps?.onKeyDown; + const onKeyDown = useCallback( - (event: KeyboardEvent) => { - if (!panelEl) return; + (event: KeyboardEvent) => { + panelPropsOnKeyDown?.(event); if (event.key === keys.TAB) { if (disableFocusTrap) { closePopover(); } else { - const tabbableItems = tabbable(panelEl).filter( + const tabbableItems = tabbable(event.currentTarget).filter( (el) => !el.hasAttribute('data-focus-guard') ); if (!tabbableItems.length) return; @@ -126,7 +128,7 @@ export const EuiInputPopover: FunctionComponent = ({ } } }, - [panelEl, disableFocusTrap, closePopover] + [disableFocusTrap, closePopover, panelPropsOnKeyDown] ); const classes = classnames('euiInputPopover', className); @@ -144,13 +146,14 @@ export const EuiInputPopover: FunctionComponent = ({ ref={popoverClassRef} closePopover={closePopover} {...props} + panelProps={{ ...props.panelProps, onKeyDown }} > -
{children}
+ {children}
); From f1b2ae27c368b22d6f3d09be9c567d6d11f74bc3 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Sat, 30 Sep 2023 20:56:06 -0700 Subject: [PATCH 5/6] [nit] Misc code organization - Move classes/styling up to top of file - add jsdoc block - add clearer comments on why state is being used over refs for the input/panel refs --- src/components/popover/input_popover.tsx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/src/components/popover/input_popover.tsx b/src/components/popover/input_popover.tsx index 84c20a0469a..1d61c2a708e 100644 --- a/src/components/popover/input_popover.tsx +++ b/src/components/popover/input_popover.tsx @@ -66,10 +66,19 @@ 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); + // 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]); @@ -131,9 +140,6 @@ export const EuiInputPopover: FunctionComponent = ({ [disableFocusTrap, closePopover, panelPropsOnKeyDown] ); - const classes = classnames('euiInputPopover', className); - const form = euiFormVariables(euiThemeContext); - return ( Date: Sat, 30 Sep 2023 21:29:19 -0700 Subject: [PATCH 6/6] Update downstream snapshots --- .../color_palette_picker.test.tsx.snap | 470 ++++--- .../__snapshots__/auto_refresh.test.tsx.snap | 188 ++- .../super_date_picker.test.tsx.snap | 128 +- .../range/__snapshots__/range.test.tsx.snap | 116 +- .../__snapshots__/super_select.test.tsx.snap | 904 +++++++------ .../__snapshots__/suggest.test.tsx.snap | 1132 ++++++++--------- 6 files changed, 1425 insertions(+), 1513 deletions(-) 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/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. +