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

package/dist/index.esm.js

@@ -20738,6 +20738,11 @@ var Dropdown = function Dropdown(_ref8) {
       focusedRef = _useState12[0],
       setFocusedRef = _useState12[1];
 
+  var _useState13 = useState(false),
+      _useState14 = _slicedToArray(_useState13, 2),
+      inputChangedByAutofill = _useState14[0],
+      setInputChangedByAutofill = _useState14[1];
+
   if (optionsState !== options) {
     setOptionsState(options);
     setOptionsChanged(true);
@@ -20748,10 +20753,10 @@ var Dropdown = function Dropdown(_ref8) {
     setOptionsChanged(false);
   }
 
-  var _useState13 = useState(null),
-      _useState14 = _slicedToArray(_useState13, 2),
-      timer = _useState14[0],
-      setTimer = _useState14[1];
+  var _useState15 = useState(null),
+      _useState16 = _slicedToArray(_useState15, 2),
+      timer = _useState16[0],
+      setTimer = _useState16[1];
 
   var optionRefs = useRef(_toConsumableArray(Array(options.length)).map(function () {
     return /*#__PURE__*/createRef();
@@ -20889,8 +20894,19 @@ var Dropdown = function Dropdown(_ref8) {
     }));
   }, [inputValue]);
   useEffect$1(function () {
-    if (!isOpen && filteredOptions[0] && !disabledValues.includes(filteredOptions[0].value) && filteredOptions[0].text != placeholder) {
+    if (
+    /*
+      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) {
@@ -20932,20 +20948,14 @@ var Dropdown = function Dropdown(_ref8) {
     minHeight: "48px",
     minWidth: "100%",
     name: autocompleteValue,
-    onFocus: function onFocus() {
-      /*
-      if (!isOpen) {
-        onClick();
-      }
-      */
-    },
     onChange: function 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",