@elastic/eui 88.5.4 → 89.0.0

package/optimize/lib/components/combo_box/combo_box.js

@@ -18,14 +18,13 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../services");
-var _popover = require("../../services/popover");
-var _portal = require("../portal");
+var _popover = require("../popover");
 var _i18n = require("../i18n");
 var _matching_options = require("./matching_options");
 var _combo_box_input = require("./combo_box_input/combo_box_input");
 var _combo_box_options_list = require("./combo_box_options_list");
 var _react2 = require("@emotion/react");
-var _excluded = ["data-test-subj", "async", "className", "compressed", "customOptionText", "fullWidth", "id", "inputRef", "isCaseSensitive", "isClearable", "isDisabled", "isInvalid", "isLoading", "noSuggestions", "onBlur", "onChange", "onCreateOption", "onSearchChange", "options", "placeholder", "renderOption", "rowHeight", "selectedOptions", "singleSelection", "prepend", "sortMatchesBy", "delimiter", "append", "autoFocus", "truncationProps", "aria-label", "aria-labelledby"];
+var _excluded = ["data-test-subj", "async", "className", "compressed", "customOptionText", "fullWidth", "id", "inputRef", "isCaseSensitive", "isClearable", "isDisabled", "isInvalid", "isLoading", "noSuggestions", "onBlur", "onChange", "onCreateOption", "onSearchChange", "options", "placeholder", "renderOption", "rowHeight", "selectedOptions", "singleSelection", "prepend", "sortMatchesBy", "delimiter", "append", "autoFocus", "truncationProps", "inputPopoverProps", "aria-label", "aria-labelledby"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -63,9 +62,6 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
       activeOptionIndex: -1,
       hasFocus: false,
       isListOpen: false,
-      listElement: null,
-      listPosition: 'bottom',
-      listZIndex: undefined,
       matchingOptions: (0, _matching_options.getMatchingOptions)({
         options: _this.props.options,
         selectedOptions: _this.props.selectedOptions,
@@ -75,118 +71,43 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
         showPrevSelected: Boolean(_this.props.singleSelection),
         sortMatchesBy: _this.props.sortMatchesBy
       }),
-      searchValue: initialSearchValue,
-      width: 0
+      searchValue: initialSearchValue
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_isMounted", false);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "rootId", (0, _services.htmlIdGenerator)());
     // Refs
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "comboBoxRefInstance", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "comboBoxRefCallback", function (ref) {
       _this.comboBoxRefInstance = ref;
-      if (_this.comboBoxRefInstance) {
-        var comboBoxBounds = _this.comboBoxRefInstance.getBoundingClientRect();
-        _this.setState({
-          width: comboBoxBounds.width
-        });
-      }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "searchInputRefInstance", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "searchInputRefCallback", function (ref) {
+      var _this$props$inputRef, _this$props;
       _this.searchInputRefInstance = ref;
-      if (_this.props.inputRef) _this.props.inputRef(ref);
+      (_this$props$inputRef = (_this$props = _this.props).inputRef) === null || _this$props$inputRef === void 0 ? void 0 : _this$props$inputRef.call(_this$props, ref);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "listRefInstance", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "listRefCallback", function (ref) {
-      if (_this.comboBoxRefInstance) {
-        // find the zIndex of the combobox relative to the page body
-        // and use that to depth-position the list box
-        // adds an extra `100` to provide some defense around neighboring elements' positioning
-        var listZIndex = (0, _popover.getElementZIndex)(_this.comboBoxRefInstance, document.body) + 100;
-        _this.setState({
-          listZIndex: listZIndex
-        });
-      }
       _this.listRefInstance = ref;
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "toggleButtonRefInstance", null);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "toggleButtonRefCallback", function (ref) {
-      _this.toggleButtonRefInstance = ref;
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "optionsRefInstances", []);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "optionRefCallback", function (index, ref) {
-      _this.optionsRefInstances[index] = ref;
-    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "openList", function () {
       _this.setState({
         isListOpen: true
       });
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "closeList", function (event) {
-      if (event && event.target === _this.searchInputRefInstance) {
-        // really long search values / custom entries triggers a scroll event on the input
-        // which the EuiComboBoxOptionsList passes through here
-        return;
-      }
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "closeList", function () {
       _this.clearActiveOption();
       _this.setState({
-        listZIndex: undefined,
         isListOpen: false
       });
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updatePosition", function () {
-      var listElement = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.state.listElement;
-      if (!_this._isMounted) {
-        return;
-      }
-      if (!_this.state.isListOpen) {
-        return;
-      }
-      if (!listElement) {
-        return;
-      }
-
-      // it's possible that updateListPosition is called when listElement is becoming visible, but isn't yet
-      var listElementBounds = listElement.getBoundingClientRect();
-      if (listElementBounds.width === 0 || listElementBounds.height === 0) {
-        return;
-      }
-      if (!_this.comboBoxRefInstance) {
-        return;
-      }
-      var comboBoxBounds = _this.comboBoxRefInstance.getBoundingClientRect();
-      var _ref = (0, _services.findPopoverPosition)({
-          allowCrossAxis: false,
-          anchor: _this.comboBoxRefInstance,
-          popover: listElement,
-          position: 'bottom'
-        }),
-        position = _ref.position,
-        top = _ref.top;
-      if (_this.listRefInstance) {
-        _this.listRefInstance.style.top = "".concat(top, "px");
-        // listElement doesn't have its width set until after updating the position
-        // which means the popover service won't know about the correct width
-        // however, we already know where to position the element
-        _this.listRefInstance.style.left = "".concat(comboBoxBounds.left + window.pageXOffset, "px");
-        _this.listRefInstance.style.width = "".concat(comboBoxBounds.width, "px");
-      }
-
-      // Cache for future calls.
-      _this.setState({
-        listElement: listElement,
-        listPosition: position,
-        width: comboBoxBounds.width
-      });
-    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "incrementActiveOptionIndex", function (amount) {
       // If there are no options available, do nothing.
       if (!_this.state.matchingOptions.length) {
         return;
       }
-      _this.setState(function (_ref2) {
-        var activeOptionIndex = _ref2.activeOptionIndex,
-          matchingOptions = _ref2.matchingOptions;
+      _this.setState(function (_ref) {
+        var activeOptionIndex = _ref.activeOptionIndex,
+          matchingOptions = _ref.matchingOptions;
         var nextActiveOptionIndex;
         if (activeOptionIndex < 0) {
           // If this is the beginning of the user's keyboard navigation of the menu, then we'll focus
@@ -229,12 +150,12 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
       _this.onSearchChange('');
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "addCustomOption", function (isContainerBlur, searchValue) {
-      var _this$props = _this.props,
-        isCaseSensitive = _this$props.isCaseSensitive,
-        onCreateOption = _this$props.onCreateOption,
-        options = _this$props.options,
-        selectedOptions = _this$props.selectedOptions,
-        singleSelection = _this$props.singleSelection;
+      var _this$props2 = _this.props,
+        isCaseSensitive = _this$props2.isCaseSensitive,
+        onCreateOption = _this$props2.onCreateOption,
+        options = _this$props2.options,
+        selectedOptions = _this$props2.selectedOptions,
+        singleSelection = _this$props2.singleSelection;
       var matchingOptions = _this.state.matchingOptions;
       if (_this.doesSearchMatchOnlyOption()) {
         _this.onAddOption(matchingOptions[0], isContainerBlur);
@@ -281,11 +202,11 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
       return normalizedSearchSubject === normalizedSearchValue;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "areAllOptionsSelected", function () {
-      var _this$props2 = _this.props,
-        options = _this$props2.options,
-        selectedOptions = _this$props2.selectedOptions,
-        async = _this$props2.async,
-        isCaseSensitive = _this$props2.isCaseSensitive;
+      var _this$props3 = _this.props,
+        options = _this$props3.options,
+        selectedOptions = _this$props3.selectedOptions,
+        async = _this$props3.async,
+        isCaseSensitive = _this$props3.isCaseSensitive;
       // Assume if this is async then there could be infinite options.
       if (async) {
         return false;
@@ -296,8 +217,8 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
         });
       });
       var numberOfSelectedOptions = 0;
-      selectedOptions.forEach(function (_ref3) {
-        var label = _ref3.label;
+      selectedOptions.forEach(function (_ref2) {
+        var label = _ref2.label;
         var trimmedLabel = (0, _matching_options.transformForCaseSensitivity)(label.trim(), isCaseSensitive);
         if (flattenOptions.findIndex(function (option) {
           return option.label === trimmedLabel;
@@ -306,9 +227,8 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
       return flattenOptions.length === numberOfSelectedOptions;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onComboBoxFocus", function (event) {
-      if (_this.props.onFocus) {
-        _this.props.onFocus(event);
-      }
+      var _this$props$onFocus, _this$props4;
+      (_this$props$onFocus = (_this$props4 = _this.props).onFocus) === null || _this$props$onFocus === void 0 ? void 0 : _this$props$onFocus.call(_this$props4, event);
       _this.openList();
       _this.setState({
         hasFocus: true
@@ -331,10 +251,9 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
       var focusedInOptionsList = relatedTarget && _this.listRefInstance && _this.listRefInstance.contains(relatedTarget);
       var focusedInInput = relatedTarget && _this.comboBoxRefInstance && _this.comboBoxRefInstance.contains(relatedTarget);
       if (!focusedInOptionsList && !focusedInInput) {
+        var _this$props$onBlur, _this$props5;
+        (_this$props$onBlur = (_this$props5 = _this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props5, event);
         _this.closeList();
-        if (_this.props.onBlur) {
-          _this.props.onBlur(event);
-        }
         _this.setState({
           hasFocus: false
         });
@@ -357,7 +276,9 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onKeyDown", function (event) {
+      var _this$props$onKeyDown, _this$props6;
       if (_this.props.isDisabled) return;
+      event.persist(); // TODO: Remove once React 16 support is dropped
       switch (event.key) {
         case _services.keys.ARROW_UP:
           event.preventDefault();
@@ -401,9 +322,7 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
           }
           break;
         default:
-          if (_this.props.onKeyDown) {
-            _this.props.onKeyDown(event);
-          }
+          (_this$props$onKeyDown = (_this$props6 = _this.props).onKeyDown) === null || _this$props$onKeyDown === void 0 ? void 0 : _this$props$onKeyDown.call(_this$props6, event);
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onOptionEnterKey", function (option) {
@@ -416,21 +335,18 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
       if (addedOption.disabled) {
         return;
       }
-      var _this$props3 = _this.props,
-        onChange = _this$props3.onChange,
-        selectedOptions = _this$props3.selectedOptions,
-        singleSelectionProp = _this$props3.singleSelection;
+      var _this$props7 = _this.props,
+        onChange = _this$props7.onChange,
+        selectedOptions = _this$props7.selectedOptions,
+        singleSelectionProp = _this$props7.singleSelection;
       var singleSelection = Boolean(singleSelectionProp);
       var changeOptions = singleSelection ? [addedOption] : selectedOptions.concat(addedOption);
-      if (onChange) {
-        onChange(changeOptions);
-      }
+      onChange === null || onChange === void 0 ? void 0 : onChange(changeOptions);
       _this.clearSearchValue();
       _this.clearActiveOption();
       if (!isContainerBlur) {
-        if (_this.searchInputRefInstance) {
-          _this.searchInputRefInstance.focus();
-        }
+        var _this$searchInputRefI2;
+        (_this$searchInputRefI2 = _this.searchInputRefInstance) === null || _this$searchInputRefI2 === void 0 ? void 0 : _this$searchInputRefI2.focus();
       }
       if (singleSelection) {
         requestAnimationFrame(function () {
@@ -443,36 +359,29 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onRemoveOption", function (removedOption) {
-      var _this$props4 = _this.props,
-        onChange = _this$props4.onChange,
-        selectedOptions = _this$props4.selectedOptions;
-      if (onChange) {
-        onChange(selectedOptions.filter(function (option) {
-          return option !== removedOption;
-        }));
-      }
+      var _this$props8 = _this.props,
+        onChange = _this$props8.onChange,
+        selectedOptions = _this$props8.selectedOptions;
+      onChange === null || onChange === void 0 ? void 0 : onChange(selectedOptions.filter(function (option) {
+        return option !== removedOption;
+      }));
       _this.clearActiveOption();
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "clearSelectedOptions", function () {
-      var onChange = _this.props.onChange;
-      if (onChange) {
-        onChange([]);
-      }
+      var _this$props$onChange, _this$props9, _this$searchInputRefI3;
+      (_this$props$onChange = (_this$props9 = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props9, []);
 
       // Clicking the clear button will also cause it to disappear. This would result in focus
       // shifting unexpectedly to the body element so we set it to the input which is more reasonable,
-      if (_this.searchInputRefInstance) {
-        _this.searchInputRefInstance.focus();
-      }
+      (_this$searchInputRefI3 = _this.searchInputRefInstance) === null || _this$searchInputRefI3 === void 0 ? void 0 : _this$searchInputRefI3.focus();
       if (!_this.state.isListOpen) {
         _this.openList();
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onComboBoxClick", function () {
+      var _this$searchInputRefI4;
       // When the user clicks anywhere on the box, enter the interaction state.
-      if (_this.searchInputRefInstance) {
-        _this.searchInputRefInstance.focus();
-      }
+      (_this$searchInputRefI4 = _this.searchInputRefInstance) === null || _this$searchInputRefI4 === void 0 ? void 0 : _this$searchInputRefI4.focus();
 
       // If the user does this from a state in which an option has focus, then we need to reset it or clear it.
       if (Boolean(_this.props.singleSelection) && _this.props.selectedOptions.length === 1) {
@@ -487,25 +396,20 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onOpenListClick", function () {
-      if (_this.searchInputRefInstance) {
-        _this.searchInputRefInstance.focus();
-      }
+      var _this$searchInputRefI5;
+      (_this$searchInputRefI5 = _this.searchInputRefInstance) === null || _this$searchInputRefI5 === void 0 ? void 0 : _this$searchInputRefI5.focus();
       if (!_this.state.isListOpen) {
         _this.openList();
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onOptionListScroll", function () {
-      if (_this.searchInputRefInstance) {
-        _this.searchInputRefInstance.focus();
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onCloseListClick", function () {
-      _this.closeList();
+      var _this$searchInputRefI6;
+      (_this$searchInputRefI6 = _this.searchInputRefInstance) === null || _this$searchInputRefI6 === void 0 ? void 0 : _this$searchInputRefI6.focus();
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSearchChange", function (searchValue) {
-      var _this$props5 = _this.props,
-        onSearchChange = _this$props5.onSearchChange,
-        delimiter = _this$props5.delimiter;
+      var _this$props10 = _this.props,
+        onSearchChange = _this$props10.onSearchChange,
+        delimiter = _this$props10.delimiter;
       if (onSearchChange) {
         var _hasMatchingOptions = _this.state.matchingOptions.length > 0;
         onSearchChange(searchValue, _hasMatchingOptions);
@@ -519,126 +423,53 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
         _this.setCustomOptions(false);
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateMatchingOptionsIfDifferent", function (newMatchingOptions) {
-      var _this$state = _this.state,
-        matchingOptions = _this$state.matchingOptions,
-        activeOptionIndex = _this$state.activeOptionIndex;
-      var _this$props6 = _this.props,
-        singleSelection = _this$props6.singleSelection,
-        selectedOptions = _this$props6.selectedOptions;
-      var areOptionsDifferent = false;
-      if (matchingOptions.length !== newMatchingOptions.length) {
-        areOptionsDifferent = true;
-      } else {
-        for (var i = 0; i < matchingOptions.length; i++) {
-          if (matchingOptions[i].label !== newMatchingOptions[i].label) {
-            areOptionsDifferent = true;
-            break;
-          }
-        }
-      }
-      if (areOptionsDifferent) {
-        _this.optionsRefInstances = [];
-        var nextActiveOptionIndex = activeOptionIndex;
-        // ensure that the currently selected single option is active if it is in the matchingOptions
-        if (Boolean(singleSelection) && selectedOptions.length === 1) {
-          if (newMatchingOptions.includes(selectedOptions[0])) {
-            nextActiveOptionIndex = newMatchingOptions.indexOf(selectedOptions[0]);
-          }
-        }
-        _this.setState({
-          matchingOptions: newMatchingOptions,
-          activeOptionIndex: nextActiveOptionIndex
-        });
-        if (!newMatchingOptions.length) {
-          // Prevent endless setState -> componentWillUpdate -> setState loop.
-          if (_this.hasActiveOption()) {
-            _this.clearActiveOption();
-          }
-        }
-      }
-    });
     return _this;
   }
   (0, _createClass2.default)(EuiComboBox, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this._isMounted = true;
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      var _this$props7 = this.props,
-        options = _this$props7.options,
-        selectedOptions = _this$props7.selectedOptions,
-        singleSelection = _this$props7.singleSelection,
-        sortMatchesBy = _this$props7.sortMatchesBy;
-      var searchValue = this.state.searchValue;
-
-      // React 16.3 has a bug (fixed in 16.4) where getDerivedStateFromProps
-      // isn't called after a state change, and we track `searchValue` in state
-      // instead we need to react to a change in searchValue here
-      this.updateMatchingOptionsIfDifferent((0, _matching_options.getMatchingOptions)({
-        options: options,
-        selectedOptions: selectedOptions,
-        searchValue: searchValue,
-        isCaseSensitive: this.props.isCaseSensitive,
-        isPreFiltered: this.props.async,
-        showPrevSelected: Boolean(singleSelection),
-        sortMatchesBy: sortMatchesBy
-      }));
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this._isMounted = false;
-    }
-  }, {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _this$props8 = this.props,
-        dataTestSubj = _this$props8['data-test-subj'],
-        async = _this$props8.async,
-        className = _this$props8.className,
-        compressed = _this$props8.compressed,
-        customOptionText = _this$props8.customOptionText,
-        fullWidth = _this$props8.fullWidth,
-        id = _this$props8.id,
-        inputRef = _this$props8.inputRef,
-        isCaseSensitive = _this$props8.isCaseSensitive,
-        isClearable = _this$props8.isClearable,
-        isDisabled = _this$props8.isDisabled,
-        isInvalid = _this$props8.isInvalid,
-        isLoading = _this$props8.isLoading,
-        noSuggestions = _this$props8.noSuggestions,
-        onBlur = _this$props8.onBlur,
-        onChange = _this$props8.onChange,
-        onCreateOption = _this$props8.onCreateOption,
-        onSearchChange = _this$props8.onSearchChange,
-        options = _this$props8.options,
-        placeholder = _this$props8.placeholder,
-        renderOption = _this$props8.renderOption,
-        rowHeight = _this$props8.rowHeight,
-        selectedOptions = _this$props8.selectedOptions,
-        singleSelection = _this$props8.singleSelection,
-        prepend = _this$props8.prepend,
-        sortMatchesBy = _this$props8.sortMatchesBy,
-        delimiter = _this$props8.delimiter,
-        append = _this$props8.append,
-        autoFocus = _this$props8.autoFocus,
-        truncationProps = _this$props8.truncationProps,
-        ariaLabel = _this$props8['aria-label'],
-        ariaLabelledby = _this$props8['aria-labelledby'],
-        rest = (0, _objectWithoutProperties2.default)(_this$props8, _excluded);
-      var _this$state2 = this.state,
-        activeOptionIndex = _this$state2.activeOptionIndex,
-        hasFocus = _this$state2.hasFocus,
-        isListOpen = _this$state2.isListOpen,
-        listPosition = _this$state2.listPosition,
-        searchValue = _this$state2.searchValue,
-        width = _this$state2.width,
-        matchingOptions = _this$state2.matchingOptions;
+      var _this$props11 = this.props,
+        dataTestSubj = _this$props11['data-test-subj'],
+        async = _this$props11.async,
+        className = _this$props11.className,
+        compressed = _this$props11.compressed,
+        customOptionText = _this$props11.customOptionText,
+        fullWidth = _this$props11.fullWidth,
+        id = _this$props11.id,
+        inputRef = _this$props11.inputRef,
+        isCaseSensitive = _this$props11.isCaseSensitive,
+        isClearable = _this$props11.isClearable,
+        isDisabled = _this$props11.isDisabled,
+        isInvalid = _this$props11.isInvalid,
+        isLoading = _this$props11.isLoading,
+        noSuggestions = _this$props11.noSuggestions,
+        onBlur = _this$props11.onBlur,
+        onChange = _this$props11.onChange,
+        onCreateOption = _this$props11.onCreateOption,
+        onSearchChange = _this$props11.onSearchChange,
+        options = _this$props11.options,
+        placeholder = _this$props11.placeholder,
+        renderOption = _this$props11.renderOption,
+        rowHeight = _this$props11.rowHeight,
+        selectedOptions = _this$props11.selectedOptions,
+        singleSelection = _this$props11.singleSelection,
+        prepend = _this$props11.prepend,
+        sortMatchesBy = _this$props11.sortMatchesBy,
+        delimiter = _this$props11.delimiter,
+        append = _this$props11.append,
+        autoFocus = _this$props11.autoFocus,
+        truncationProps = _this$props11.truncationProps,
+        inputPopoverProps = _this$props11.inputPopoverProps,
+        ariaLabel = _this$props11['aria-label'],
+        ariaLabelledby = _this$props11['aria-labelledby'],
+        rest = (0, _objectWithoutProperties2.default)(_this$props11, _excluded);
+      var _this$state = this.state,
+        activeOptionIndex = _this$state.activeOptionIndex,
+        hasFocus = _this$state.hasFocus,
+        isListOpen = _this$state.isListOpen,
+        searchValue = _this$state.searchValue,
+        matchingOptions = _this$state.matchingOptions;
 
       // Make sure we have a valid ID if users don't pass one as a prop
       var inputId = id !== null && id !== void 0 ? id : this.rootId('_eui-combobox-id');
@@ -662,12 +493,11 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
       var optionsList;
       if (!noSuggestions && isListOpen) {
         var optionsListDataTestSubj = dataTestSubj ? "".concat(dataTestSubj, "-optionsList") : undefined;
-        optionsList = (0, _react2.jsx)(_portal.EuiPortal, null, (0, _react2.jsx)(_i18n.EuiI18n, {
+        optionsList = (0, _react2.jsx)(_i18n.EuiI18n, {
           token: "euiComboBox.listboxAriaLabel",
           default: "Choose from the following options"
         }, function (listboxAriaLabel) {
           return (0, _react2.jsx)(_combo_box_options_list.EuiComboBoxOptionsList, {
-            zIndex: _this2.state.listZIndex,
             activeOptionIndex: _this2.state.activeOptionIndex,
             areAllOptionsSelected: _this2.areAllOptionsSelected(),
             customOptionText: customOptionText,
@@ -682,9 +512,7 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
             onOptionClick: _this2.onOptionClick,
             onOptionEnterKey: _this2.onOptionEnterKey,
             onScroll: _this2.onOptionListScroll,
-            optionRef: _this2.optionRefCallback,
             options: options,
-            position: listPosition,
             singleSelection: singleSelection,
             renderOption: renderOption,
             rootId: _this2.rootId,
@@ -692,14 +520,12 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
             scrollToIndex: activeOptionIndex,
             searchValue: searchValue,
             selectedOptions: selectedOptions,
-            updatePosition: _this2.updatePosition,
-            width: width,
             delimiter: delimiter,
             getSelectedOptionForSearchValue: _matching_options.getSelectedOptionForSearchValue,
             listboxAriaLabel: listboxAriaLabel,
             truncationProps: truncationProps
           });
-        }));
+        });
       }
       return (
         /**
@@ -715,39 +541,46 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
           onKeyDown: this.onKeyDown,
           onBlur: this.onContainerBlur,
           ref: this.comboBoxRefCallback
-        }), (0, _react2.jsx)(_combo_box_input.EuiComboBoxInput, {
-          compressed: compressed,
-          focusedOptionId: this.hasActiveOption() ? this.rootId("_option-".concat(this.state.activeOptionIndex)) : undefined,
+        }), (0, _react2.jsx)(_popover.EuiInputPopover, (0, _extends2.default)({
           fullWidth: fullWidth,
-          hasSelectedOptions: selectedOptions.length > 0,
-          id: inputId,
-          inputRef: this.searchInputRefCallback,
-          isDisabled: isDisabled,
-          isListOpen: isListOpen,
-          noIcon: !!noSuggestions,
-          onChange: this.onSearchChange,
-          onClear: isClearable && !isDisabled ? this.clearSelectedOptions : undefined,
-          onClick: this.onComboBoxClick,
-          onCloseListClick: this.onCloseListClick,
-          onFocus: this.onComboBoxFocus,
-          onOpenListClick: this.onOpenListClick,
-          onRemoveOption: this.onRemoveOption,
-          placeholder: placeholder,
-          rootId: this.rootId,
-          searchValue: searchValue,
-          selectedOptions: selectedOptions,
-          singleSelection: singleSelection,
-          toggleButtonRef: this.toggleButtonRefCallback,
-          updatePosition: this.updatePosition,
-          value: value,
-          append: singleSelection ? append : undefined,
-          prepend: singleSelection ? prepend : undefined,
-          isLoading: isLoading,
-          isInvalid: markAsInvalid,
-          autoFocus: autoFocus,
-          "aria-label": ariaLabel,
-          "aria-labelledby": ariaLabelledby
-        }), optionsList)
+          panelPaddingSize: "none",
+          disableFocusTrap: true,
+          closeOnScroll: true
+        }, inputPopoverProps, {
+          isOpen: isListOpen,
+          closePopover: this.closeList,
+          input: (0, _react2.jsx)(_combo_box_input.EuiComboBoxInput, {
+            compressed: compressed,
+            focusedOptionId: this.hasActiveOption() ? this.rootId("_option-".concat(this.state.activeOptionIndex)) : undefined,
+            fullWidth: fullWidth,
+            hasSelectedOptions: selectedOptions.length > 0,
+            id: inputId,
+            inputRef: this.searchInputRefCallback,
+            isDisabled: isDisabled,
+            isListOpen: isListOpen,
+            noIcon: !!noSuggestions,
+            onChange: this.onSearchChange,
+            onClear: isClearable && !isDisabled ? this.clearSelectedOptions : undefined,
+            onClick: this.onComboBoxClick,
+            onCloseListClick: this.closeList,
+            onFocus: this.onComboBoxFocus,
+            onOpenListClick: this.onOpenListClick,
+            onRemoveOption: this.onRemoveOption,
+            placeholder: placeholder,
+            rootId: this.rootId,
+            searchValue: searchValue,
+            selectedOptions: selectedOptions,
+            singleSelection: singleSelection,
+            value: value,
+            append: singleSelection ? append : undefined,
+            prepend: singleSelection ? prepend : undefined,
+            isLoading: isLoading,
+            isInvalid: markAsInvalid,
+            autoFocus: autoFocus,
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledby
+          })
+        }), optionsList))
       );
     }
   }], [{