@thecb/components 6.0.0-beta.20 → 6.0.0-beta.23

package/package.json

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

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

@@ -96,7 +96,7 @@ const Dropdown = ({
   widthFitOptions = false,
   disabled,
   hasTitles = false,
-  autoEraseTypeAhead = true, // legacy behavior as of 05/22
+  autoEraseTypeAhead = true,
   ariaLabelledby,
   autocompleteValue = "" // autofill item for browsers, like country-name or address-level1 for state
 }) => {
@@ -106,6 +106,7 @@ const Dropdown = ({
   const [optionsChanged, setOptionsChanged] = useState(true);
   const [selectedRef, setSelectedRef] = useState(undefined);
   const [focusedRef, setFocusedRef] = useState(undefined);
+  const [inputChangedByAutofill, setInputChangedByAutofill] = useState(false);
 
   if (optionsState !== options) {
     setOptionsState(options);
@@ -231,12 +232,21 @@ const Dropdown = ({
 
   useEffect(() => {
     if (
-      !isOpen &&
+      /*
+        Either user has typed a value into input that matches a non-disabled option
+        or
+        user has autofilled or pasted into input a string matching a valid option
+      */
+      (!isOpen || inputChangedByAutofill) &&
       filteredOptions[0] &&
       !disabledValues.includes(filteredOptions[0].value) &&
       filteredOptions[0].text != placeholder
     ) {
+      setInputChangedByAutofill(false);
       onSelect(filteredOptions[0].value);
+      if (isOpen) {
+        onClick();
+      }
     }
     if (optionRefs.current[0].current) {
       optionRefs.current[0].current.focus();
@@ -291,20 +301,14 @@ const Dropdown = ({
         minHeight="48px"
         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);
           // support autofill and copy/paste
-          if (e.tarvet.value !== inputValue) {
+          if (e.target.value !== inputValue) {
             setInputValue(e.target.value);
+            setInputChangedByAutofill(true);
           }
         }}
         padding="12px"