carbon-react 133.0.3 → 133.0.5

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/esm/components/select/select.style.js

@@ -68,8 +68,9 @@ const StyledSelect = styled.div`
     ${!hasTextCursor && css`
       ${StyledInput} {
         position: absolute;
-        width: auto;
+        width: inherit;
         opacity: 0;
+        padding: 0;
       }
     `}
   `}

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/lib/components/select/select.style.js

@@ -77,8 +77,9 @@ const StyledSelect = _styledComponents.default.div`
     ${!hasTextCursor && (0, _styledComponents.css)`
       ${_input.default} {
         position: absolute;
-        width: auto;
+        width: inherit;
         opacity: 0;
+        padding: 0;
       }
     `}
   `}

package/package.json

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