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

package/dist/index.cjs.js

@@ -19408,7 +19408,7 @@ var fallbackValues$e = {
 var IconWrapper = styled__default.div.withConfig({
   displayName: "Dropdown__IconWrapper",
   componentId: "sc-pn6m0h-0"
-})(["position:absolute;display:flex;flex-direction:column;justify-content:center;transition:transform 0.3s ease;", " top:20px;right:12px;"], function (_ref) {
+})(["position:absolute;display:flex;flex-direction:column;justify-content:center;transition:transform 0.3s ease;", ";top:20px;right:12px;"], function (_ref) {
   var open = _ref.open;
   return open ? "transform: rotate(-180deg)" : "";
 });
@@ -19529,7 +19529,7 @@ var Dropdown = function Dropdown(_ref8) {
   var onKeyDown = function onKeyDown(e) {
     var _optionRefs$current$l, _optionRefs$current;
 
-    console.log("current input value", inputValue);
+    console.log("current input value top of keyDown", inputValue);
     var key = e.key,
         keyCode = e.keyCode;
     var focus = document.activeElement;
@@ -19607,10 +19607,24 @@ var Dropdown = function Dropdown(_ref8) {
 
     if (keyCode > 64 && keyCode < 91 || keyCode == 32 || keyCode == 189) {
       e.preventDefault();
+      console.log("current input value inside keydown if", inputValue);
       setInputValue(inputValue + key);
     }
   };
 
+  var handleItemSelection = function handleItemSelection(evt, choice, i) {
+    if (disabledValues.includes(choice.value)) {
+      evt.preventDefault();
+    } else {
+      setSelectedRef(optionRefs.current[i]);
+      onSelect(choice.value);
+
+      if (isOpen) {
+        _onClick();
+      }
+    }
+  };
+
   React.useEffect(function () {
     if (isOpen && selectedRef !== undefined && selectedRef.current !== null) {
       // WAI-ARIA requires the selected option to receive focus
@@ -19680,15 +19694,20 @@ var Dropdown = function Dropdown(_ref8) {
     minWidth: "100%",
     name: autocompleteValue,
     onFocus: function onFocus() {
+      /*
       if (!isOpen) {
-        _onClick();
+        onClick();
       }
+      */
     },
     onChange: function 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);
+      console.log("input change event value", e.target.value); // support autofill and copy/paste
+
+      if (e.tarvet.value !== inputValue) {
+        setInputValue(e.target.value);
+      }
     },
     padding: "12px",
     placeholder: getSelection(),
@@ -19724,11 +19743,13 @@ var Dropdown = function Dropdown(_ref8) {
       key: choice.value,
       ref: optionRefs.current[i],
       tabIndex: -1,
-      onClick: disabledValues.includes(choice.value) ? function (evt) {
-        return evt.preventDefault();
-      } : function () {
-        setSelectedRef(optionRefs.current[i]);
-        onSelect(choice.value);
+      onClick: function onClick(e) {
+        return handleItemSelection(e, choice, i);
+      },
+      onKeyDown: function onKeyDown(e) {
+        if (e.keyCode === 13) {
+          handleItemSelection(e, choice, i);
+        }
       },
       selected: choice.value === value,
       "aria-selected": choice.value === value,