@atlaskit/react-select 3.3.1 → 3.4.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/react-select
 
+## 3.4.0
+
+### Minor Changes
+
+- [#192272](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/192272)
+  [`94b0093816679`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/94b0093816679) -
+  conditionally handle the blur & menu close for the select based on the focusable elements other
+  than options
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.3.1
 
 ### Patch Changes

package/dist/cjs/select.js

@@ -52,6 +52,7 @@ var defaultProps = exports.defaultProps = {
   isMulti: false,
   isRtl: false,
   isSearchable: true,
+  hasOtherFocusableElements: false,
   isOptionDisabled: _builtins.isOptionDisabled,
   loadingMessage: function loadingMessage() {
     return 'Loading...';
@@ -257,6 +258,7 @@ 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);
@@ -630,7 +632,9 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         return;
       }
       if (_this.props.onBlur) {
-        _this.props.onBlur(event);
+        if (!_this.props.hasOtherFocusableElements || _this.props.hasOtherFocusableElements && _this.lastPressedKey !== 'Tab') {
+          _this.props.onBlur(event);
+        }
       }
       _this.onInputChange('', {
         action: 'input-blur',
@@ -696,6 +700,9 @@ 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;
@@ -921,11 +928,15 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
   }, {
     key: "onMenuClose",
     value: function onMenuClose() {
-      this.onInputChange('', {
-        action: 'menu-close',
-        prevInputValue: this.props.inputValue
-      });
-      this.props.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 = '';
+      }
     }
   }, {
     key: "onInputChange",

package/dist/es2019/select.js

@@ -31,6 +31,7 @@ export const defaultProps = {
   isMulti: false,
   isRtl: false,
   isSearchable: true,
+  hasOtherFocusableElements: false,
   isOptionDisabled: isOptionDisabledBuiltin,
   loadingMessage: () => 'Loading...',
   maxMenuHeight: 300,
@@ -226,6 +227,7 @@ 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);
@@ -603,7 +605,9 @@ export default class Select extends Component {
         return;
       }
       if (this.props.onBlur) {
-        this.props.onBlur(event);
+        if (!this.props.hasOtherFocusableElements || this.props.hasOtherFocusableElements && this.lastPressedKey !== 'Tab') {
+          this.props.onBlur(event);
+        }
       }
       this.onInputChange('', {
         action: 'input-blur',
@@ -671,6 +675,9 @@ 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;
@@ -953,11 +960,15 @@ export default class Select extends Component {
     this.props.onMenuOpen();
   }
   onMenuClose() {
-    this.onInputChange('', {
-      action: 'menu-close',
-      prevInputValue: this.props.inputValue
-    });
-    this.props.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 = '';
+    }
   }
   onInputChange(newValue, actionMeta) {
     this.props.onInputChange(newValue, actionMeta);

package/dist/esm/select.js

@@ -43,6 +43,7 @@ export var defaultProps = {
   isMulti: false,
   isRtl: false,
   isSearchable: true,
+  hasOtherFocusableElements: false,
   isOptionDisabled: isOptionDisabledBuiltin,
   loadingMessage: function loadingMessage() {
     return 'Loading...';
@@ -248,6 +249,7 @@ 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);
@@ -621,7 +623,9 @@ var Select = /*#__PURE__*/function (_Component) {
         return;
       }
       if (_this.props.onBlur) {
-        _this.props.onBlur(event);
+        if (!_this.props.hasOtherFocusableElements || _this.props.hasOtherFocusableElements && _this.lastPressedKey !== 'Tab') {
+          _this.props.onBlur(event);
+        }
       }
       _this.onInputChange('', {
         action: 'input-blur',
@@ -687,6 +691,9 @@ 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;
@@ -912,11 +919,15 @@ var Select = /*#__PURE__*/function (_Component) {
   }, {
     key: "onMenuClose",
     value: function onMenuClose() {
-      this.onInputChange('', {
-        action: 'menu-close',
-        prevInputValue: this.props.inputValue
-      });
-      this.props.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 = '';
+      }
     }
   }, {
     key: "onInputChange",

package/dist/types/select.d.ts

@@ -240,6 +240,10 @@ 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.
      */
@@ -449,6 +453,7 @@ export declare const defaultProps: {
     isMulti: boolean;
     isRtl: boolean;
     isSearchable: boolean;
+    hasOtherFocusableElements: boolean;
     isOptionDisabled: <Option_3>(option: Option_3) => boolean;
     loadingMessage: () => string;
     maxMenuHeight: number;
@@ -528,6 +533,7 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
         isMulti: boolean;
         isRtl: boolean;
         isSearchable: boolean;
+        hasOtherFocusableElements: boolean;
         isOptionDisabled: <Option_4>(option: Option_4) => boolean;
         loadingMessage: () => string;
         maxMenuHeight: number;
@@ -560,6 +566,7 @@ 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,6 +240,10 @@ 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.
      */
@@ -449,6 +453,7 @@ export declare const defaultProps: {
     isMulti: boolean;
     isRtl: boolean;
     isSearchable: boolean;
+    hasOtherFocusableElements: boolean;
     isOptionDisabled: <Option_3>(option: Option_3) => boolean;
     loadingMessage: () => string;
     maxMenuHeight: number;
@@ -528,6 +533,7 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
         isMulti: boolean;
         isRtl: boolean;
         isSearchable: boolean;
+        hasOtherFocusableElements: boolean;
         isOptionDisabled: <Option_4>(option: Option_4) => boolean;
         loadingMessage: () => string;
         maxMenuHeight: number;
@@ -560,6 +566,7 @@ 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.3.1",
+	"version": "3.4.0",
 	"description": "A forked version of react-select to only be used in atlaskit/select",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -29,10 +29,10 @@
 	},
 	"dependencies": {
 		"@atlaskit/ds-lib": "^5.0.0",
-		"@atlaskit/icon": "^27.7.0",
+		"@atlaskit/icon": "^27.8.0",
 		"@atlaskit/layering": "^3.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^14.10.0",
+		"@atlaskit/primitives": "^14.11.0",
 		"@atlaskit/spinner": "^19.0.0",
 		"@atlaskit/tokens": "^5.6.0",
 		"@babel/runtime": "^7.0.0",