@bolttech/molecules-dropdown 0.17.1 → 0.17.3

package/index.cjs

@@ -2484,6 +2484,7 @@ const ReusableDropdownComponent = _a => {
             value: inputLabel,
             variant: variant,
             placeholder: placeholder,
+            autoComplete: "off",
             onChange: e => {
               var _a, _b;
               onChangeInputValue(((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value) || '');
@@ -2667,12 +2668,12 @@ const Dropdown = /*#__PURE__*/react.forwardRef((_a, ref) => {
       placeholder
     } = _a,
     props = __rest(_a, ["label", "variant", "required", "optionList", "disabled", "errorMessage", "urlFilterOptions", "id", "dataTestId", "filterOptionsParam", "value", "onChange", "onBlur", "onFocus", "placeholder"]);
+  const [isFirstRender, setIsFirstRender] = react.useState(true);
   const [showSelectComponent, setShowSelectComponent] = react.useState(false);
   const [currentOptionList, setCurrentOptionList] = react.useState([]);
   const [inputValue, setInputValue] = react.useState('');
   const [inputLabel, setInputLabel] = react.useState('');
   const [internalSelectedOption, setInternalSelectedOption] = react.useState();
-  const [isFirstRender, setIsFirstRender] = react.useState(true);
   const inputRef = react.useRef(null);
   react.useEffect(() => {
     const normalizeOptionList = () => __awaiter(void 0, void 0, void 0, function* () {
@@ -2699,10 +2700,16 @@ const Dropdown = /*#__PURE__*/react.forwardRef((_a, ref) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [internalSelectedOption]);
   react.useEffect(() => {
+    if (value !== (internalSelectedOption === null || internalSelectedOption === void 0 ? void 0 : internalSelectedOption.id)) {
+      const foundOption = optionList === null || optionList === void 0 ? void 0 : optionList.find(option => option.id === value);
+      setInternalSelectedOption(foundOption);
+      setInputValue((foundOption === null || foundOption === void 0 ? void 0 : foundOption.value) || '');
+      setInputLabel((foundOption === null || foundOption === void 0 ? void 0 : foundOption.label) || '');
+    }
     if (!isFirstRender || currentOptionList.length === 0) return;
     setInternalSelectedOption(currentOptionList.find(option => option.id === value));
     setIsFirstRender(false);
-  }, [currentOptionList, isFirstRender, setSelectedOptionOnInputValue, value]);
+  }, [currentOptionList, setSelectedOptionOnInputValue, value, internalSelectedOption, optionList, isFirstRender]);
   return jsxRuntime.jsxs(SectionContainer, Object.assign({
     onClick: () => {
       var _a;
@@ -2774,12 +2781,12 @@ const DropdownWithHeaders = /*#__PURE__*/react.forwardRef((_a, ref) => {
       placeholder
     } = _a,
     props = __rest(_a, ["label", "variant", "required", "optionList", "disabled", "errorMessage", "urlFilterOptions", "dataTestId", "filterOptionsParam", "value", "onChange", "onBlur", "onFocus", "placeholder"]);
+  const [isFirstRender, setIsFirstRender] = react.useState(true);
   const [showSelectComponent, setShowSelectComponent] = react.useState(false);
   const [currentOptionList, setCurrentOptionList] = react.useState([]);
   const [inputValue, setInputValue] = react.useState('');
   const [inputLabel, setInputLabel] = react.useState('');
   const [internalSelectedOption, setInternalSelectedOption] = react.useState();
-  const [isFirstRender, setIsFirstRender] = react.useState(true);
   const inputRef = react.useRef(null);
   react.useEffect(() => {
     const normalizeOptionList = () => __awaiter(void 0, void 0, void 0, function* () {
@@ -2810,12 +2817,21 @@ const DropdownWithHeaders = /*#__PURE__*/react.forwardRef((_a, ref) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [internalSelectedOption]);
   react.useEffect(() => {
+    if (value !== (internalSelectedOption === null || internalSelectedOption === void 0 ? void 0 : internalSelectedOption.id)) {
+      const option = (optionList === null || optionList === void 0 ? void 0 : optionList.map(currentOptionsList => {
+        return currentOptionsList.options.find(option => option.id === value);
+      })[0]) || undefined;
+      setInternalSelectedOption(option);
+      setInputValue((option === null || option === void 0 ? void 0 : option.value) || '');
+      setInputLabel((option === null || option === void 0 ? void 0 : option.label) || '');
+      return;
+    }
     if (!isFirstRender || currentOptionList.length === 0) return;
     setInternalSelectedOption(currentOptionList.map(optionsList => {
       return optionsList.options.find(option => option.id === value);
     })[0] || undefined);
     setIsFirstRender(false);
-  }, [currentOptionList, isFirstRender, setSelectedOptionOnInputValue, value]);
+  }, [currentOptionList, value, optionList, internalSelectedOption === null || internalSelectedOption === void 0 ? void 0 : internalSelectedOption.id, isFirstRender]);
   return jsxRuntime.jsxs(SectionContainer, Object.assign({
     onClick: () => {
       var _a;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bolttech/molecules-dropdown",
-  "version": "0.17.1",
+  "version": "0.17.3",
   "main": "./index.cjs",
   "type": "commonjs",
   "types": "./src/index.d.ts",
@@ -10,7 +10,7 @@
     "@bolttech/atoms-select": "0.18.1",
     "@bolttech/default-theme": "0.0.3",
     "@bolttech/form-engine": "0.5.0",
-    "@bolttech/frontend-foundations": "0.0.3",
+    "@bolttech/frontend-foundations": "0.1.1",
     "@bolttech/ui-utils": "0.1.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",