@thecb/components 6.0.0-beta.21 → 6.0.0-beta.24

package/dist/index.cjs.js

@@ -20746,6 +20746,11 @@ var Dropdown = function Dropdown(_ref8) {
       focusedRef = _useState12[0],
       setFocusedRef = _useState12[1];
 
+  var _useState13 = React.useState(false),
+      _useState14 = _slicedToArray(_useState13, 2),
+      inputChangedByAutofill = _useState14[0],
+      setInputChangedByAutofill = _useState14[1];
+
   if (optionsState !== options) {
     setOptionsState(options);
     setOptionsChanged(true);
@@ -20756,10 +20761,10 @@ var Dropdown = function Dropdown(_ref8) {
     setOptionsChanged(false);
   }
 
-  var _useState13 = React.useState(null),
-      _useState14 = _slicedToArray(_useState13, 2),
-      timer = _useState14[0],
-      setTimer = _useState14[1];
+  var _useState15 = React.useState(null),
+      _useState16 = _slicedToArray(_useState15, 2),
+      timer = _useState16[0],
+      setTimer = _useState16[1];
 
   var optionRefs = React.useRef(_toConsumableArray(Array(options.length)).map(function () {
     return /*#__PURE__*/React.createRef();
@@ -20897,8 +20902,21 @@ var Dropdown = function Dropdown(_ref8) {
     }));
   }, [inputValue]);
   React.useEffect(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) {
+        setTimeout(function () {
+          return _onClick();
+        }, 2000);
+      }
     }
 
     if (optionRefs.current[0].current) {
@@ -20940,13 +20958,6 @@ 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);
@@ -20954,6 +20965,7 @@ var Dropdown = function Dropdown(_ref8) {
 
       if (e.target.value !== inputValue) {
         setInputValue(e.target.value);
+        setInputChangedByAutofill(true);
       }
     },
     padding: "12px",