@thecb/components 6.0.0-beta.0 → 6.0.0-beta.3

package/dist/index.cjs.js

@@ -19468,7 +19468,9 @@ var Dropdown = function Dropdown(_ref9) {
       widthFitOptions = _ref9$widthFitOptions === void 0 ? false : _ref9$widthFitOptions,
       disabled = _ref9.disabled,
       _ref9$hasTitles = _ref9.hasTitles,
-      hasTitles = _ref9$hasTitles === void 0 ? false : _ref9$hasTitles;
+      hasTitles = _ref9$hasTitles === void 0 ? false : _ref9$hasTitles,
+      _ref9$autoEraseTypeAh = _ref9.autoEraseTypeAhead,
+      autoEraseTypeAhead = _ref9$autoEraseTypeAh === void 0 ? true : _ref9$autoEraseTypeAh;
 
   var _useState = React.useState(""),
       _useState2 = _slicedToArray(_useState, 2),
@@ -19490,6 +19492,11 @@ var Dropdown = function Dropdown(_ref9) {
       optionsChanged = _useState8[0],
       setOptionsChanged = _useState8[1];
 
+  var _useState9 = React.useState(undefined),
+      _useState10 = _slicedToArray(_useState9, 2),
+      selectedRef = _useState10[0],
+      setSelectedRef = _useState10[1];
+
   if (optionsState !== options) {
     setOptionsState(options);
     setOptionsChanged(true);
@@ -19500,10 +19507,10 @@ var Dropdown = function Dropdown(_ref9) {
     setOptionsChanged(false);
   }
 
-  var _useState9 = React.useState(null),
-      _useState10 = _slicedToArray(_useState9, 2),
-      timer = _useState10[0],
-      setTimer = _useState10[1];
+  var _useState11 = React.useState(null),
+      _useState12 = _slicedToArray(_useState11, 2),
+      timer = _useState12[0],
+      setTimer = _useState12[1];
 
   var optionRefs = React.useRef(_toConsumableArray(Array(options.length)).map(function () {
     return /*#__PURE__*/React.createRef();
@@ -19522,6 +19529,7 @@ var Dropdown = function Dropdown(_ref9) {
     var key = e.key,
         keyCode = e.keyCode;
     var focus = document.activeElement;
+    console.log("dropdown value is", value);
     console.log("focus is", focus);
     console.log("option refs are", optionRefs.current);
     var optionEl = optionRefs.current.find(function (ref) {
@@ -19571,6 +19579,8 @@ var Dropdown = function Dropdown(_ref9) {
 
       case "Backspace" :
         e.preventDefault();
+        console.log("input value is", inputValue);
+        console.log("new input value will be", inputValue.slice(0, -1));
         setInputValue(inputValue.slice(0, -1));
         break;
     }
@@ -19582,6 +19592,10 @@ var Dropdown = function Dropdown(_ref9) {
   };
 
   React.useEffect(function () {
+    console.log("option refs in isopen useffect", optionRefs.current[0].current);
+    console.log("selected refs in isopen useffect", selectedRef);
+    console.log("value in isopen useffect", value);
+
     if (isOpen && optionRefs.current[0].current) {
       optionRefs.current[0].current.focus();
     }
@@ -19590,10 +19604,13 @@ var Dropdown = function Dropdown(_ref9) {
     setInputValue("");
   }, [isOpen]);
   React.useEffect(function () {
-    clearTimeout(timer);
-    setTimer(setTimeout(function () {
-      return setInputValue("");
-    }, 2000));
+    if (autoEraseTypeAhead) {
+      clearTimeout(timer);
+      setTimer(setTimeout(function () {
+        return setInputValue("");
+      }, 2000));
+    }
+
     setFilteredOptions(options.filter(function (option) {
       return option.value.toLowerCase().startsWith(inputValue.toLowerCase()) || option.text.toLowerCase().startsWith(inputValue.toLowerCase());
     }));
@@ -19652,6 +19669,10 @@ var Dropdown = function Dropdown(_ref9) {
   }, /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "0"
   }, filteredOptions.map(function (choice, i) {
+    if (selectedRef === undefined && choice.value === value) {
+      setSelectedRef(optionRefs.current[i]);
+    }
+
     return /*#__PURE__*/React__default.createElement(DropdownItemWrapper, {
       key: choice.value,
       ref: optionRefs.current[i],