@dhis2-ui/select 10.16.0 → 10.16.2

package/build/cjs/select/select.js

@@ -17,6 +17,7 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 // Keycodes for the keypress event handlers
+const TAB_KEY = 9;
 const ESCAPE_KEY = 27;
 const SPACE_KEY = 32;
 const UP_KEY = 38;
@@ -121,7 +122,6 @@ class Select extends _react.Component {
         keyCode
       } = e;
       const shouldOpen = !open && (keyCode === SPACE_KEY || keyCode === UP_KEY || keyCode === DOWN_KEY);
-      const shouldClose = open && keyCode === ESCAPE_KEY;
 
       /* Do not block event propagation when the Select is closed unless
        * the key to open it is pressed, so that other components like
@@ -129,9 +129,13 @@ class Select extends _react.Component {
       if (open || shouldOpen) {
         e.stopPropagation();
       }
-      if (shouldClose) {
+      if (open && keyCode === ESCAPE_KEY) {
         return this.handleClose();
       }
+      if (open && keyCode === TAB_KEY) {
+        // Defer so Tab advances focus before the menu unmounts.
+        return requestAnimationFrame(this.handleClose);
+      }
       if (shouldOpen) {
         return this.handleOpen();
       }

package/build/cjs/simple-single-select/use-handle-key-press/use-handle-key-press-on-filter-input.js

@@ -61,6 +61,12 @@ function useHandleKeyPressOnFilterInput(_ref) {
       key,
       altKey
     } = e;
+
+    // Defer so Tab advances focus before the filter unmounts.
+    if (key === 'Tab') {
+      requestAnimationFrame(closeMenu);
+      return;
+    }
     if (key === 'Escape' || key === 'Enter' || key === 'ArrowUp' && altKey || key === 'ArrowDown' && altKey) {
       if (value !== options[focussedOptionIndex].value) {
         selectFocussedOption();

package/build/es/select/select.js

@@ -9,6 +9,7 @@ import { InputWrapper } from './input-wrapper.js';
 import { MenuWrapper } from './menu-wrapper.js';
 
 // Keycodes for the keypress event handlers
+const TAB_KEY = 9;
 const ESCAPE_KEY = 27;
 const SPACE_KEY = 32;
 const UP_KEY = 38;
@@ -113,7 +114,6 @@ export class Select extends Component {
         keyCode
       } = e;
       const shouldOpen = !open && (keyCode === SPACE_KEY || keyCode === UP_KEY || keyCode === DOWN_KEY);
-      const shouldClose = open && keyCode === ESCAPE_KEY;
 
       /* Do not block event propagation when the Select is closed unless
        * the key to open it is pressed, so that other components like
@@ -121,9 +121,13 @@ export class Select extends Component {
       if (open || shouldOpen) {
         e.stopPropagation();
       }
-      if (shouldClose) {
+      if (open && keyCode === ESCAPE_KEY) {
         return this.handleClose();
       }
+      if (open && keyCode === TAB_KEY) {
+        // Defer so Tab advances focus before the menu unmounts.
+        return requestAnimationFrame(this.handleClose);
+      }
       if (shouldOpen) {
         return this.handleOpen();
       }

package/build/es/simple-single-select/use-handle-key-press/use-handle-key-press-on-filter-input.js

@@ -55,6 +55,12 @@ export function useHandleKeyPressOnFilterInput(_ref) {
       key,
       altKey
     } = e;
+
+    // Defer so Tab advances focus before the filter unmounts.
+    if (key === 'Tab') {
+      requestAnimationFrame(closeMenu);
+      return;
+    }
     if (key === 'Escape' || key === 'Enter' || key === 'ArrowUp' && altKey || key === 'ArrowDown' && altKey) {
       if (value !== options[focussedOptionIndex].value) {
         selectFocussedOption();

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/select",
-    "version": "10.16.0",
+    "version": "10.16.2",
     "description": "UI Select",
     "repository": {
         "type": "git",
@@ -33,21 +33,21 @@
         "styled-jsx": "^4"
     },
     "dependencies": {
-        "@dhis2-ui/box": "10.16.0",
-        "@dhis2-ui/button": "10.16.0",
-        "@dhis2-ui/card": "10.16.0",
-        "@dhis2-ui/checkbox": "10.16.0",
-        "@dhis2-ui/chip": "10.16.0",
-        "@dhis2-ui/field": "10.16.0",
-        "@dhis2-ui/input": "10.16.0",
-        "@dhis2-ui/layer": "10.16.0",
-        "@dhis2-ui/loader": "10.16.0",
-        "@dhis2-ui/popper": "10.16.0",
-        "@dhis2-ui/status-icon": "10.16.0",
-        "@dhis2-ui/tooltip": "10.16.0",
+        "@dhis2-ui/box": "10.16.2",
+        "@dhis2-ui/button": "10.16.2",
+        "@dhis2-ui/card": "10.16.2",
+        "@dhis2-ui/checkbox": "10.16.2",
+        "@dhis2-ui/chip": "10.16.2",
+        "@dhis2-ui/field": "10.16.2",
+        "@dhis2-ui/input": "10.16.2",
+        "@dhis2-ui/layer": "10.16.2",
+        "@dhis2-ui/loader": "10.16.2",
+        "@dhis2-ui/popper": "10.16.2",
+        "@dhis2-ui/status-icon": "10.16.2",
+        "@dhis2-ui/tooltip": "10.16.2",
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "10.16.0",
-        "@dhis2/ui-icons": "10.16.0",
+        "@dhis2/ui-constants": "10.16.2",
+        "@dhis2/ui-icons": "10.16.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },