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

package/package.json

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

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

@@ -21,6 +21,9 @@ const IconWrapper = styled.div`
   justify-content: center;
   transition: transform 0.3s ease;
   ${({ open }) => (open ? "transform: rotate(-180deg)" : "")}
+  position: absolute;
+  top: 20px;
+  right: 12px;
 `;
 
 const DropdownContentWrapper = styled.div`
@@ -120,15 +123,11 @@ const Dropdown = ({
     value ? options.find(option => option.value === value)?.text : placeholder;
 
   const onKeyDown = e => {
-    console.log("key down event is", e.target);
-    console.log("key down event value is", e.target.value);
+    console.log("current input value", inputValue);
     const { key, keyCode } = e;
     const focus = document.activeElement;
     console.log("dropdown value is", value);
-    console.log("focus is", focus);
-    console.log("option refs are", optionRefs.current);
     const optionEl = optionRefs.current.find(ref => ref.current === focus);
-    console.log("option el is", optionEl);
     switch (key) {
       case "ArrowDown":
         e.preventDefault();
@@ -184,13 +183,6 @@ const Dropdown = ({
   };
 
   useEffect(() => {
-    console.log("option refs in isopen useffect", optionRefs);
-    console.log(
-      "option ref current in isopen useffect",
-      optionRefs.current[0].current
-    );
-    console.log("selected refs in isopen useffect", selectedRef);
-    console.log("value in isopen useffect", value);
     if (isOpen && selectedRef !== undefined && selectedRef.current !== null) {
       // WAI-ARIA requires the selected option to receive focus
       selectedRef.current.focus();
@@ -223,8 +215,6 @@ const Dropdown = ({
       !disabledValues.includes(filteredOptions[0].value) &&
       filteredOptions[0].text != placeholder
     ) {
-      console.log("filtered options are", filteredOptions);
-      console.log("option refs are", optionRefs);
       onSelect(filteredOptions[0].value);
     }
     if (optionRefs.current[0].current) {
@@ -238,23 +228,12 @@ const Dropdown = ({
     <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();
-        }
+        onClick();
       }}
+      onKeyDown={onKeyDown}
       width="100%"
     >
       <Stack direction="row" bottomItem={2}>
@@ -289,15 +268,15 @@ const Dropdown = ({
           hoverStyles={`background-color: ${themeValues.hoverColor};`}
           isOpen={isOpen}
           minHeight="48px"
-          minWidth="85%"
+          minWidth="100%"
           name={autocompleteValue}
-          onKeyDown={onKeyDown}
           onFocus={() => {
             if (!isOpen) {
               onClick();
             }
           }}
           onChange={e => {
+            console.log("current input value", inputValue);
             console.log("input change event", e.target);
             console.log("input change event value", e.target.value);
             setInputValue(e.target.value);
@@ -310,7 +289,7 @@ const Dropdown = ({
           type="text"
           tabIndex={0}
           value={inputValue}
-          width="85%"
+          width="100%"
           dataQa={placeholder}
         />
         <IconWrapper open={isOpen}>