@thecb/components 6.0.0-beta.13 → 6.0.0-beta.14

package/package.json

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

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

@@ -39,6 +39,10 @@ const DropdownContentWrapper = styled.div`
   &:focus {
     outline: none;
   }
+
+  ul {
+    padding-left: 0;
+  }
 `;
 
 const DropdownItemWrapper = styled.li`
@@ -233,8 +237,24 @@ const Dropdown = ({
   return (
     <Box
       padding="0"
+      background={isOpen ? themeValues.hoverColor : WHITE}
+      borderSize="1px"
+      borderColor={
+        isError
+          ? ERROR_COLOR
+          : isOpen
+          ? themeValues.selectedColor
+          : GREY_CHATEAU
+      }
+      borderRadius="2px"
+      borderWidthOverride="0px 1px 0px 0px"
       extraStyles={`position: relative;`}
       minWidth="100%"
+      onClick={() => {
+        if (!isOpen) {
+          onClick();
+        }
+      }}
       width="100%"
     >
       <Stack direction="row" bottomItem={2}>
@@ -259,6 +279,7 @@ const Dropdown = ({
               ? themeValues.selectedColor
               : GREY_CHATEAU
           }
+          borderWidthOverride="1px 0px 1px 1px"
           extraStyles={
             disabled &&
             `color: #6e727e;
@@ -267,11 +288,15 @@ const Dropdown = ({
           }
           hoverStyles={`background-color: ${themeValues.hoverColor};`}
           isOpen={isOpen}
+          minHeight="48px"
           minWidth="85%"
           name={autocompleteValue}
           onKeyDown={onKeyDown}
-          onClick={onClick}
-          onFocus={onClick}
+          onFocus={() => {
+            if (!isOpen) {
+              onClick();
+            }
+          }}
           onChange={e => {
             console.log("input change event", e.target);
             console.log("input change event value", e.target.value);
@@ -283,7 +308,7 @@ const Dropdown = ({
           themeValues={themeValues}
           title={hasTitles ? getSelection() : null}
           type="text"
-          tabIndex={-1}
+          tabIndex={0}
           value={inputValue}
           width="85%"
           dataQa={placeholder}