@elastic/eui 88.5.2 → 88.5.4

package/lib/components/combo_box/combo_box_input/combo_box_input.js

@@ -111,56 +111,51 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
         }
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "inputOnChange", function (event) {
-      var _this$props$onChange, _this$props3;
-      var value = event.target.value;
-      _this.updateInputSize(value);
-      (_this$props$onChange = (_this$props3 = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props3, value);
-    });
     return _this;
   }
   _createClass(EuiComboBoxInput, [{
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var searchValue = prevProps.searchValue;
+      if (prevProps.searchValue !== this.props.searchValue) {
+        this.updateInputSize(this.props.searchValue);
 
-      // We need to update the position of everything if the user enters enough input to change
-      // the size of the input.
-      if (searchValue !== this.props.searchValue) {
+        // We need to update the position of everything if the user enters enough input to change
+        // the size of the input.
         this.updatePosition();
       }
     }
   }, {
     key: "render",
     value: function render() {
-      var _this$props4 = this.props,
-        compressed = _this$props4.compressed,
-        focusedOptionId = _this$props4.focusedOptionId,
-        fullWidth = _this$props4.fullWidth,
-        hasSelectedOptions = _this$props4.hasSelectedOptions,
-        id = _this$props4.id,
-        isDisabled = _this$props4.isDisabled,
-        isListOpen = _this$props4.isListOpen,
-        noIcon = _this$props4.noIcon,
-        onClear = _this$props4.onClear,
-        onClick = _this$props4.onClick,
-        onCloseListClick = _this$props4.onCloseListClick,
-        onOpenListClick = _this$props4.onOpenListClick,
-        onRemoveOption = _this$props4.onRemoveOption,
-        placeholder = _this$props4.placeholder,
-        rootId = _this$props4.rootId,
-        searchValue = _this$props4.searchValue,
-        selectedOptions = _this$props4.selectedOptions,
-        singleSelectionProp = _this$props4.singleSelection,
-        toggleButtonRef = _this$props4.toggleButtonRef,
-        value = _this$props4.value,
-        prepend = _this$props4.prepend,
-        append = _this$props4.append,
-        isLoading = _this$props4.isLoading,
-        isInvalid = _this$props4.isInvalid,
-        autoFocus = _this$props4.autoFocus,
-        ariaLabel = _this$props4['aria-label'],
-        ariaLabelledby = _this$props4['aria-labelledby'];
+      var _this$props3 = this.props,
+        compressed = _this$props3.compressed,
+        focusedOptionId = _this$props3.focusedOptionId,
+        fullWidth = _this$props3.fullWidth,
+        hasSelectedOptions = _this$props3.hasSelectedOptions,
+        id = _this$props3.id,
+        isDisabled = _this$props3.isDisabled,
+        isListOpen = _this$props3.isListOpen,
+        noIcon = _this$props3.noIcon,
+        _onChange = _this$props3.onChange,
+        onClear = _this$props3.onClear,
+        onClick = _this$props3.onClick,
+        onCloseListClick = _this$props3.onCloseListClick,
+        onOpenListClick = _this$props3.onOpenListClick,
+        onRemoveOption = _this$props3.onRemoveOption,
+        placeholder = _this$props3.placeholder,
+        rootId = _this$props3.rootId,
+        searchValue = _this$props3.searchValue,
+        selectedOptions = _this$props3.selectedOptions,
+        singleSelectionProp = _this$props3.singleSelection,
+        toggleButtonRef = _this$props3.toggleButtonRef,
+        value = _this$props3.value,
+        prepend = _this$props3.prepend,
+        append = _this$props3.append,
+        isLoading = _this$props3.isLoading,
+        isInvalid = _this$props3.isInvalid,
+        autoFocus = _this$props3.autoFocus,
+        ariaLabel = _this$props3['aria-label'],
+        ariaLabelledby = _this$props3['aria-labelledby'];
       var singleSelection = Boolean(singleSelectionProp);
       var asPlainText = singleSelectionProp && _typeof(singleSelectionProp) === 'object' && singleSelectionProp.asPlainText || false;
       var pills = selectedOptions ? selectedOptions.map(function (option) {
@@ -265,7 +260,9 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
         disabled: isDisabled,
         id: id,
         onBlur: this.onBlur,
-        onChange: this.inputOnChange,
+        onChange: function onChange(event) {
+          return _onChange(event.target.value);
+        },
         onFocus: this.onFocus,
         onKeyDown: this.onKeyDown,
         ref: this.inputRefCallback,
@@ -292,9 +289,9 @@ EuiComboBoxInput.propTypes = {
   isListOpen: _propTypes.default.bool.isRequired,
   noIcon: _propTypes.default.bool.isRequired,
   onBlur: _propTypes.default.any,
-  onChange: _propTypes.default.func,
+  onChange: _propTypes.default.func.isRequired,
   onClear: _propTypes.default.func,
-  onClick: _propTypes.default.func,
+  onClick: _propTypes.default.func.isRequired,
   onCloseListClick: _propTypes.default.func.isRequired,
   onFocus: _propTypes.default.any.isRequired,
   onOpenListClick: _propTypes.default.func.isRequired,

package/lib/components/popover/input_popover.js

@@ -7,16 +7,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.EuiInputPopover = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react2 = require("@emotion/react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _tabbable = require("tabbable");
-var _focus_trap = require("../focus_trap");
-var _popover = require("./popover");
-var _resize_observer = require("../observer/resize_observer");
+var _global_styling = require("../../global_styling");
 var _services = require("../../services");
+var _resize_observer = require("../observer/resize_observer");
+var _focus_trap = require("../focus_trap");
 var _form = require("../form/form.styles");
-var _react2 = require("@emotion/react");
-var _global_styling = require("../../global_styling");
-var _excluded = ["children", "className", "disableFocusTrap", "focusTrapProps", "input", "fullWidth", "panelMinWidth", "onPanelResize", "inputRef", "panelRef"];
+var _popover = require("./popover");
+var _excluded = ["children", "className", "closePopover", "disableFocusTrap", "focusTrapProps", "input", "fullWidth", "panelMinWidth", "onPanelResize", "inputRef", "panelRef"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -28,6 +28,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -37,8 +42,10 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var EuiInputPopover = function EuiInputPopover(_ref) {
+  var _props$panelProps;
   var children = _ref.children,
     className = _ref.className,
+    closePopover = _ref.closePopover,
     _ref$disableFocusTrap = _ref.disableFocusTrap,
     disableFocusTrap = _ref$disableFocusTrap === void 0 ? false : _ref$disableFocusTrap,
     focusTrapProps = _ref.focusTrapProps,
@@ -51,80 +58,92 @@ var EuiInputPopover = function EuiInputPopover(_ref) {
     _inputRef = _ref.inputRef,
     _panelRef = _ref.panelRef,
     props = _objectWithoutProperties(_ref, _excluded);
-  var euiThemeContext = (0, _services.useEuiTheme)();
+  var classes = (0, _classnames.default)('euiInputPopover', className);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var form = (0, _form.euiFormVariables)(euiTheme);
+
+  /**
+   * Ref setup
+   */
+
+  var popoverClassRef = (0, _react.useRef)(null);
+  // The inputEl state ensures that width is correctly tracked on initial load
   var _useState = (0, _react.useState)(null),
     _useState2 = _slicedToArray(_useState, 2),
     inputEl = _useState2[0],
     setInputEl = _useState2[1];
-  var _useState3 = (0, _react.useState)(),
+  // The panelEl state ensures that width is correctly set every time the popover opens
+  var _useState3 = (0, _react.useState)(null),
     _useState4 = _slicedToArray(_useState3, 2),
-    inputElWidth = _useState4[0],
-    setInputElWidth = _useState4[1];
-  var _useState5 = (0, _react.useState)(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    panelEl = _useState6[0],
-    setPanelEl = _useState6[1];
-  var popoverClassRef = (0, _react.useRef)(null);
+    panelEl = _useState4[0],
+    setPanelEl = _useState4[1];
   var inputRef = (0, _services.useCombinedRefs)([setInputEl, _inputRef]);
   var panelRef = (0, _services.useCombinedRefs)([setPanelEl, _panelRef]);
-  var setPanelWidth = (0, _react.useCallback)(function (width) {
-    if (panelEl && (!!inputElWidth || !!width)) {
-      var newWidth = !!width ? width : inputElWidth;
-      var widthToSet = newWidth && newWidth > panelMinWidth ? newWidth : panelMinWidth;
-      panelEl.style.width = "".concat(widthToSet, "px");
-      onPanelResize === null || onPanelResize === void 0 ? void 0 : onPanelResize(widthToSet);
+
+  /**
+   * Sizing/width logic
+   */
+
+  var inputWidth = (0, _resize_observer.useResizeObserver)(inputEl, 'width').width;
+  var panelWidth = (0, _react.useMemo)(function () {
+    return inputWidth < panelMinWidth ? panelMinWidth : inputWidth;
+  }, [panelMinWidth, inputWidth]);
+  (0, _react.useEffect)(function () {
+    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 = "".concat(panelWidth, "px");
     }
-  }, [panelEl, inputElWidth, onPanelResize, panelMinWidth]);
-  var onResize = (0, _react.useCallback)(function () {
-    if (inputEl) {
+  }, [panelEl, panelWidth]);
+  (0, _react.useEffect)(function () {
+    // 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) {
       var _popoverClassRef$curr;
-      var _width = inputEl.getBoundingClientRect().width;
-      setInputElWidth(_width);
-      setPanelWidth(_width);
       (_popoverClassRef$curr = popoverClassRef.current) === null || _popoverClassRef$curr === void 0 ? void 0 : _popoverClassRef$curr.positionPopoverFluid();
     }
-  }, [inputEl, setPanelWidth]);
-  (0, _react.useEffect)(function () {
-    onResize();
-  }, [onResize]);
-  (0, _react.useEffect)(function () {
-    setPanelWidth();
-  }, [setPanelWidth]);
-  var onKeyDown = function onKeyDown(event) {
-    if (panelEl && event.key === _services.cascadingMenuKeys.TAB) {
-      var tabbableItems = (0, _tabbable.tabbable)(panelEl).filter(function (el) {
-        return Array.from(el.attributes).map(function (el) {
-          return el.name;
-        }).indexOf('data-focus-guard') < 0;
-      });
-      if (disableFocusTrap || tabbableItems.length && tabbableItems[tabbableItems.length - 1] === document.activeElement) {
-        props.closePopover();
+  }, [inputWidth, panelEl]);
+
+  /**
+   * Popover tab to close logic
+   */
+
+  var panelPropsOnKeyDown = (_props$panelProps = props.panelProps) === null || _props$panelProps === void 0 ? void 0 : _props$panelProps.onKeyDown;
+  var onKeyDown = (0, _react.useCallback)(function (event) {
+    panelPropsOnKeyDown === null || panelPropsOnKeyDown === void 0 ? void 0 : panelPropsOnKeyDown(event);
+    if (event.key === _services.keys.TAB) {
+      if (disableFocusTrap) {
+        closePopover();
+      } else {
+        var tabbableItems = (0, _tabbable.tabbable)(event.currentTarget).filter(function (el) {
+          return !el.hasAttribute('data-focus-guard');
+        });
+        if (!tabbableItems.length) return;
+        var tabbingFromLastItemInPopover = document.activeElement === tabbableItems[tabbableItems.length - 1];
+        if (tabbingFromLastItemInPopover) {
+          closePopover();
+        }
       }
     }
-  };
-  var classes = (0, _classnames.default)('euiInputPopover', className);
-  var form = (0, _form.euiFormVariables)(euiThemeContext);
+  }, [disableFocusTrap, closePopover, panelPropsOnKeyDown]);
   return (0, _react2.jsx)(_popover.EuiPopover, _extends({
     css: /*#__PURE__*/(0, _react2.css)(fullWidth ? undefined : (0, _global_styling.logicalCSS)('max-width', form.maxWidth), ";label:EuiInputPopover;"),
     repositionToCrossAxis: false,
     ownFocus: false,
-    button: (0, _react2.jsx)(_resize_observer.EuiResizeObserver, {
-      onResize: onResize
-    }, function (resizeRef) {
-      return (0, _react2.jsx)("div", {
-        ref: resizeRef
-      }, input);
-    }),
+    button: input,
     buttonRef: inputRef,
     panelRef: panelRef,
     className: classes,
-    ref: popoverClassRef
-  }, props), (0, _react2.jsx)(_focus_trap.EuiFocusTrap, _extends({
+    ref: popoverClassRef,
+    closePopover: closePopover
+  }, props, {
+    panelProps: _objectSpread(_objectSpread({}, props.panelProps), {}, {
+      onKeyDown: onKeyDown
+    })
+  }), (0, _react2.jsx)(_focus_trap.EuiFocusTrap, _extends({
     clickOutsideDisables: true,
     disabled: disableFocusTrap
-  }, focusTrapProps), (0, _react2.jsx)("div", {
-    onKeyDown: onKeyDown
-  }, children)));
+  }, focusTrapProps), children));
 };
 exports.EuiInputPopover = EuiInputPopover;
 EuiInputPopover.propTypes = {

package/lib/components/text_truncate/text_truncate.js

@@ -13,7 +13,7 @@ var _resize_observer = require("../observer/resize_observer");
 var _utils = require("./utils");
 var _text_truncate = require("./text_truncate.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["width"],
+var _excluded = ["width", "onResize"],
   _excluded2 = ["width", "children", "text", "truncation", "truncationOffset", "truncationPosition", "ellipsis", "containerRef", "className"],
   _excluded3 = ["onResize"];
 /*
@@ -38,10 +38,13 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var TRUNCATION_TYPES = ['end', 'start', 'startEnd', 'middle'];
 var EuiTextTruncate = function EuiTextTruncate(_ref) {
   var width = _ref.width,
+    onResize = _ref.onResize,
     props = _objectWithoutProperties(_ref, _excluded);
   return width != null ? (0, _react2.jsx)(EuiTextTruncateWithWidth, _extends({
     width: width
-  }, props)) : (0, _react2.jsx)(EuiTextTruncateWithResizeObserver, props);
+  }, props)) : (0, _react2.jsx)(EuiTextTruncateWithResizeObserver, _extends({
+    onResize: onResize
+  }, props));
 };
 exports.EuiTextTruncate = EuiTextTruncate;
 EuiTextTruncate.propTypes = {

package/optimize/es/components/collapsible_nav_beta/collapsible_nav_beta.js

@@ -16,7 +16,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React, { useRef, useMemo, useState, useEffect, useCallback } from 'react';
 import classNames from 'classnames';
-import { useEuiTheme, useGeneratedHtmlId, throttle } from '../../services';
+import { useEuiTheme, useEuiThemeCSSVariables, useGeneratedHtmlId, throttle } from '../../services';
 import { EuiFlyout } from '../flyout';
 import { useEuiI18n } from '../i18n';
 import { euiHeaderVariables } from '../header/header.styles';
@@ -36,6 +36,8 @@ var _EuiCollapsibleNavBeta = function _EuiCollapsibleNavBeta(_ref) {
     side = _ref$side === void 0 ? 'left' : _ref$side,
     _focusTrapProps = _ref.focusTrapProps,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var _useEuiThemeCSSVariab = useEuiThemeCSSVariables(),
+    setGlobalCSSVariables = _useEuiThemeCSSVariab.setGlobalCSSVariables;
   var euiTheme = useEuiTheme();
   var headerHeight = euiHeaderVariables(euiTheme).height;
 
@@ -94,9 +96,17 @@ var _EuiCollapsibleNavBeta = function _EuiCollapsibleNavBeta(_ref) {
   var width = useMemo(function () {
     if (isOverlayFullWidth) return '100%';
     if (isPush && isCollapsed) return headerHeight;
-    return _width;
+    return "".concat(_width, "px");
   }, [_width, isOverlayFullWidth, isPush, isCollapsed, headerHeight]);
 
+  // Other UI elements may need to account for the nav width -
+  // set a global CSS variable that they can use
+  useEffect(function () {
+    setGlobalCSSVariables({
+      '--euiCollapsibleNavOffset': isOverlay ? '0' : width
+    });
+  }, [width, isOverlay, setGlobalCSSVariables]);
+
   /**
    * Prop setup
    */

package/optimize/es/components/combo_box/combo_box_input/combo_box_input.js

@@ -98,56 +98,51 @@ export var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
         }
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "inputOnChange", function (event) {
-      var _this$props$onChange, _this$props3;
-      var value = event.target.value;
-      _this.updateInputSize(value);
-      (_this$props$onChange = (_this$props3 = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props3, value);
-    });
     return _this;
   }
   _createClass(EuiComboBoxInput, [{
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var searchValue = prevProps.searchValue;
+      if (prevProps.searchValue !== this.props.searchValue) {
+        this.updateInputSize(this.props.searchValue);
 
-      // We need to update the position of everything if the user enters enough input to change
-      // the size of the input.
-      if (searchValue !== this.props.searchValue) {
+        // We need to update the position of everything if the user enters enough input to change
+        // the size of the input.
         this.updatePosition();
       }
     }
   }, {
     key: "render",
     value: function render() {
-      var _this$props4 = this.props,
-        compressed = _this$props4.compressed,
-        focusedOptionId = _this$props4.focusedOptionId,
-        fullWidth = _this$props4.fullWidth,
-        hasSelectedOptions = _this$props4.hasSelectedOptions,
-        id = _this$props4.id,
-        isDisabled = _this$props4.isDisabled,
-        isListOpen = _this$props4.isListOpen,
-        noIcon = _this$props4.noIcon,
-        onClear = _this$props4.onClear,
-        onClick = _this$props4.onClick,
-        onCloseListClick = _this$props4.onCloseListClick,
-        onOpenListClick = _this$props4.onOpenListClick,
-        onRemoveOption = _this$props4.onRemoveOption,
-        placeholder = _this$props4.placeholder,
-        rootId = _this$props4.rootId,
-        searchValue = _this$props4.searchValue,
-        selectedOptions = _this$props4.selectedOptions,
-        singleSelectionProp = _this$props4.singleSelection,
-        toggleButtonRef = _this$props4.toggleButtonRef,
-        value = _this$props4.value,
-        prepend = _this$props4.prepend,
-        append = _this$props4.append,
-        isLoading = _this$props4.isLoading,
-        isInvalid = _this$props4.isInvalid,
-        autoFocus = _this$props4.autoFocus,
-        ariaLabel = _this$props4['aria-label'],
-        ariaLabelledby = _this$props4['aria-labelledby'];
+      var _this$props3 = this.props,
+        compressed = _this$props3.compressed,
+        focusedOptionId = _this$props3.focusedOptionId,
+        fullWidth = _this$props3.fullWidth,
+        hasSelectedOptions = _this$props3.hasSelectedOptions,
+        id = _this$props3.id,
+        isDisabled = _this$props3.isDisabled,
+        isListOpen = _this$props3.isListOpen,
+        noIcon = _this$props3.noIcon,
+        _onChange = _this$props3.onChange,
+        onClear = _this$props3.onClear,
+        onClick = _this$props3.onClick,
+        onCloseListClick = _this$props3.onCloseListClick,
+        onOpenListClick = _this$props3.onOpenListClick,
+        onRemoveOption = _this$props3.onRemoveOption,
+        placeholder = _this$props3.placeholder,
+        rootId = _this$props3.rootId,
+        searchValue = _this$props3.searchValue,
+        selectedOptions = _this$props3.selectedOptions,
+        singleSelectionProp = _this$props3.singleSelection,
+        toggleButtonRef = _this$props3.toggleButtonRef,
+        value = _this$props3.value,
+        prepend = _this$props3.prepend,
+        append = _this$props3.append,
+        isLoading = _this$props3.isLoading,
+        isInvalid = _this$props3.isInvalid,
+        autoFocus = _this$props3.autoFocus,
+        ariaLabel = _this$props3['aria-label'],
+        ariaLabelledby = _this$props3['aria-labelledby'];
       var singleSelection = Boolean(singleSelectionProp);
       var asPlainText = singleSelectionProp && _typeof(singleSelectionProp) === 'object' && singleSelectionProp.asPlainText || false;
       var pills = selectedOptions ? selectedOptions.map(function (option) {
@@ -252,7 +247,9 @@ export var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
         disabled: isDisabled,
         id: id,
         onBlur: this.onBlur,
-        onChange: this.inputOnChange,
+        onChange: function onChange(event) {
+          return _onChange(event.target.value);
+        },
         onFocus: this.onFocus,
         onKeyDown: this.onKeyDown,
         ref: this.inputRefCallback,