carbon-react 133.0.2 → 133.0.4

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

@@ -139,7 +139,11 @@ export const ButtonToggle = ({
     onBlur: handleBlur,
     onClick: handleClick,
     onKeyDown: handleKeyDown
-  }, tabbable ? {} : {
+    // In Safari non-text input elements do not gain focus on click. To get around this, we have to apply a tab-index of 0 here.
+    // This is to allow the ButtonToggle component to be focused when it is the first tabbable element.
+  }, tabbable ? {
+    tabIndex: 0
+  } : {
     tabIndex: -1
   }, {
     allowDeselect: allowDeselect,

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

@@ -335,7 +335,10 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     });
   }, [childrenList, filterText, getIndexOfMatch, virtualizer]);
   useEffect(() => {
-    if (!highlightedValue) {
+    // remove the current selected option if the value is cleared
+    // this prevents it from remaining highlighted when the list is re-opened
+    if ((!highlightedValue || Object.keys(highlightedValue).length === 0) && !isOpen) {
+      setCurrentOptionsListIndex(-1);
       return;
     }
     const indexOfMatch = getIndexOfMatch(highlightedValue);
@@ -343,7 +346,7 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
       return;
     }
     setCurrentOptionsListIndex(indexOfMatch);
-  }, [getIndexOfMatch, highlightedValue]);
+  }, [getIndexOfMatch, highlightedValue, isOpen]);
 
   // ensure that the currently-selected option is always visible immediately after
   // it has been changed

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

@@ -148,7 +148,11 @@ const ButtonToggle = ({
     onBlur: handleBlur,
     onClick: handleClick,
     onKeyDown: handleKeyDown
-  }, tabbable ? {} : {
+    // In Safari non-text input elements do not gain focus on click. To get around this, we have to apply a tab-index of 0 here.
+    // This is to allow the ButtonToggle component to be focused when it is the first tabbable element.
+  }, tabbable ? {
+    tabIndex: 0
+  } : {
     tabIndex: -1
   }, {
     allowDeselect: allowDeselect,

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

@@ -344,7 +344,10 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     });
   }, [childrenList, filterText, getIndexOfMatch, virtualizer]);
   (0, _react.useEffect)(() => {
-    if (!highlightedValue) {
+    // remove the current selected option if the value is cleared
+    // this prevents it from remaining highlighted when the list is re-opened
+    if ((!highlightedValue || Object.keys(highlightedValue).length === 0) && !isOpen) {
+      setCurrentOptionsListIndex(-1);
       return;
     }
     const indexOfMatch = getIndexOfMatch(highlightedValue);
@@ -352,7 +355,7 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
       return;
     }
     setCurrentOptionsListIndex(indexOfMatch);
-  }, [getIndexOfMatch, highlightedValue]);
+  }, [getIndexOfMatch, highlightedValue, isOpen]);
 
   // ensure that the currently-selected option is always visible immediately after
   // it has been changed

package/package.json

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