@thecb/components 6.0.0-beta.17 → 6.0.0-beta.18

package/package.json

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

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

@@ -190,6 +190,18 @@ const Dropdown = ({
     }
   };
 
+  const handleItemSelection = (evt, choice, i) => {
+    disabledValues.includes(choice.value)
+      ? evt => evt.preventDefault()
+      : () => {
+          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
@@ -279,15 +291,20 @@ const Dropdown = ({
         minWidth="100%"
         name={autocompleteValue}
         onFocus={() => {
+          /*
           if (!isOpen) {
             onClick();
           }
+          */
         }}
         onChange={e => {
           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()}
@@ -332,17 +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);
-                            if (isOpen) {
-                              onClick();
-                            }
-                          }
-                    }
+                    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)}