@atlaskit/react-select 3.4.2 → 3.4.4

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/react-select
 
+## 3.4.4
+
+### Patch Changes
+
+- [`4129d4df5bb4d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4129d4df5bb4d) -
+  Revert the changes done to add prop hasOtherFocusableElements flag
+
+## 3.4.3
+
+### Patch Changes
+
+- [#200709](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/200709)
+  [`4e4c55892eecf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4e4c55892eecf) -
+  [ux] Prevent input from being cleared from selecting an option with multi-select enabled and fix
+  cursor in search field
+- Updated dependencies
+
 ## 3.4.2
 
 ### Patch Changes

package/async/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/async.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/async.d.ts"
       ]

package/async-creatable/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/async-creatable.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/async-creatable.d.ts"
       ]

package/base/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/select.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/select.d.ts"
       ]

package/creatable/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/creatable.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/creatable.d.ts"
       ]

package/dist/cjs/components/input.compiled.css

@@ -2,6 +2,7 @@
 ._11q7idpf{background:0}
 ._19itidpf{border:0}
 ._1h9u1kw7:after{font:inherit}
+._1r04idpf{inset:0}
 ._ckog1yjy:after{grid-area:1/2}
 ._eq43idpf:after{border:0}
 ._nd5l1sux{grid-area:1/1/2/3}
@@ -19,6 +20,7 @@
 ._1bsb1osq{width:100%}
 ._1doyidpf:after{margin-bottom:0}
 ._1e0c1n7u{display:inline-grid}
+._1e0c1txw{display:flex}
 ._1k96idpf:after{padding-left:0}
 ._1nn4glyw:after{outline-style:none}
 ._1o9zkb7n{flex-shrink:1}
@@ -36,6 +38,8 @@
 ._ca0qidpf{padding-top:0}
 ._i0dl1wug{flex-basis:auto}
 ._j8d6idpf:after{margin-top:0}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
 ._n3tdidpf{padding-bottom:0}
 ._otyridpf{margin-bottom:0}
 ._pfztidpf:after{margin-left:0}

package/dist/cjs/components/input.js

@@ -13,17 +13,23 @@ var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react2 = require("@compiled/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _utils = require("../utils");
 var _excluded = ["innerRef", "isDisabled", "isHidden", "inputClassName", "testId"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var inputCSS = exports.inputCSS = function inputCSS() {
   return {};
 };
-var inputStyles = {
+var inputStylesOld = {
   root: "_16jlkb7n _1o9zkb7n _i0dl1wug _nd5l1sux _1mouv77o _195gv77o _1rjcv77o _1e0c1n7u _yv0e12qd _syaz1fxt _j8d6idpf _1av2idpf _1doyidpf _pfztidpf _uoe3idpf _1recidpf _70xridpf _1k96idpf _eq43idpf _1h9u1kw7 _ckog1yjy _1x651r31 _1nn4glyw _1rzeidpf _1yd8yh40 _aetr11ps _uy7x15vq _1qjlqvpr",
   disabled: "_3um015vq"
 };
-var nativeInnputStyles = null;
+var inputStyles = {
+  root: "_16jlkb7n _1o9zkb7n _i0dl1wug _nd5l1sux _1mouv77o _195gv77o _1rjcv77o _kqswh2mm _1e0c1txw _yv0e12qd _syaz1fxt _j8d6idpf _1av2idpf _1doyidpf _pfztidpf _uoe3idpf _1recidpf _70xridpf _1k96idpf _eq43idpf _1h9u1kw7 _ckog1yjy _1x651r31 _1nn4glyw _1rzeidpf _1yd8yh40 _aetr11ps _uy7x15vq _1qjlqvpr",
+  disabled: "_3um015vq"
+};
+var nativeInputStylesOld = null;
+var nativeInputStyles = null;
 var hidden = null;
 var Input = function Input(props) {
   var builtinCX = props.cx,
@@ -42,12 +48,31 @@ var Input = function Input(props) {
     }),
     css = _getStyleProps.css,
     className = _getStyleProps.className;
+  if ((0, _platformFeatureFlags.fg)('platform_do_not_clear_input_for_multiselect')) {
+    return /*#__PURE__*/React.createElement("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      style: css
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
+      ,
+      className: (0, _runtime.ax)([inputStyles.root, isDisabled && inputStyles.disabled, (0, _react2.cx)(className, xcss, '-Input')]),
+      "data-value": value || '',
+      "data-testid": dataId && "".concat(dataId, "-container")
+    }, /*#__PURE__*/React.createElement("input", (0, _extends2.default)({
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+      className: (0, _runtime.ax)(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1r04idpf _11q7idpf _19itidpf _11c81kw7 _nd5l1yjy _12ji1r31 _1qu2glyw _12y3idpf _1bsb1osq _1ul9yh40 _kqswstnw _syaz1kw7 _tzy4kb7n", isHidden && "_tzy4idpf", builtinCX({
+        input: true
+      }, inputClassName, '-input')]),
+      ref: innerRef,
+      disabled: isDisabled,
+      "data-testid": dataId
+    }, innerProps)));
+  }
   return /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     style: css
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
     ,
-    className: (0, _runtime.ax)([inputStyles.root, isDisabled && inputStyles.disabled, (0, _react2.cx)(className, xcss, '-Input')]),
+    className: (0, _runtime.ax)([inputStylesOld.root, isDisabled && inputStylesOld.disabled, (0, _react2.cx)(className, xcss, '-Input')]),
     "data-value": value || '',
     "data-testid": dataId && "".concat(dataId, "-container")
   }, /*#__PURE__*/React.createElement("input", (0, _extends2.default)({

package/dist/cjs/select.js

@@ -52,7 +52,6 @@ var defaultProps = exports.defaultProps = {
   isMulti: false,
   isRtl: false,
   isSearchable: true,
-  hasOtherFocusableElements: false,
   isOptionDisabled: _builtins.isOptionDisabled,
   loadingMessage: function loadingMessage() {
     return 'Loading...';
@@ -258,7 +257,6 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)(_this, "initialTouchY", 0);
     (0, _defineProperty2.default)(_this, "openAfterFocus", false);
     (0, _defineProperty2.default)(_this, "scrollToFocusedOptionOnUpdate", false);
-    (0, _defineProperty2.default)(_this, "lastPressedKey", '');
     // Refs
     // ------------------------------
     (0, _defineProperty2.default)(_this, "controlRef", null);
@@ -293,10 +291,18 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         closeMenuOnSelect = _this$props2.closeMenuOnSelect,
         isMulti = _this$props2.isMulti,
         inputValue = _this$props2.inputValue;
-      _this.onInputChange('', {
-        action: 'set-value',
-        prevInputValue: inputValue
-      });
+      // for multiple selection options, do not clear the search input value
+      if (isMulti && (0, _platformFeatureFlags.fg)('platform_do_not_clear_input_for_multiselect')) {
+        _this.onInputChange(inputValue, {
+          action: 'set-value',
+          prevInputValue: inputValue
+        });
+      } else {
+        _this.onInputChange('', {
+          action: 'set-value',
+          prevInputValue: inputValue
+        });
+      }
       if (closeMenuOnSelect) {
         _this.setState({
           inputIsHiddenAfterUpdate: !isMulti
@@ -632,9 +638,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         return;
       }
       if (_this.props.onBlur) {
-        if (!_this.props.hasOtherFocusableElements || _this.props.hasOtherFocusableElements && _this.lastPressedKey !== 'Tab') {
-          _this.props.onBlur(event);
-        }
+        _this.props.onBlur(event);
       }
       _this.onInputChange('', {
         action: 'input-blur',
@@ -700,9 +704,6 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
           return;
         }
       }
-      if (_this.props.hasOtherFocusableElements) {
-        _this.lastPressedKey = event.key;
-      }
 
       // Block option hover events when the user has just pressed a key
       _this.blockOptionHover = true;
@@ -928,15 +929,11 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
   }, {
     key: "onMenuClose",
     value: function onMenuClose() {
-      if (!this.props.hasOtherFocusableElements || this.props.hasOtherFocusableElements && this.lastPressedKey !== 'Tab') {
-        this.onInputChange('', {
-          action: 'menu-close',
-          prevInputValue: this.props.inputValue
-        });
-        this.props.onMenuClose();
-      } else {
-        this.lastPressedKey = '';
-      }
+      this.onInputChange('', {
+        action: 'menu-close',
+        prevInputValue: this.props.inputValue
+      });
+      this.props.onMenuClose();
     }
   }, {
     key: "onInputChange",

package/dist/es2019/components/input.compiled.css

@@ -2,6 +2,7 @@
 ._11q7idpf{background:0}
 ._19itidpf{border:0}
 ._1h9u1kw7:after{font:inherit}
+._1r04idpf{inset:0}
 ._ckog1yjy:after{grid-area:1/2}
 ._eq43idpf:after{border:0}
 ._nd5l1sux{grid-area:1/1/2/3}
@@ -19,6 +20,7 @@
 ._1bsb1osq{width:100%}
 ._1doyidpf:after{margin-bottom:0}
 ._1e0c1n7u{display:inline-grid}
+._1e0c1txw{display:flex}
 ._1k96idpf:after{padding-left:0}
 ._1nn4glyw:after{outline-style:none}
 ._1o9zkb7n{flex-shrink:1}
@@ -36,6 +38,8 @@
 ._ca0qidpf{padding-top:0}
 ._i0dl1wug{flex-basis:auto}
 ._j8d6idpf:after{margin-top:0}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
 ._n3tdidpf{padding-bottom:0}
 ._otyridpf{margin-bottom:0}
 ._pfztidpf:after{margin-left:0}

package/dist/es2019/components/input.js

@@ -4,13 +4,19 @@ import "./input.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { cx } from '@compiled/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { cleanCommonProps, getStyleProps } from '../utils';
 export const inputCSS = () => ({});
-const inputStyles = {
+const inputStylesOld = {
   root: "_16jlkb7n _1o9zkb7n _i0dl1wug _nd5l1sux _1mouv77o _195gv77o _1rjcv77o _1e0c1n7u _yv0e12qd _syaz1fxt _j8d6idpf _1av2idpf _1doyidpf _pfztidpf _uoe3idpf _1recidpf _70xridpf _1k96idpf _eq43idpf _1h9u1kw7 _ckog1yjy _1x651r31 _1nn4glyw _1rzeidpf _1yd8yh40 _aetr11ps _uy7x15vq _1qjlqvpr",
   disabled: "_3um015vq"
 };
-const nativeInnputStyles = null;
+const inputStyles = {
+  root: "_16jlkb7n _1o9zkb7n _i0dl1wug _nd5l1sux _1mouv77o _195gv77o _1rjcv77o _kqswh2mm _1e0c1txw _yv0e12qd _syaz1fxt _j8d6idpf _1av2idpf _1doyidpf _pfztidpf _uoe3idpf _1recidpf _70xridpf _1k96idpf _eq43idpf _1h9u1kw7 _ckog1yjy _1x651r31 _1nn4glyw _1rzeidpf _1yd8yh40 _aetr11ps _uy7x15vq _1qjlqvpr",
+  disabled: "_3um015vq"
+};
+const nativeInputStylesOld = null;
+const nativeInputStyles = null;
 const hidden = null;
 const Input = props => {
   const {
@@ -33,12 +39,31 @@ const Input = props => {
   } = getStyleProps(props, 'input', {
     'input-container': true
   });
+  if (fg('platform_do_not_clear_input_for_multiselect')) {
+    return /*#__PURE__*/React.createElement("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      style: css
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
+      ,
+      className: ax([inputStyles.root, isDisabled && inputStyles.disabled, cx(className, xcss, '-Input')]),
+      "data-value": value || '',
+      "data-testid": dataId && `${dataId}-container`
+    }, /*#__PURE__*/React.createElement("input", _extends({
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+      className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1r04idpf _11q7idpf _19itidpf _11c81kw7 _nd5l1yjy _12ji1r31 _1qu2glyw _12y3idpf _1bsb1osq _1ul9yh40 _kqswstnw _syaz1kw7 _tzy4kb7n", isHidden && "_tzy4idpf", builtinCX({
+        input: true
+      }, inputClassName, '-input')]),
+      ref: innerRef,
+      disabled: isDisabled,
+      "data-testid": dataId
+    }, innerProps)));
+  }
   return /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     style: css
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
     ,
-    className: ax([inputStyles.root, isDisabled && inputStyles.disabled, cx(className, xcss, '-Input')]),
+    className: ax([inputStylesOld.root, isDisabled && inputStylesOld.disabled, cx(className, xcss, '-Input')]),
     "data-value": value || '',
     "data-testid": dataId && `${dataId}-container`
   }, /*#__PURE__*/React.createElement("input", _extends({

package/dist/es2019/select.js

@@ -31,7 +31,6 @@ export const defaultProps = {
   isMulti: false,
   isRtl: false,
   isSearchable: true,
-  hasOtherFocusableElements: false,
   isOptionDisabled: isOptionDisabledBuiltin,
   loadingMessage: () => 'Loading...',
   maxMenuHeight: 300,
@@ -227,7 +226,6 @@ export default class Select extends Component {
     _defineProperty(this, "initialTouchY", 0);
     _defineProperty(this, "openAfterFocus", false);
     _defineProperty(this, "scrollToFocusedOptionOnUpdate", false);
-    _defineProperty(this, "lastPressedKey", '');
     // Refs
     // ------------------------------
     _defineProperty(this, "controlRef", null);
@@ -264,10 +262,18 @@ export default class Select extends Component {
         isMulti,
         inputValue
       } = this.props;
-      this.onInputChange('', {
-        action: 'set-value',
-        prevInputValue: inputValue
-      });
+      // for multiple selection options, do not clear the search input value
+      if (isMulti && fg('platform_do_not_clear_input_for_multiselect')) {
+        this.onInputChange(inputValue, {
+          action: 'set-value',
+          prevInputValue: inputValue
+        });
+      } else {
+        this.onInputChange('', {
+          action: 'set-value',
+          prevInputValue: inputValue
+        });
+      }
       if (closeMenuOnSelect) {
         this.setState({
           inputIsHiddenAfterUpdate: !isMulti
@@ -605,9 +611,7 @@ export default class Select extends Component {
         return;
       }
       if (this.props.onBlur) {
-        if (!this.props.hasOtherFocusableElements || this.props.hasOtherFocusableElements && this.lastPressedKey !== 'Tab') {
-          this.props.onBlur(event);
-        }
+        this.props.onBlur(event);
       }
       this.onInputChange('', {
         action: 'input-blur',
@@ -675,9 +679,6 @@ export default class Select extends Component {
           return;
         }
       }
-      if (this.props.hasOtherFocusableElements) {
-        this.lastPressedKey = event.key;
-      }
 
       // Block option hover events when the user has just pressed a key
       this.blockOptionHover = true;
@@ -960,15 +961,11 @@ export default class Select extends Component {
     this.props.onMenuOpen();
   }
   onMenuClose() {
-    if (!this.props.hasOtherFocusableElements || this.props.hasOtherFocusableElements && this.lastPressedKey !== 'Tab') {
-      this.onInputChange('', {
-        action: 'menu-close',
-        prevInputValue: this.props.inputValue
-      });
-      this.props.onMenuClose();
-    } else {
-      this.lastPressedKey = '';
-    }
+    this.onInputChange('', {
+      action: 'menu-close',
+      prevInputValue: this.props.inputValue
+    });
+    this.props.onMenuClose();
   }
   onInputChange(newValue, actionMeta) {
     this.props.onInputChange(newValue, actionMeta);

package/dist/esm/components/input.compiled.css

@@ -2,6 +2,7 @@
 ._11q7idpf{background:0}
 ._19itidpf{border:0}
 ._1h9u1kw7:after{font:inherit}
+._1r04idpf{inset:0}
 ._ckog1yjy:after{grid-area:1/2}
 ._eq43idpf:after{border:0}
 ._nd5l1sux{grid-area:1/1/2/3}
@@ -19,6 +20,7 @@
 ._1bsb1osq{width:100%}
 ._1doyidpf:after{margin-bottom:0}
 ._1e0c1n7u{display:inline-grid}
+._1e0c1txw{display:flex}
 ._1k96idpf:after{padding-left:0}
 ._1nn4glyw:after{outline-style:none}
 ._1o9zkb7n{flex-shrink:1}
@@ -36,6 +38,8 @@
 ._ca0qidpf{padding-top:0}
 ._i0dl1wug{flex-basis:auto}
 ._j8d6idpf:after{margin-top:0}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
 ._n3tdidpf{padding-bottom:0}
 ._otyridpf{margin-bottom:0}
 ._pfztidpf:after{margin-left:0}

package/dist/esm/components/input.js

@@ -6,15 +6,21 @@ import "./input.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { cx } from '@compiled/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { cleanCommonProps, getStyleProps } from '../utils';
 export var inputCSS = function inputCSS() {
   return {};
 };
-var inputStyles = {
+var inputStylesOld = {
   root: "_16jlkb7n _1o9zkb7n _i0dl1wug _nd5l1sux _1mouv77o _195gv77o _1rjcv77o _1e0c1n7u _yv0e12qd _syaz1fxt _j8d6idpf _1av2idpf _1doyidpf _pfztidpf _uoe3idpf _1recidpf _70xridpf _1k96idpf _eq43idpf _1h9u1kw7 _ckog1yjy _1x651r31 _1nn4glyw _1rzeidpf _1yd8yh40 _aetr11ps _uy7x15vq _1qjlqvpr",
   disabled: "_3um015vq"
 };
-var nativeInnputStyles = null;
+var inputStyles = {
+  root: "_16jlkb7n _1o9zkb7n _i0dl1wug _nd5l1sux _1mouv77o _195gv77o _1rjcv77o _kqswh2mm _1e0c1txw _yv0e12qd _syaz1fxt _j8d6idpf _1av2idpf _1doyidpf _pfztidpf _uoe3idpf _1recidpf _70xridpf _1k96idpf _eq43idpf _1h9u1kw7 _ckog1yjy _1x651r31 _1nn4glyw _1rzeidpf _1yd8yh40 _aetr11ps _uy7x15vq _1qjlqvpr",
+  disabled: "_3um015vq"
+};
+var nativeInputStylesOld = null;
+var nativeInputStyles = null;
 var hidden = null;
 var Input = function Input(props) {
   var builtinCX = props.cx,
@@ -33,12 +39,31 @@ var Input = function Input(props) {
     }),
     css = _getStyleProps.css,
     className = _getStyleProps.className;
+  if (fg('platform_do_not_clear_input_for_multiselect')) {
+    return /*#__PURE__*/React.createElement("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      style: css
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
+      ,
+      className: ax([inputStyles.root, isDisabled && inputStyles.disabled, cx(className, xcss, '-Input')]),
+      "data-value": value || '',
+      "data-testid": dataId && "".concat(dataId, "-container")
+    }, /*#__PURE__*/React.createElement("input", _extends({
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+      className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1r04idpf _11q7idpf _19itidpf _11c81kw7 _nd5l1yjy _12ji1r31 _1qu2glyw _12y3idpf _1bsb1osq _1ul9yh40 _kqswstnw _syaz1kw7 _tzy4kb7n", isHidden && "_tzy4idpf", builtinCX({
+        input: true
+      }, inputClassName, '-input')]),
+      ref: innerRef,
+      disabled: isDisabled,
+      "data-testid": dataId
+    }, innerProps)));
+  }
   return /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     style: css
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
     ,
-    className: ax([inputStyles.root, isDisabled && inputStyles.disabled, cx(className, xcss, '-Input')]),
+    className: ax([inputStylesOld.root, isDisabled && inputStylesOld.disabled, cx(className, xcss, '-Input')]),
     "data-value": value || '',
     "data-testid": dataId && "".concat(dataId, "-container")
   }, /*#__PURE__*/React.createElement("input", _extends({

package/dist/esm/select.js

@@ -43,7 +43,6 @@ export var defaultProps = {
   isMulti: false,
   isRtl: false,
   isSearchable: true,
-  hasOtherFocusableElements: false,
   isOptionDisabled: isOptionDisabledBuiltin,
   loadingMessage: function loadingMessage() {
     return 'Loading...';
@@ -249,7 +248,6 @@ var Select = /*#__PURE__*/function (_Component) {
     _defineProperty(_this, "initialTouchY", 0);
     _defineProperty(_this, "openAfterFocus", false);
     _defineProperty(_this, "scrollToFocusedOptionOnUpdate", false);
-    _defineProperty(_this, "lastPressedKey", '');
     // Refs
     // ------------------------------
     _defineProperty(_this, "controlRef", null);
@@ -284,10 +282,18 @@ var Select = /*#__PURE__*/function (_Component) {
         closeMenuOnSelect = _this$props2.closeMenuOnSelect,
         isMulti = _this$props2.isMulti,
         inputValue = _this$props2.inputValue;
-      _this.onInputChange('', {
-        action: 'set-value',
-        prevInputValue: inputValue
-      });
+      // for multiple selection options, do not clear the search input value
+      if (isMulti && fg('platform_do_not_clear_input_for_multiselect')) {
+        _this.onInputChange(inputValue, {
+          action: 'set-value',
+          prevInputValue: inputValue
+        });
+      } else {
+        _this.onInputChange('', {
+          action: 'set-value',
+          prevInputValue: inputValue
+        });
+      }
       if (closeMenuOnSelect) {
         _this.setState({
           inputIsHiddenAfterUpdate: !isMulti
@@ -623,9 +629,7 @@ var Select = /*#__PURE__*/function (_Component) {
         return;
       }
       if (_this.props.onBlur) {
-        if (!_this.props.hasOtherFocusableElements || _this.props.hasOtherFocusableElements && _this.lastPressedKey !== 'Tab') {
-          _this.props.onBlur(event);
-        }
+        _this.props.onBlur(event);
       }
       _this.onInputChange('', {
         action: 'input-blur',
@@ -691,9 +695,6 @@ var Select = /*#__PURE__*/function (_Component) {
           return;
         }
       }
-      if (_this.props.hasOtherFocusableElements) {
-        _this.lastPressedKey = event.key;
-      }
 
       // Block option hover events when the user has just pressed a key
       _this.blockOptionHover = true;
@@ -919,15 +920,11 @@ var Select = /*#__PURE__*/function (_Component) {
   }, {
     key: "onMenuClose",
     value: function onMenuClose() {
-      if (!this.props.hasOtherFocusableElements || this.props.hasOtherFocusableElements && this.lastPressedKey !== 'Tab') {
-        this.onInputChange('', {
-          action: 'menu-close',
-          prevInputValue: this.props.inputValue
-        });
-        this.props.onMenuClose();
-      } else {
-        this.lastPressedKey = '';
-      }
+      this.onInputChange('', {
+        action: 'menu-close',
+        prevInputValue: this.props.inputValue
+      });
+      this.props.onMenuClose();
     }
   }, {
     key: "onInputChange",

package/dist/types/select.d.ts

@@ -240,10 +240,6 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
      * Whether to enable search functionality
      */
     isSearchable: boolean;
-    /**
-     * Indicate whether menu contains other focusable elements, like footer or header
-     */
-    hasOtherFocusableElements?: boolean;
     /**
      * This sets the aria-label attribute. It sets an accessible name for the select, for people who use assistive technology. Use of a visible label is highly recommended for greater accessibility support.
      */
@@ -453,7 +449,6 @@ export declare const defaultProps: {
     isMulti: boolean;
     isRtl: boolean;
     isSearchable: boolean;
-    hasOtherFocusableElements: boolean;
     isOptionDisabled: <Option>(option: Option) => boolean;
     loadingMessage: () => string;
     maxMenuHeight: number;
@@ -533,7 +528,6 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
         isMulti: boolean;
         isRtl: boolean;
         isSearchable: boolean;
-        hasOtherFocusableElements: boolean;
         isOptionDisabled: <Option_1>(option: Option_1) => boolean;
         loadingMessage: () => string;
         maxMenuHeight: number;
@@ -566,7 +560,6 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
     openAfterFocus: boolean;
     scrollToFocusedOptionOnUpdate: boolean;
     userIsDragging?: boolean;
-    lastPressedKey?: string;
     controlRef: HTMLDivElement | null;
     getControlRef: RefCallback<HTMLDivElement>;
     focusedOptionRef: HTMLDivElement | null;

package/dist/types-ts4.5/select.d.ts

@@ -240,10 +240,6 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
      * Whether to enable search functionality
      */
     isSearchable: boolean;
-    /**
-     * Indicate whether menu contains other focusable elements, like footer or header
-     */
-    hasOtherFocusableElements?: boolean;
     /**
      * This sets the aria-label attribute. It sets an accessible name for the select, for people who use assistive technology. Use of a visible label is highly recommended for greater accessibility support.
      */
@@ -453,7 +449,6 @@ export declare const defaultProps: {
     isMulti: boolean;
     isRtl: boolean;
     isSearchable: boolean;
-    hasOtherFocusableElements: boolean;
     isOptionDisabled: <Option>(option: Option) => boolean;
     loadingMessage: () => string;
     maxMenuHeight: number;
@@ -533,7 +528,6 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
         isMulti: boolean;
         isRtl: boolean;
         isSearchable: boolean;
-        hasOtherFocusableElements: boolean;
         isOptionDisabled: <Option_1>(option: Option_1) => boolean;
         loadingMessage: () => string;
         maxMenuHeight: number;
@@ -566,7 +560,6 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
     openAfterFocus: boolean;
     scrollToFocusedOptionOnUpdate: boolean;
     userIsDragging?: boolean;
-    lastPressedKey?: string;
     controlRef: HTMLDivElement | null;
     getControlRef: RefCallback<HTMLDivElement>;
     focusedOptionRef: HTMLDivElement | null;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-select",
-	"version": "3.4.2",
+	"version": "3.4.4",
 	"description": "A forked version of react-select to only be used in atlaskit/select",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -29,7 +29,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/ds-lib": "^5.0.0",
-		"@atlaskit/icon": "^27.11.0",
+		"@atlaskit/icon": "^27.12.0",
 		"@atlaskit/layering": "^3.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.11.0",
@@ -65,6 +65,9 @@
 		},
 		"platform_dst_select_menu_close_on_blur": {
 			"type": "boolean"
+		},
+		"platform_do_not_clear_input_for_multiselect": {
+			"type": "boolean"
 		}
 	},
 	"techstack": {

package/types/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/types.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/types.d.ts"
       ]