diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/search_or_filter/search_or_filter.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/search_or_filter/search_or_filter.tsx
index 1b5e6932dff08..7ae8cf4c6507c 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/search_or_filter/search_or_filter.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/search_or_filter/search_or_filter.tsx
@@ -4,7 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/
-import { EuiFlexGroup, EuiFlexItem, EuiSuperSelect, EuiToolTip } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
import React, { useCallback } from 'react';
import styled, { createGlobalStyle } from 'styled-components';
@@ -15,6 +15,7 @@ import { DispatchUpdateReduxTime } from '../../../../common/components/super_dat
import { DataProvider } from '../data_providers/data_provider';
import { QueryBarTimeline } from '../query_bar';
+import { EuiSuperSelect } from './super_select';
import { options } from './helpers';
import * as i18n from './translations';
@@ -28,8 +29,8 @@ const SearchOrFilterGlobalStyle = createGlobalStyle`
width: 350px !important;
}
- .${searchOrFilterPopoverClassName}__popoverPanel {
- width: ${searchOrFilterPopoverWidth};
+ .${searchOrFilterPopoverClassName}.euiPopover__panel {
+ width: ${searchOrFilterPopoverWidth} !important;
.euiSuperSelect__listbox {
width: ${searchOrFilterPopoverWidth} !important;
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/search_or_filter/super_select.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/search_or_filter/super_select.tsx
new file mode 100644
index 0000000000000..36a6ea7385b8a
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/search_or_filter/super_select.tsx
@@ -0,0 +1,273 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+/*
+ Duplicated EuiSuperSelect, because due to the recent changes there is no way to pass panelClassName
+ prop to EuiInputPopover, which doesn't allow us to properly style the EuiInputPopover panel
+ (we want the panel to be wider than the input)
+*/
+
+import {
+ EuiSuperSelectProps,
+ EuiScreenReaderOnly,
+ EuiSuperSelectControl,
+ EuiInputPopover,
+ EuiContextMenuItem,
+ keys,
+ EuiI18n,
+} from '@elastic/eui';
+import React, { Component } from 'react';
+import classNames from 'classnames';
+
+enum ShiftDirection {
+ BACK = 'back',
+ FORWARD = 'forward',
+}
+
+export class EuiSuperSelect<T extends string> extends Component<EuiSuperSelectProps<T>> {
+ static defaultProps = {
+ compressed: false,
+ fullWidth: false,
+ hasDividers: false,
+ isInvalid: false,
+ isLoading: false,
+ };
+
+ private itemNodes: Array<HTMLButtonElement | null> = [];
+ private _isMounted: boolean = false;
+
+ state = {
+ isPopoverOpen: this.props.isOpen || false,
+ };
+
+ componentDidMount() {
+ this._isMounted = true;
+ if (this.props.isOpen) {
+ this.openPopover();
+ }
+ }
+
+ componentWillUnmount() {
+ this._isMounted = false;
+ }
+
+ setItemNode = (node: HTMLButtonElement | null, index: number) => {
+ this.itemNodes[index] = node;
+ };
+
+ openPopover = () => {
+ this.setState({
+ isPopoverOpen: true,
+ });
+
+ const focusSelected = () => {
+ const indexOfSelected = this.props.options.reduce<number | null>((acc, option, index) => {
+ if (acc != null) return acc;
+ if (option == null) return null;
+ return option.value === this.props.valueOfSelected ? index : null;
+ }, null);
+
+ requestAnimationFrame(() => {
+ if (!this._isMounted) {
+ return;
+ }
+
+ if (this.props.valueOfSelected != null) {
+ if (indexOfSelected != null) {
+ this.focusItemAt(indexOfSelected);
+ } else {
+ focusSelected();
+ }
+ }
+ });
+ };
+
+ requestAnimationFrame(focusSelected);
+ };
+
+ closePopover = () => {
+ this.setState({
+ isPopoverOpen: false,
+ });
+ };
+
+ itemClicked = (value: T) => {
+ this.setState({
+ isPopoverOpen: false,
+ });
+ if (this.props.onChange) {
+ this.props.onChange(value);
+ }
+ };
+
+ onSelectKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
+ if (event.key === keys.ARROW_UP || event.key === keys.ARROW_DOWN) {
+ event.preventDefault();
+ event.stopPropagation();
+ this.openPopover();
+ }
+ };
+
+ onItemKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
+ switch (event.key) {
+ case keys.ESCAPE:
+ // close the popover and prevent ancestors from handling
+ event.preventDefault();
+ event.stopPropagation();
+ this.closePopover();
+ break;
+
+ case keys.TAB:
+ // no-op
+ event.preventDefault();
+ event.stopPropagation();
+ break;
+
+ case keys.ARROW_UP:
+ event.preventDefault();
+ event.stopPropagation();
+ this.shiftFocus(ShiftDirection.BACK);
+ break;
+
+ case keys.ARROW_DOWN:
+ event.preventDefault();
+ event.stopPropagation();
+ this.shiftFocus(ShiftDirection.FORWARD);
+ break;
+ }
+ };
+
+ focusItemAt(index: number) {
+ const targetElement = this.itemNodes[index];
+ if (targetElement != null) {
+ targetElement.focus();
+ }
+ }
+
+ shiftFocus(direction: ShiftDirection) {
+ const currentIndex = this.itemNodes.indexOf(document.activeElement as HTMLButtonElement);
+ let targetElementIndex: number;
+
+ if (currentIndex === -1) {
+ // somehow the select options has lost focus
+ targetElementIndex = 0;
+ } else {
+ if (direction === ShiftDirection.BACK) {
+ targetElementIndex = currentIndex === 0 ? this.itemNodes.length - 1 : currentIndex - 1;
+ } else {
+ targetElementIndex = currentIndex === this.itemNodes.length - 1 ? 0 : currentIndex + 1;
+ }
+ }
+
+ this.focusItemAt(targetElementIndex);
+ }
+
+ render() {
+ const {
+ className,
+ options,
+ valueOfSelected,
+ onChange,
+ isOpen,
+ isInvalid,
+ hasDividers,
+ itemClassName,
+ itemLayoutAlign,
+ fullWidth,
+ popoverClassName,
+ compressed,
+ ...rest
+ } = this.props;
+
+ const popoverClasses = classNames('euiSuperSelect', popoverClassName);
+
+ const buttonClasses = classNames(
+ {
+ // eslint-disable-next-line @typescript-eslint/naming-convention
+ 'euiSuperSelect--isOpen__button': this.state.isPopoverOpen,
+ },
+ className
+ );
+
+ const itemClasses = classNames(
+ 'euiSuperSelect__item',
+ {
+ // eslint-disable-next-line @typescript-eslint/naming-convention
+ 'euiSuperSelect__item--hasDividers': hasDividers,
+ },
+ itemClassName
+ );
+
+ const button = (
+ <EuiSuperSelectControl
+ options={options}
+ value={valueOfSelected}
+ onClick={this.state.isPopoverOpen ? this.closePopover : this.openPopover}
+ onKeyDown={this.onSelectKeyDown}
+ className={buttonClasses}
+ fullWidth={fullWidth}
+ isInvalid={isInvalid}
+ compressed={compressed}
+ {...rest}
+ />
+ );
+
+ const items = options.map((option, index) => {
+ const { value, dropdownDisplay, inputDisplay, ...optionRest } = option;
+
+ return (
+ <EuiContextMenuItem
+ key={index}
+ className={itemClasses}
+ icon={valueOfSelected === value ? 'check' : 'empty'}
+ onClick={() => this.itemClicked(value)}
+ onKeyDown={this.onItemKeyDown}
+ layoutAlign={itemLayoutAlign}
+ buttonRef={(node) => this.setItemNode(node, index)}
+ role="option"
+ id={value}
+ aria-selected={valueOfSelected === value}
+ {...optionRest}
+ >
+ {dropdownDisplay || inputDisplay}
+ </EuiContextMenuItem>
+ );
+ });
+
+ return (
+ <EuiInputPopover
+ className={popoverClasses}
+ input={button}
+ isOpen={isOpen || this.state.isPopoverOpen}
+ closePopover={this.closePopover}
+ panelPaddingSize="none"
+ panelClassName={popoverClasses}
+ fullWidth={fullWidth}
+ repositionOnScroll
+ anchorPosition="downCenter"
+ >
+ <EuiScreenReaderOnly>
+ <p role="alert">
+ <EuiI18n
+ token="euiSuperSelect.screenReaderAnnouncement"
+ default="You are in a form selector of {optionsCount} items and must select a single option.
+ Use the up and down keys to navigate or escape to close."
+ values={{ optionsCount: options.length }}
+ />
+ </p>
+ </EuiScreenReaderOnly>
+ <div
+ className="euiSuperSelect__listbox"
+ role="listbox"
+ aria-activedescendant={valueOfSelected}
+ tabIndex={0}
+ >
+ {items}
+ </div>
+ </EuiInputPopover>
+ );
+ }
+}