@thecb/components 6.0.0-beta.16 → 6.0.0-beta.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "6.0.0-beta.16",
+  "version": "6.0.0-beta.19",
   "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,7 +21,7 @@ const IconWrapper = styled.div`
   flex-direction: column;
   justify-content: center;
   transition: transform 0.3s ease;
-  ${({ open }) => (open ? "transform: rotate(-180deg)" : "")}
+  ${({ open }) => (open ? "transform: rotate(-180deg)" : "")};
   top: 20px;
   right: 12px;
 `;
@@ -123,7 +123,7 @@ const Dropdown = ({
     value ? options.find(option => option.value === value)?.text : placeholder;
 
   const onKeyDown = e => {
-    console.log("current input value", inputValue);
+    console.log("current input value top of keyDown", inputValue);
     const { key, keyCode } = e;
     const focus = document.activeElement;
     console.log("dropdown value is", value);
@@ -185,10 +185,23 @@ const Dropdown = ({
     }
     if ((keyCode > 64 && keyCode < 91) || keyCode == 32 || keyCode == 189) {
       e.preventDefault();
+      console.log("current input value inside keydown if", inputValue);
       setInputValue(inputValue + key);
     }
   };
 
+  const handleItemSelection = (evt, choice, i) => {
+    if (disabledValues.includes(choice.value)) {
+      evt.preventDefault();
+    } else {
+      setSelectedRef(optionRefs.current[i]);
+      onSelect(choice.value);
+      if (isOpen) {
+        onClick();
+      }
+    }
+  };
+
   useEffect(() => {
     if (isOpen && selectedRef !== undefined && selectedRef.current !== null) {
       // WAI-ARIA requires the selected option to receive focus
@@ -278,15 +291,20 @@ const Dropdown = ({
         minWidth="100%"
         name={autocompleteValue}
         onFocus={() => {
+          /*
           if (!isOpen) {
             onClick();
           }
+          */
         }}
         onChange={e => {
-          console.log("current input value", inputValue);
+          console.log("current input value onChange", inputValue);
           console.log("input change event", e.target);
           console.log("input change event value", e.target.value);
-          setInputValue(e.target.value);
+          // support autofill and copy/paste
+          if (e.tarvet.value !== inputValue) {
+            setInputValue(e.target.value);
+          }
         }}
         padding="12px"
         placeholder={getSelection()}
@@ -331,14 +349,12 @@ const Dropdown = ({
                     key={choice.value}
                     ref={optionRefs.current[i]}
                     tabIndex={-1}
-                    onClick={
-                      disabledValues.includes(choice.value)
-                        ? evt => evt.preventDefault()
-                        : () => {
-                            setSelectedRef(optionRefs.current[i]);
-                            onSelect(choice.value);
-                          }
-                    }
+                    onClick={e => handleItemSelection(e, choice, i)}
+                    onKeyDown={e => {
+                      if (e.keyCode === 13) {
+                        handleItemSelection(e, choice, i);
+                      }
+                    }}
                     selected={choice.value === value}
                     aria-selected={choice.value === value}
                     disabled={disabledValues.includes(choice.value)}