carbon-react 144.2.0 → 144.2.2

package/esm/components/date-range/date-range.component.js

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState, useContext } from "react";
 import PropTypes from "prop-types";
 import { formatToISO, formattedValue, parseISODate, checkISOFormatAndLength } from "../date/__internal__/utils";
 import DateInput from "../date";
@@ -11,6 +11,7 @@ import useLocale from "../../hooks/__internal__/useLocale";
 import usePrevious from "../../hooks/__internal__/usePrevious";
 import getFormatData from "../date/__internal__/date-formats";
 import DateRangeContext from "./__internal__/date-range.context";
+import NewValidationContext from "../carbon-provider/__internal__/new-validation.context";
 export const DateRange = ({
   endDateProps = {},
   id,
@@ -28,6 +29,10 @@ export const DateRange = ({
   isOptional,
   ...rest
 }) => {
+  const {
+    validationRedesignOptIn
+  } = useContext(NewValidationContext);
+  const labelsInlineWithNewValidation = validationRedesignOptIn ? false : labelsInline;
   const l = useLocale();
   const {
     dateFnsLocale
@@ -179,7 +184,7 @@ export const DateRange = ({
     const onChangeCallback = propsKey === "start" ? startDateOnChange : endDateOnChange;
     return {
       label: rest[`${propsKey}Label`],
-      labelInline: labelsInline,
+      labelInline: labelsInlineWithNewValidation,
       value: inputValue,
       error: rest[`${propsKey}Error`],
       warning: rest[`${propsKey}Warning`],
@@ -194,7 +199,7 @@ export const DateRange = ({
     };
   };
   return /*#__PURE__*/React.createElement(StyledDateRange, _extends({}, tagComponent("date-range", rest), {
-    labelsInline: labelsInline
+    labelsInline: labelsInlineWithNewValidation
   }, filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(DateRangeContext.Provider, {
     value: {
       inputRefMap,

package/esm/components/multi-action-button/multi-action-button.component.js

@@ -36,6 +36,8 @@ export const MultiActionButton = ({
   } = useChildButtons(buttonRef);
   const handleInsideClick = useClickAwayListener(hideButtons);
   const handleClick = ev => {
+    // ensure button is focused when clicked (Safari)
+    buttonRef.current?.focus();
     showButtons();
     handleInsideClick();
     if (onClick) {

package/esm/components/numeral-date/numeral-date.component.js

@@ -119,6 +119,7 @@ export const NumeralDate = ({
   const {
     validationRedesignOptIn
   } = useContext(NewValidationContext);
+  const labelInlineWithNewValidation = validationRedesignOptIn ? false : labelInline;
   const {
     current: uniqueId
   } = useRef(id || guid());
@@ -208,7 +209,7 @@ export const NumeralDate = ({
     warning: internalWarning,
     info: info,
     label: label,
-    labelInline: labelInline,
+    labelInline: labelInlineWithNewValidation,
     labelWidth: labelWidth,
     labelAlign: labelAlign,
     labelHelp: !validationRedesignOptIn && labelHelp,

package/esm/components/radio-button/radio-button-group/radio-button-group.component.js

@@ -41,6 +41,7 @@ export const RadioButtonGroup = props => {
   const {
     validationRedesignOptIn
   } = useContext(NewValidationContext);
+  const legendInlineWithNewValidation = validationRedesignOptIn ? false : legendInline;
   if (!deprecateUncontrolledWarnTriggered && !onChange) {
     deprecateUncontrolledWarnTriggered = true;
     Logger.deprecate("Uncontrolled behaviour in `Radio Button` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
@@ -48,7 +49,7 @@ export const RadioButtonGroup = props => {
   const marginProps = filterStyledSystemMarginProps(props);
   const isAboveLegendBreakpoint = useIsAboveBreakpoint(adaptiveLegendBreakpoint);
   const isAboveSpacingBreakpoint = useIsAboveBreakpoint(adaptiveSpacingBreakpoint);
-  let inlineLegend = legendInline;
+  let inlineLegend = legendInlineWithNewValidation;
   if (adaptiveLegendBreakpoint) {
     inlineLegend = !!isAboveLegendBreakpoint;
   }

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

@@ -101,6 +101,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     return customEvent;
   }, [name, id]);
   const triggerChange = useCallback((newValue, selectionConfirmed) => {
+    /* istanbul ignore else */
     if (onChange) {
       onChange(createCustomEvent(newValue, selectionConfirmed));
     }
@@ -146,7 +147,11 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     const matchingOption = React.Children.toArray(children).find(child => /*#__PURE__*/React.isValidElement(child) && isExpectedOption(child, newValue));
     if (!matchingOption || matchingOption.props.text === undefined) {
       setTextValue(filterText || "");
-    } else if (isClosing || matchingOption.props.text?.toLowerCase().startsWith(filterText?.toLowerCase().trim())) {
+      return;
+    }
+
+    /* istanbul ignore else */
+    if (isClosing || matchingOption.props.text?.toLowerCase().startsWith(filterText?.toLowerCase().trim())) {
       setTextValue(matchingOption.props.text);
     }
   }, [children, filterText]);
@@ -309,6 +314,13 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
       return !isAlreadyOpen;
     });
   }
+  useEffect(() => {
+    return () => {
+      if (focusTimer.current) {
+        clearTimeout(focusTimer.current);
+      }
+    };
+  }, []);
   function handleTextboxFocus(event) {
     const triggerFocus = () => onFocus?.(event);
     if (openOnFocus) {

package/esm/components/split-button/split-button.component.js

@@ -37,6 +37,7 @@ export const SplitButton = ({
   const locale = useLocale();
   const theme = useContext(ThemeContext) || baseTheme;
   const buttonLabelId = useRef(guid());
+  const mainButtonRef = useRef(null);
   const toggleButton = useRef(null);
   const {
     showAdditionalButtons,
@@ -47,25 +48,36 @@ export const SplitButton = ({
     wrapperProps,
     contextValue
   } = useChildButtons(toggleButton, CONTENT_WIDTH_RATIO);
+  const handleMainClick = ev => {
+    // ensure button is focused when clicked (Safari)
+    mainButtonRef.current?.focus();
+    if (onClick) {
+      onClick(ev);
+    }
+  };
   const mainButtonProps = {
-    onMouseEnter: hideButtons,
     onFocus: hideButtons,
     onTouchStart: hideButtons,
     iconPosition,
     buttonType,
     disabled,
     iconType,
-    onClick: onClick,
+    onClick: handleMainClick,
     size,
     subtext,
     ...filterOutStyledSystemSpacingProps(rest)
   };
+  const handleToggleClick = () => {
+    // ensure button is focused when clicked (Safari)
+    toggleButton.current?.focus();
+    showButtons();
+  };
   const toggleButtonProps = {
     disabled,
     displayed: showAdditionalButtons,
     onTouchStart: showButtons,
     onKeyDown: handleToggleButtonKeyDown,
-    onClick: showButtons,
+    onClick: handleToggleClick,
     buttonType,
     size
   };
@@ -87,7 +99,8 @@ export const SplitButton = ({
     return [/*#__PURE__*/React.createElement(Button, _extends({
       "data-element": "main-button",
       key: "main-button",
-      id: buttonLabelId.current
+      id: buttonLabelId.current,
+      ref: mainButtonRef
     }, mainButtonProps), text), /*#__PURE__*/React.createElement(StyledSplitButtonToggle, _extends({
       "aria-haspopup": "true",
       "aria-expanded": showAdditionalButtons,

package/esm/components/text-editor/text-editor.component.js

@@ -258,7 +258,8 @@ const TextEditor = /*#__PURE__*/React.forwardRef(({
       editMode: true
     }
   }, /*#__PURE__*/React.createElement(StyledEditorWrapper, _extends({
-    ref: wrapper
+    ref: wrapper,
+    "data-role": "text-editor-wrapper"
   }, rest), /*#__PURE__*/React.createElement(LabelWrapper, {
     onClick: () => handleEditorFocus(true)
   }, /*#__PURE__*/React.createElement(Label, {
@@ -277,7 +278,8 @@ const TextEditor = /*#__PURE__*/React.forwardRef(({
     warning: !!(!error && warning)
   })), /*#__PURE__*/React.createElement(StyledEditorOutline, {
     isFocused: isFocused,
-    hasError: !!error
+    hasError: !!error,
+    "data-role": "editor-outline"
   }, /*#__PURE__*/React.createElement(StyledEditorContainer, {
     "data-component": "text-editor-container",
     hasError: !!error,

package/esm/components/textarea/textarea.component.js

@@ -66,6 +66,7 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
   const {
     validationRedesignOptIn
   } = useContext(NewValidationContext);
+  const labelInlineWithNewValidation = validationRedesignOptIn ? false : labelInline;
   const [textareaMinHeight, setTextareaMinHeight] = useState(DEFAULT_MIN_HEIGHT);
   const computeLabelPropValues = prop => validationRedesignOptIn ? undefined : prop;
   const {
@@ -217,7 +218,7 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
     tooltipPosition: tooltipPosition,
     helpAriaLabel: helpAriaLabel
   }, /*#__PURE__*/React.createElement(InputBehaviour, null, /*#__PURE__*/React.createElement(StyledTextarea, _extends({
-    labelInline: labelInline,
+    labelInline: labelInlineWithNewValidation,
     "data-component": dataComponent,
     "data-role": dataRole,
     "data-element": dataElement,
@@ -233,7 +234,7 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
     labelId: labelId,
     disabled: disabled,
     id: id,
-    labelInline: computeLabelPropValues(labelInline),
+    labelInline: computeLabelPropValues(labelInlineWithNewValidation),
     labelAlign: computeLabelPropValues(labelAlign),
     labelWidth: computeLabelPropValues(labelWidth),
     labelHelp: computeLabelPropValues(labelHelp),

package/esm/hooks/__internal__/useChildButtons/useChildButtons.js

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect, useCallback } from "react";
+import { useState, useRef, useCallback } from "react";
 import Events from "../../../__internal__/utils/helpers/events";
 import useMenuKeyboardNavigation from "../useMenuKeyboardNavigation";
 const useChildButtons = (toggleButtonRef, widthRatio = 1) => {
@@ -6,7 +6,6 @@ const useChildButtons = (toggleButtonRef, widthRatio = 1) => {
   const [minWidth, setMinWidth] = useState(0);
   const buttonNode = useRef(null);
   const childrenContainer = useRef(null);
-  const focusFirstChildButtonOnOpen = useRef(false);
   const hideButtons = useCallback(() => {
     setShowAdditionalButtons(false);
   }, []);
@@ -19,20 +18,16 @@ const useChildButtons = (toggleButtonRef, widthRatio = 1) => {
     }
   }
   const getButtonChildren = useCallback(() => childrenContainer.current?.querySelectorAll('[data-component="button"]'), []);
-  useEffect(() => {
-    const firstChild = getButtonChildren()?.[0];
-    if (focusFirstChildButtonOnOpen.current && showAdditionalButtons && firstChild) {
-      focusFirstChildButtonOnOpen.current = false;
-      firstChild.focus();
-    }
-  }, [showAdditionalButtons, getButtonChildren]);
   const handleToggleButtonKeyDown = ev => {
-    if (Events.isEnterKey(ev) || Events.isSpaceKey(ev) || Events.isDownKey(ev) || Events.isUpKey(ev)) {
+    const isToggleKey = Events.isEnterKey(ev) || Events.isSpaceKey(ev) || Events.isDownKey(ev) || Events.isUpKey(ev) || showAdditionalButtons && Events.isTabKey(ev);
+    if (isToggleKey) {
       ev.preventDefault();
       if (!showAdditionalButtons) {
         showButtons();
       }
-      focusFirstChildButtonOnOpen.current = true;
+      setTimeout(() => {
+        getButtonChildren()?.[0]?.focus();
+      });
     }
   };
   const handleKeyDown = useMenuKeyboardNavigation(toggleButtonRef, getButtonChildren, hideButtons, showAdditionalButtons);

package/lib/components/date-range/date-range.component.js

@@ -16,6 +16,7 @@ var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLoc
 var _usePrevious = _interopRequireDefault(require("../../hooks/__internal__/usePrevious"));
 var _dateFormats = _interopRequireDefault(require("../date/__internal__/date-formats"));
 var _dateRange2 = _interopRequireDefault(require("./__internal__/date-range.context"));
+var _newValidation = _interopRequireDefault(require("../carbon-provider/__internal__/new-validation.context"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -37,6 +38,10 @@ const DateRange = ({
   isOptional,
   ...rest
 }) => {
+  const {
+    validationRedesignOptIn
+  } = (0, _react.useContext)(_newValidation.default);
+  const labelsInlineWithNewValidation = validationRedesignOptIn ? false : labelsInline;
   const l = (0, _useLocale.default)();
   const {
     dateFnsLocale
@@ -188,7 +193,7 @@ const DateRange = ({
     const onChangeCallback = propsKey === "start" ? startDateOnChange : endDateOnChange;
     return {
       label: rest[`${propsKey}Label`],
-      labelInline: labelsInline,
+      labelInline: labelsInlineWithNewValidation,
       value: inputValue,
       error: rest[`${propsKey}Error`],
       warning: rest[`${propsKey}Warning`],
@@ -203,7 +208,7 @@ const DateRange = ({
     };
   };
   return /*#__PURE__*/_react.default.createElement(_dateRange.default, _extends({}, (0, _tags.default)("date-range", rest), {
-    labelsInline: labelsInline
+    labelsInline: labelsInlineWithNewValidation
   }, (0, _utils2.filterStyledSystemMarginProps)(rest)), /*#__PURE__*/_react.default.createElement(_dateRange2.default.Provider, {
     value: {
       inputRefMap,

package/lib/components/multi-action-button/multi-action-button.component.js

@@ -45,6 +45,8 @@ const MultiActionButton = ({
   } = (0, _useChildButtons.default)(buttonRef);
   const handleInsideClick = (0, _useClickAwayListener.default)(hideButtons);
   const handleClick = ev => {
+    // ensure button is focused when clicked (Safari)
+    buttonRef.current?.focus();
     showButtons();
     handleInsideClick();
     if (onClick) {

package/lib/components/numeral-date/numeral-date.component.js

@@ -128,6 +128,7 @@ const NumeralDate = ({
   const {
     validationRedesignOptIn
   } = (0, _react.useContext)(_newValidation.default);
+  const labelInlineWithNewValidation = validationRedesignOptIn ? false : labelInline;
   const {
     current: uniqueId
   } = (0, _react.useRef)(id || (0, _guid.default)());
@@ -217,7 +218,7 @@ const NumeralDate = ({
     warning: internalWarning,
     info: info,
     label: label,
-    labelInline: labelInline,
+    labelInline: labelInlineWithNewValidation,
     labelWidth: labelWidth,
     labelAlign: labelAlign,
     labelHelp: !validationRedesignOptIn && labelHelp,

package/lib/components/radio-button/radio-button-group/radio-button-group.component.js

@@ -50,6 +50,7 @@ const RadioButtonGroup = props => {
   const {
     validationRedesignOptIn
   } = (0, _react.useContext)(_newValidation.default);
+  const legendInlineWithNewValidation = validationRedesignOptIn ? false : legendInline;
   if (!deprecateUncontrolledWarnTriggered && !onChange) {
     deprecateUncontrolledWarnTriggered = true;
     _logger.default.deprecate("Uncontrolled behaviour in `Radio Button` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
@@ -57,7 +58,7 @@ const RadioButtonGroup = props => {
   const marginProps = (0, _utils.filterStyledSystemMarginProps)(props);
   const isAboveLegendBreakpoint = (0, _useIsAboveBreakpoint.default)(adaptiveLegendBreakpoint);
   const isAboveSpacingBreakpoint = (0, _useIsAboveBreakpoint.default)(adaptiveSpacingBreakpoint);
-  let inlineLegend = legendInline;
+  let inlineLegend = legendInlineWithNewValidation;
   if (adaptiveLegendBreakpoint) {
     inlineLegend = !!isAboveLegendBreakpoint;
   }

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

@@ -110,6 +110,7 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
     return customEvent;
   }, [name, id]);
   const triggerChange = (0, _react.useCallback)((newValue, selectionConfirmed) => {
+    /* istanbul ignore else */
     if (onChange) {
       onChange(createCustomEvent(newValue, selectionConfirmed));
     }
@@ -155,7 +156,11 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
     const matchingOption = _react.default.Children.toArray(children).find(child => /*#__PURE__*/_react.default.isValidElement(child) && (0, _isExpectedOption.default)(child, newValue));
     if (!matchingOption || matchingOption.props.text === undefined) {
       setTextValue(filterText || "");
-    } else if (isClosing || matchingOption.props.text?.toLowerCase().startsWith(filterText?.toLowerCase().trim())) {
+      return;
+    }
+
+    /* istanbul ignore else */
+    if (isClosing || matchingOption.props.text?.toLowerCase().startsWith(filterText?.toLowerCase().trim())) {
       setTextValue(matchingOption.props.text);
     }
   }, [children, filterText]);
@@ -318,6 +323,13 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
       return !isAlreadyOpen;
     });
   }
+  (0, _react.useEffect)(() => {
+    return () => {
+      if (focusTimer.current) {
+        clearTimeout(focusTimer.current);
+      }
+    };
+  }, []);
   function handleTextboxFocus(event) {
     const triggerFocus = () => onFocus?.(event);
     if (openOnFocus) {

package/lib/components/split-button/split-button.component.js

@@ -46,6 +46,7 @@ const SplitButton = ({
   const locale = (0, _useLocale.default)();
   const theme = (0, _react.useContext)(_styledComponents.ThemeContext) || _themes.baseTheme;
   const buttonLabelId = (0, _react.useRef)((0, _guid.default)());
+  const mainButtonRef = (0, _react.useRef)(null);
   const toggleButton = (0, _react.useRef)(null);
   const {
     showAdditionalButtons,
@@ -56,25 +57,36 @@ const SplitButton = ({
     wrapperProps,
     contextValue
   } = (0, _useChildButtons.default)(toggleButton, CONTENT_WIDTH_RATIO);
+  const handleMainClick = ev => {
+    // ensure button is focused when clicked (Safari)
+    mainButtonRef.current?.focus();
+    if (onClick) {
+      onClick(ev);
+    }
+  };
   const mainButtonProps = {
-    onMouseEnter: hideButtons,
     onFocus: hideButtons,
     onTouchStart: hideButtons,
     iconPosition,
     buttonType,
     disabled,
     iconType,
-    onClick: onClick,
+    onClick: handleMainClick,
     size,
     subtext,
     ...(0, _utils.filterOutStyledSystemSpacingProps)(rest)
   };
+  const handleToggleClick = () => {
+    // ensure button is focused when clicked (Safari)
+    toggleButton.current?.focus();
+    showButtons();
+  };
   const toggleButtonProps = {
     disabled,
     displayed: showAdditionalButtons,
     onTouchStart: showButtons,
     onKeyDown: handleToggleButtonKeyDown,
-    onClick: showButtons,
+    onClick: handleToggleClick,
     buttonType,
     size
   };
@@ -96,7 +108,8 @@ const SplitButton = ({
     return [/*#__PURE__*/_react.default.createElement(_button.default, _extends({
       "data-element": "main-button",
       key: "main-button",
-      id: buttonLabelId.current
+      id: buttonLabelId.current,
+      ref: mainButtonRef
     }, mainButtonProps), text), /*#__PURE__*/_react.default.createElement(_splitButtonToggle.default, _extends({
       "aria-haspopup": "true",
       "aria-expanded": showAdditionalButtons,

package/lib/components/text-editor/text-editor.component.js

@@ -267,7 +267,8 @@ const TextEditor = exports.TextEditor = /*#__PURE__*/_react.default.forwardRef((
       editMode: true
     }
   }, /*#__PURE__*/_react.default.createElement(_textEditor.StyledEditorWrapper, _extends({
-    ref: wrapper
+    ref: wrapper,
+    "data-role": "text-editor-wrapper"
   }, rest), /*#__PURE__*/_react.default.createElement(_labelWrapper.default, {
     onClick: () => handleEditorFocus(true)
   }, /*#__PURE__*/_react.default.createElement(_label.default, {
@@ -286,7 +287,8 @@ const TextEditor = exports.TextEditor = /*#__PURE__*/_react.default.forwardRef((
     warning: !!(!error && warning)
   })), /*#__PURE__*/_react.default.createElement(_textEditor.StyledEditorOutline, {
     isFocused: isFocused,
-    hasError: !!error
+    hasError: !!error,
+    "data-role": "editor-outline"
   }, /*#__PURE__*/_react.default.createElement(_textEditor.StyledEditorContainer, {
     "data-component": "text-editor-container",
     hasError: !!error,

package/lib/components/textarea/textarea.component.js

@@ -75,6 +75,7 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
   const {
     validationRedesignOptIn
   } = (0, _react.useContext)(_newValidation.default);
+  const labelInlineWithNewValidation = validationRedesignOptIn ? false : labelInline;
   const [textareaMinHeight, setTextareaMinHeight] = (0, _react.useState)(_textarea.DEFAULT_MIN_HEIGHT);
   const computeLabelPropValues = prop => validationRedesignOptIn ? undefined : prop;
   const {
@@ -226,7 +227,7 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
     tooltipPosition: tooltipPosition,
     helpAriaLabel: helpAriaLabel
   }, /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputBehaviour, null, /*#__PURE__*/_react.default.createElement(_textarea.default, _extends({
-    labelInline: labelInline,
+    labelInline: labelInlineWithNewValidation,
     "data-component": dataComponent,
     "data-role": dataRole,
     "data-element": dataElement,
@@ -242,7 +243,7 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
     labelId: labelId,
     disabled: disabled,
     id: id,
-    labelInline: computeLabelPropValues(labelInline),
+    labelInline: computeLabelPropValues(labelInlineWithNewValidation),
     labelAlign: computeLabelPropValues(labelAlign),
     labelWidth: computeLabelPropValues(labelWidth),
     labelHelp: computeLabelPropValues(labelHelp),

package/lib/hooks/__internal__/useChildButtons/useChildButtons.js

@@ -13,7 +13,6 @@ const useChildButtons = (toggleButtonRef, widthRatio = 1) => {
   const [minWidth, setMinWidth] = (0, _react.useState)(0);
   const buttonNode = (0, _react.useRef)(null);
   const childrenContainer = (0, _react.useRef)(null);
-  const focusFirstChildButtonOnOpen = (0, _react.useRef)(false);
   const hideButtons = (0, _react.useCallback)(() => {
     setShowAdditionalButtons(false);
   }, []);
@@ -26,20 +25,16 @@ const useChildButtons = (toggleButtonRef, widthRatio = 1) => {
     }
   }
   const getButtonChildren = (0, _react.useCallback)(() => childrenContainer.current?.querySelectorAll('[data-component="button"]'), []);
-  (0, _react.useEffect)(() => {
-    const firstChild = getButtonChildren()?.[0];
-    if (focusFirstChildButtonOnOpen.current && showAdditionalButtons && firstChild) {
-      focusFirstChildButtonOnOpen.current = false;
-      firstChild.focus();
-    }
-  }, [showAdditionalButtons, getButtonChildren]);
   const handleToggleButtonKeyDown = ev => {
-    if (_events.default.isEnterKey(ev) || _events.default.isSpaceKey(ev) || _events.default.isDownKey(ev) || _events.default.isUpKey(ev)) {
+    const isToggleKey = _events.default.isEnterKey(ev) || _events.default.isSpaceKey(ev) || _events.default.isDownKey(ev) || _events.default.isUpKey(ev) || showAdditionalButtons && _events.default.isTabKey(ev);
+    if (isToggleKey) {
       ev.preventDefault();
       if (!showAdditionalButtons) {
         showButtons();
       }
-      focusFirstChildButtonOnOpen.current = true;
+      setTimeout(() => {
+        getButtonChildren()?.[0]?.focus();
+      });
     }
   };
   const handleKeyDown = (0, _useMenuKeyboardNavigation.default)(toggleButtonRef, getButtonChildren, hideButtons, showAdditionalButtons);

package/package.json

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