@thecb/components 6.0.0-beta.4 → 6.0.0-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "6.0.0-beta.4",
+  "version": "6.0.0-beta.5",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/atoms/dropdown/Dropdown.js

@@ -74,10 +74,11 @@ const DropdownItemWrapper = styled.div`
 
 const SearchInput = styled.input`
   border: none;
-  background-color: ${({ themeValues }) =>
-    themeValues.hoverColor && themeValues.hoverColor};
+  background-color: ${({ themeValues, isOpen }) =>
+    isOpen ? themeValues.hoverColor && themeValues.hoverColor : "WHITE"};
   font-size: 16px;
   height: 24px;
+  min-width: 75%;
 `;
 
 const Dropdown = ({
@@ -264,6 +265,7 @@ const Dropdown = ({
             : GREY_CHATEAU
         }
         borderRadius="2px"
+        tabIndex={0}
         dataQa={placeholder}
         extraStyles={`height: 48px;
           ${disabled &&
@@ -285,7 +287,7 @@ const Dropdown = ({
             aria-autocomplete="list"
             aria-controls={`${ariaLabelledby}_listbox`}
             aria-activedescendant="selected_option"
-            tabIndex={0}
+            isOpen={isOpen}
           />
           <IconWrapper open={isOpen}>
             <DropdownIcon />
@@ -304,7 +306,10 @@ const Dropdown = ({
         >
           <Stack childGap="0">
             {filteredOptions.map((choice, i) => {
-              if (selectedRef === undefined && choice.value === value) {
+              if (
+                choice.value === value &&
+                selectedRef !== optionRefs.current[i]
+              ) {
                 setSelectedRef(optionRefs.current[i]);
               }
               return (
@@ -317,7 +322,10 @@ const Dropdown = ({
                   onClick={
                     disabledValues.includes(choice.value)
                       ? evt => evt.preventDefault()
-                      : () => onSelect(choice.value)
+                      : () => {
+                          setSelectedRef(optionRefs.current[i]);
+                          onSelect(choice.value);
+                        }
                   }
                   selected={choice.value === value}
                   aria-selected={choice.value === value}