carbon-react 123.10.0 → 123.10.1

package/esm/__internal__/checkable-input/hidden-checkable-input.component.js

@@ -62,6 +62,7 @@ const HiddenCheckableInput = /*#__PURE__*/React.forwardRef(({
     "aria-describedby": combinedDescription,
     "aria-labelledby": ariaLabelledBy,
     autoFocus: autoFocus,
+    "data-has-autofocus": autoFocus ? true : undefined,
     "aria-checked": checked,
     checked: checked,
     name: name,

package/esm/__internal__/focus-trap/focus-trap-utils.js

@@ -90,7 +90,8 @@ const onTabGuardFocus = (trapWrappers, focusableSelectors, position) => guardWra
   const isTop = position === "top";
   const currentIndex = trapWrappers.indexOf(guardWrapperRef);
   let index = currentIndex;
-  let nextWrapper, allFocusableElementsInNextWrapper;
+  let nextWrapper;
+  let allFocusableElementsInNextWrapper;
   do {
     index += isTop ? -1 : 1;
     if (index < 0) {
@@ -100,7 +101,7 @@ const onTabGuardFocus = (trapWrappers, focusableSelectors, position) => guardWra
       index -= trapWrappers.length;
     }
     nextWrapper = trapWrappers[index];
-    allFocusableElementsInNextWrapper = nextWrapper?.current?.querySelectorAll(focusableSelectors || defaultFocusableSelectors);
+    allFocusableElementsInNextWrapper = Array.from(nextWrapper?.current?.querySelectorAll(focusableSelectors || defaultFocusableSelectors) || /* istanbul ignore next */[]).filter(el => Number(el.tabIndex) !== -1);
   } while (index !== currentIndex && !allFocusableElementsInNextWrapper?.length);
   const toFocus = allFocusableElementsInNextWrapper?.[isTop ? allFocusableElementsInNextWrapper.length - 1 : 0];
   if (isRadio(toFocus)) {

package/esm/__internal__/focus-trap/focus-trap.component.js

@@ -74,16 +74,6 @@ const FocusTrap = ({
   }, [additionalWrapperRefs, onTabGuardTopFocus, onTabGuardBottomFocus]);
   const shouldSetFocus = autoFocus && isOpen && isAnimationComplete;
   const prevShouldSetFocus = usePrevious(shouldSetFocus);
-  useEffect(() => {
-    if (shouldSetFocus && !prevShouldSetFocus) {
-      const candidateFirstElement = focusFirstElement && "current" in focusFirstElement ? focusFirstElement.current : focusFirstElement;
-      const elementToFocus = candidateFirstElement || wrapperRef.current;
-      // istanbul ignore else
-      if (elementToFocus) {
-        setElementFocus(elementToFocus);
-      }
-    }
-  }, [shouldSetFocus, prevShouldSetFocus, focusFirstElement, wrapperRef]);
   const getFocusableElements = useCallback(selector => {
     const elements = [];
     trapWrappers.forEach(ref => {
@@ -94,6 +84,17 @@ const FocusTrap = ({
     });
     return elements;
   }, [trapWrappers]);
+  useEffect(() => {
+    if (shouldSetFocus && !prevShouldSetFocus) {
+      const candidateFirstElement = focusFirstElement && "current" in focusFirstElement ? focusFirstElement.current : focusFirstElement;
+      const autoFocusedElement = getFocusableElements(defaultFocusableSelectors).find(el => el.getAttribute("data-has-autofocus") === "true");
+      const elementToFocus = candidateFirstElement || autoFocusedElement || wrapperRef.current;
+      // istanbul ignore else
+      if (elementToFocus) {
+        setElementFocus(elementToFocus);
+      }
+    }
+  }, [shouldSetFocus, prevShouldSetFocus, getFocusableElements, focusFirstElement, wrapperRef]);
   useEffect(() => {
     const trapFn = ev => {
       // block focus trap from working if it's not the topmost trap, or is currently closed

package/esm/__internal__/input/input.component.js

@@ -131,6 +131,7 @@ const Input = /*#__PURE__*/React.forwardRef(({
   }
   const combinedDescription = descriptionList.length ? descriptionList.filter(Boolean).join(" ") : undefined;
   return /*#__PURE__*/React.createElement(StyledInput, _extends({}, rest, {
+    "data-has-autofocus": autoFocus ? true : undefined,
     "aria-describedby": combinedDescription,
     "aria-labelledby": ariaLabelledBy,
     align: align,

package/esm/components/select/filterable-select/filterable-select.component.js

@@ -77,6 +77,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     id: inputId.current,
     label
   });
+  const focusTimer = useRef(null);
   if (!deprecateInputRefWarnTriggered && inputRef) {
     deprecateInputRefWarnTriggered = true;
     Logger.deprecate("The `inputRef` prop in `Filterable Select` component is deprecated and will soon be removed. Please use `ref` instead.");
@@ -306,18 +307,26 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
   function handleTextboxFocus(event) {
     const triggerFocus = () => onFocus?.(event);
     if (openOnFocus) {
-      setOpen(isAlreadyOpen => {
-        if (isAlreadyOpen) {
+      if (focusTimer.current) {
+        clearTimeout(focusTimer.current);
+      }
+
+      // we need to use a timeout here as there is a race condition when rendered in a modal
+      // whereby the select list isn't visible when the select is auto focused straight away
+      focusTimer.current = setTimeout(() => {
+        setOpen(isAlreadyOpen => {
+          if (isAlreadyOpen) {
+            return true;
+          }
+          if (onFocus && !isInputFocused.current) {
+            triggerFocus();
+            isInputFocused.current = true;
+          }
+          if (isMouseDownReported.current && !isMouseDownOnInput.current) {
+            return false;
+          }
           return true;
-        }
-        if (onFocus && !isInputFocused.current) {
-          triggerFocus();
-          isInputFocused.current = true;
-        }
-        if (isMouseDownReported.current && !isMouseDownOnInput.current) {
-          return false;
-        }
-        return true;
+        });
       });
     } else if (onFocus && !isInputFocused.current) {
       triggerFocus();

package/esm/components/select/multi-select/multi-select.component.js

@@ -82,6 +82,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     id: inputId.current,
     label
   });
+  const focusTimer = useRef(null);
   const actualValue = isControlled.current ? value : selectedValue;
   if (!deprecateInputRefWarnTriggered && inputRef) {
     deprecateInputRefWarnTriggered = true;
@@ -312,21 +313,29 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   function handleTextboxFocus(event) {
     const triggerFocus = () => onFocus?.(event);
     if (openOnFocus) {
-      setOpenState(isAlreadyOpen => {
-        if (isAlreadyOpen) {
+      if (focusTimer.current) {
+        clearTimeout(focusTimer.current);
+      }
+
+      // we need to use a timeout here as there is a race condition when rendered in a modal
+      // whereby the select list isn't visible when the select is auto focused straight away
+      focusTimer.current = setTimeout(() => {
+        setOpenState(isAlreadyOpen => {
+          if (isAlreadyOpen) {
+            return true;
+          }
+          if (onOpen) {
+            onOpen();
+          }
+          if (onFocus && !isInputFocused.current) {
+            triggerFocus();
+            isInputFocused.current = true;
+          }
+          if (isMouseDownReported.current && !isMouseDownOnInput.current) {
+            return false;
+          }
           return true;
-        }
-        if (onOpen) {
-          onOpen();
-        }
-        if (onFocus && !isInputFocused.current) {
-          triggerFocus();
-          isInputFocused.current = true;
-        }
-        if (isMouseDownReported.current && !isMouseDownOnInput.current) {
-          return false;
-        }
-        return true;
+        });
       });
     } else if (onFocus && !isInputFocused.current) {
       triggerFocus();

package/esm/components/select/simple-select/simple-select.component.js

@@ -72,6 +72,7 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
     id: inputId.current,
     label
   });
+  const focusTimer = useRef(null);
   if (!deprecateInputRefWarnTriggered && inputRef) {
     deprecateInputRefWarnTriggered = true;
     Logger.deprecate("The `inputRef` prop in `Simple Select` component is deprecated and will soon be removed. Please use `ref` instead.");
@@ -235,14 +236,22 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
       return;
     }
     if (openOnFocus) {
-      setOpenState(isAlreadyOpen => {
-        if (isAlreadyOpen) {
+      if (focusTimer.current) {
+        clearTimeout(focusTimer.current);
+      }
+
+      // we need to use a timeout here as there is a race condition when rendered in a modal
+      // whereby the select list isn't visible when the select is auto focused straight away
+      focusTimer.current = setTimeout(() => {
+        setOpenState(isAlreadyOpen => {
+          if (isAlreadyOpen) {
+            return true;
+          }
+          if (onOpen) {
+            onOpen();
+          }
           return true;
-        }
-        if (onOpen) {
-          onOpen();
-        }
-        return true;
+        });
       });
     }
   }

package/lib/__internal__/checkable-input/hidden-checkable-input.component.js

@@ -71,6 +71,7 @@ const HiddenCheckableInput = /*#__PURE__*/_react.default.forwardRef(({
     "aria-describedby": combinedDescription,
     "aria-labelledby": ariaLabelledBy,
     autoFocus: autoFocus,
+    "data-has-autofocus": autoFocus ? true : undefined,
     "aria-checked": checked,
     checked: checked,
     name: name,

package/lib/__internal__/focus-trap/focus-trap-utils.js

@@ -99,7 +99,8 @@ const onTabGuardFocus = (trapWrappers, focusableSelectors, position) => guardWra
   const isTop = position === "top";
   const currentIndex = trapWrappers.indexOf(guardWrapperRef);
   let index = currentIndex;
-  let nextWrapper, allFocusableElementsInNextWrapper;
+  let nextWrapper;
+  let allFocusableElementsInNextWrapper;
   do {
     index += isTop ? -1 : 1;
     if (index < 0) {
@@ -109,7 +110,7 @@ const onTabGuardFocus = (trapWrappers, focusableSelectors, position) => guardWra
       index -= trapWrappers.length;
     }
     nextWrapper = trapWrappers[index];
-    allFocusableElementsInNextWrapper = nextWrapper?.current?.querySelectorAll(focusableSelectors || defaultFocusableSelectors);
+    allFocusableElementsInNextWrapper = Array.from(nextWrapper?.current?.querySelectorAll(focusableSelectors || defaultFocusableSelectors) || /* istanbul ignore next */[]).filter(el => Number(el.tabIndex) !== -1);
   } while (index !== currentIndex && !allFocusableElementsInNextWrapper?.length);
   const toFocus = allFocusableElementsInNextWrapper?.[isTop ? allFocusableElementsInNextWrapper.length - 1 : 0];
   if (isRadio(toFocus)) {

package/lib/__internal__/focus-trap/focus-trap.component.js

@@ -84,16 +84,6 @@ const FocusTrap = ({
   }, [additionalWrapperRefs, onTabGuardTopFocus, onTabGuardBottomFocus]);
   const shouldSetFocus = autoFocus && isOpen && isAnimationComplete;
   const prevShouldSetFocus = (0, _usePrevious.default)(shouldSetFocus);
-  (0, _react.useEffect)(() => {
-    if (shouldSetFocus && !prevShouldSetFocus) {
-      const candidateFirstElement = focusFirstElement && "current" in focusFirstElement ? focusFirstElement.current : focusFirstElement;
-      const elementToFocus = candidateFirstElement || wrapperRef.current;
-      // istanbul ignore else
-      if (elementToFocus) {
-        (0, _focusTrapUtils.setElementFocus)(elementToFocus);
-      }
-    }
-  }, [shouldSetFocus, prevShouldSetFocus, focusFirstElement, wrapperRef]);
   const getFocusableElements = (0, _react.useCallback)(selector => {
     const elements = [];
     trapWrappers.forEach(ref => {
@@ -104,6 +94,17 @@ const FocusTrap = ({
     });
     return elements;
   }, [trapWrappers]);
+  (0, _react.useEffect)(() => {
+    if (shouldSetFocus && !prevShouldSetFocus) {
+      const candidateFirstElement = focusFirstElement && "current" in focusFirstElement ? focusFirstElement.current : focusFirstElement;
+      const autoFocusedElement = getFocusableElements(_focusTrapUtils.defaultFocusableSelectors).find(el => el.getAttribute("data-has-autofocus") === "true");
+      const elementToFocus = candidateFirstElement || autoFocusedElement || wrapperRef.current;
+      // istanbul ignore else
+      if (elementToFocus) {
+        (0, _focusTrapUtils.setElementFocus)(elementToFocus);
+      }
+    }
+  }, [shouldSetFocus, prevShouldSetFocus, getFocusableElements, focusFirstElement, wrapperRef]);
   (0, _react.useEffect)(() => {
     const trapFn = ev => {
       // block focus trap from working if it's not the topmost trap, or is currently closed

package/lib/__internal__/input/input.component.js

@@ -140,6 +140,7 @@ const Input = /*#__PURE__*/_react.default.forwardRef(({
   }
   const combinedDescription = descriptionList.length ? descriptionList.filter(Boolean).join(" ") : undefined;
   return /*#__PURE__*/_react.default.createElement(_input.default, _extends({}, rest, {
+    "data-has-autofocus": autoFocus ? true : undefined,
     "aria-describedby": combinedDescription,
     "aria-labelledby": ariaLabelledBy,
     align: align,

package/lib/components/select/filterable-select/filterable-select.component.js

@@ -86,6 +86,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
     id: inputId.current,
     label
   });
+  const focusTimer = (0, _react.useRef)(null);
   if (!deprecateInputRefWarnTriggered && inputRef) {
     deprecateInputRefWarnTriggered = true;
     _logger.default.deprecate("The `inputRef` prop in `Filterable Select` component is deprecated and will soon be removed. Please use `ref` instead.");
@@ -315,18 +316,26 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
   function handleTextboxFocus(event) {
     const triggerFocus = () => onFocus?.(event);
     if (openOnFocus) {
-      setOpen(isAlreadyOpen => {
-        if (isAlreadyOpen) {
+      if (focusTimer.current) {
+        clearTimeout(focusTimer.current);
+      }
+
+      // we need to use a timeout here as there is a race condition when rendered in a modal
+      // whereby the select list isn't visible when the select is auto focused straight away
+      focusTimer.current = setTimeout(() => {
+        setOpen(isAlreadyOpen => {
+          if (isAlreadyOpen) {
+            return true;
+          }
+          if (onFocus && !isInputFocused.current) {
+            triggerFocus();
+            isInputFocused.current = true;
+          }
+          if (isMouseDownReported.current && !isMouseDownOnInput.current) {
+            return false;
+          }
           return true;
-        }
-        if (onFocus && !isInputFocused.current) {
-          triggerFocus();
-          isInputFocused.current = true;
-        }
-        if (isMouseDownReported.current && !isMouseDownOnInput.current) {
-          return false;
-        }
-        return true;
+        });
       });
     } else if (onFocus && !isInputFocused.current) {
       triggerFocus();

package/lib/components/select/multi-select/multi-select.component.js

@@ -91,6 +91,7 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
     id: inputId.current,
     label
   });
+  const focusTimer = (0, _react.useRef)(null);
   const actualValue = isControlled.current ? value : selectedValue;
   if (!deprecateInputRefWarnTriggered && inputRef) {
     deprecateInputRefWarnTriggered = true;
@@ -321,21 +322,29 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
   function handleTextboxFocus(event) {
     const triggerFocus = () => onFocus?.(event);
     if (openOnFocus) {
-      setOpenState(isAlreadyOpen => {
-        if (isAlreadyOpen) {
+      if (focusTimer.current) {
+        clearTimeout(focusTimer.current);
+      }
+
+      // we need to use a timeout here as there is a race condition when rendered in a modal
+      // whereby the select list isn't visible when the select is auto focused straight away
+      focusTimer.current = setTimeout(() => {
+        setOpenState(isAlreadyOpen => {
+          if (isAlreadyOpen) {
+            return true;
+          }
+          if (onOpen) {
+            onOpen();
+          }
+          if (onFocus && !isInputFocused.current) {
+            triggerFocus();
+            isInputFocused.current = true;
+          }
+          if (isMouseDownReported.current && !isMouseDownOnInput.current) {
+            return false;
+          }
           return true;
-        }
-        if (onOpen) {
-          onOpen();
-        }
-        if (onFocus && !isInputFocused.current) {
-          triggerFocus();
-          isInputFocused.current = true;
-        }
-        if (isMouseDownReported.current && !isMouseDownOnInput.current) {
-          return false;
-        }
-        return true;
+        });
       });
     } else if (onFocus && !isInputFocused.current) {
       triggerFocus();

package/lib/components/select/simple-select/simple-select.component.js

@@ -81,6 +81,7 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
     id: inputId.current,
     label
   });
+  const focusTimer = (0, _react.useRef)(null);
   if (!deprecateInputRefWarnTriggered && inputRef) {
     deprecateInputRefWarnTriggered = true;
     _logger.default.deprecate("The `inputRef` prop in `Simple Select` component is deprecated and will soon be removed. Please use `ref` instead.");
@@ -244,14 +245,22 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
       return;
     }
     if (openOnFocus) {
-      setOpenState(isAlreadyOpen => {
-        if (isAlreadyOpen) {
+      if (focusTimer.current) {
+        clearTimeout(focusTimer.current);
+      }
+
+      // we need to use a timeout here as there is a race condition when rendered in a modal
+      // whereby the select list isn't visible when the select is auto focused straight away
+      focusTimer.current = setTimeout(() => {
+        setOpenState(isAlreadyOpen => {
+          if (isAlreadyOpen) {
+            return true;
+          }
+          if (onOpen) {
+            onOpen();
+          }
           return true;
-        }
-        if (onOpen) {
-          onOpen();
-        }
-        return true;
+        });
       });
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "123.10.0",
+  "version": "123.10.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",