@atlaskit/user-picker 9.2.2 → 9.3.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/user-picker
 
+## 9.3.0
+
+### Minor Changes
+
+- [`bc0b47732f8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bc0b47732f8) - [ux] Fix bug where user picker input is not being unfocused when disableInput is set. The new behavior will enable you to still focus on the input but not interact with it, unless it is to delete selected users.
+
 ## 9.2.2
 
 ### Patch Changes

package/dist/cjs/components/BaseUserPicker.js

@@ -152,7 +152,8 @@ var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
         });
 
         _this.setState({
-          value: remainingValues ? remainingValues : []
+          value: remainingValues ? remainingValues : [],
+          menuIsOpen: true
         });
       }
 
@@ -366,8 +367,7 @@ var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
 
       if (event.keyCode === 32 && !_this.state.inputValue) {
         event.preventDefault();
-
-        _this.setState({
+        !_this.props.disableInput && _this.setState({
           inputValue: ' '
         });
       }
@@ -582,6 +582,10 @@ var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
     value: function getDerivedStateFromProps(nextProps, prevState) {
       var derivedState = {};
 
+      if (nextProps.isDisabled || nextProps.disableInput) {
+        derivedState.menuIsOpen = false;
+      }
+
       if (nextProps.open !== undefined) {
         derivedState.menuIsOpen = nextProps.open;
       }

package/dist/cjs/components/Input.js

@@ -47,9 +47,15 @@ var Input = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyPress", function (e) {
+      var _this$props$selectPro;
+
       if (e.key === 'Enter') {
         e.preventDefault();
       }
+
+      if ((_this$props$selectPro = _this.props.selectProps) !== null && _this$props$selectPro !== void 0 && _this$props$selectPro.disableInput) {
+        e.preventDefault();
+      }
     });
     return _this;
   }
@@ -57,10 +63,8 @@ var Input = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2.default)(Input, [{
     key: "render",
     value: function render() {
-      var selectProps = this.props.selectProps;
       return /*#__PURE__*/_react.default.createElement(_select.components.Input, (0, _extends2.default)({}, this.props, {
         innerRef: this.props.innerRef,
-        isDisabled: selectProps && selectProps.disableInput,
         onKeyPress: this.handleKeyPress
       }));
     }

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "9.2.2",
+	"version": "9.3.0",
 	"sideEffects": false
 }

package/dist/es2019/components/BaseUserPicker.js

@@ -18,6 +18,10 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
   static getDerivedStateFromProps(nextProps, prevState) {
     const derivedState = {};
 
+    if (nextProps.isDisabled || nextProps.disableInput) {
+      derivedState.menuIsOpen = false;
+    }
+
     if (nextProps.open !== undefined) {
       derivedState.menuIsOpen = nextProps.open;
     }
@@ -119,7 +123,8 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       if (removedValue && this.state.value && Array.isArray(this.state.value)) {
         const remainingValues = this.state.value.filter(val => val.data.id !== removedValue.data.id);
         this.setState({
-          value: remainingValues ? remainingValues : []
+          value: remainingValues ? remainingValues : [],
+          menuIsOpen: true
         });
       }
 
@@ -324,7 +329,7 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
 
       if (event.keyCode === 32 && !this.state.inputValue) {
         event.preventDefault();
-        this.setState({
+        !this.props.disableInput && this.setState({
           inputValue: ' '
         });
       }

package/dist/es2019/components/Input.js

@@ -7,19 +7,21 @@ export class Input extends React.Component {
     super(...args);
 
     _defineProperty(this, "handleKeyPress", e => {
+      var _this$props$selectPro;
+
       if (e.key === 'Enter') {
         e.preventDefault();
       }
+
+      if ((_this$props$selectPro = this.props.selectProps) !== null && _this$props$selectPro !== void 0 && _this$props$selectPro.disableInput) {
+        e.preventDefault();
+      }
     });
   }
 
   render() {
-    const {
-      selectProps
-    } = this.props;
     return /*#__PURE__*/React.createElement(components.Input, _extends({}, this.props, {
       innerRef: this.props.innerRef,
-      isDisabled: selectProps && selectProps.disableInput,
       onKeyPress: this.handleKeyPress
     }));
   }

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "9.2.2",
+	"version": "9.3.0",
 	"sideEffects": false
 }

package/dist/esm/components/BaseUserPicker.js

@@ -135,7 +135,8 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
         });
 
         _this.setState({
-          value: remainingValues ? remainingValues : []
+          value: remainingValues ? remainingValues : [],
+          menuIsOpen: true
         });
       }
 
@@ -364,8 +365,7 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
 
       if (event.keyCode === 32 && !_this.state.inputValue) {
         event.preventDefault();
-
-        _this.setState({
+        !_this.props.disableInput && _this.setState({
           inputValue: ' '
         });
       }
@@ -584,6 +584,10 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
     value: function getDerivedStateFromProps(nextProps, prevState) {
       var derivedState = {};
 
+      if (nextProps.isDisabled || nextProps.disableInput) {
+        derivedState.menuIsOpen = false;
+      }
+
       if (nextProps.open !== undefined) {
         derivedState.menuIsOpen = nextProps.open;
       }

package/dist/esm/components/Input.js

@@ -30,9 +30,15 @@ export var Input = /*#__PURE__*/function (_React$Component) {
     _this = _super.call.apply(_super, [this].concat(args));
 
     _defineProperty(_assertThisInitialized(_this), "handleKeyPress", function (e) {
+      var _this$props$selectPro;
+
       if (e.key === 'Enter') {
         e.preventDefault();
       }
+
+      if ((_this$props$selectPro = _this.props.selectProps) !== null && _this$props$selectPro !== void 0 && _this$props$selectPro.disableInput) {
+        e.preventDefault();
+      }
     });
 
     return _this;
@@ -41,10 +47,8 @@ export var Input = /*#__PURE__*/function (_React$Component) {
   _createClass(Input, [{
     key: "render",
     value: function render() {
-      var selectProps = this.props.selectProps;
       return /*#__PURE__*/React.createElement(components.Input, _extends({}, this.props, {
         innerRef: this.props.innerRef,
-        isDisabled: selectProps && selectProps.disableInput,
         onKeyPress: this.handleKeyPress
       }));
     }

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "9.2.2",
+	"version": "9.3.0",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/user-picker",
-  "version": "9.2.2",
+  "version": "9.3.0",
   "description": "Fabric component for display a dropdown to select a user from",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -32,7 +32,7 @@
     "@atlaskit/logo": "^13.8.0",
     "@atlaskit/lozenge": "^11.0.0",
     "@atlaskit/popper": "^5.0.0",
-    "@atlaskit/select": "^15.3.0",
+    "@atlaskit/select": "^15.4.0",
     "@atlaskit/spinner": "^15.1.4",
     "@atlaskit/theme": "^12.1.0",
     "@atlaskit/tokens": "^0.10.0",