react-core-ts 3.0.0 → 4.0.0

package/dist/ReactAutoCompleteDropdown.js

@@ -1,92 +1,48 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var customIcons_1 = __importDefault(require("./components/customIcons"));
-var Spinner_1 = __importDefault(require("./components/loader/Spinner"));
-var portal_1 = __importDefault(require("./components/portal"));
-var debounce_1 = require("./utilities/debounce");
-var getPosition_1 = require("./utilities/getPosition");
-var icons_1 = require("./utilities/icons");
-var ModernAutoCompleteDropdown = function (_a) {
-    var _b;
-    var label = _a.label, onChange = _a.onChange, getData = _a.getData, data = _a.data, errors = _a.errors, _c = _a.required, required = _c === void 0 ? false : _c, autoFocus = _a.autoFocus, name = _a.name, _d = _a.shortCode, shortCode = _d === void 0 ? '' : _d, _e = _a.labelCode, labelCode = _e === void 0 ? '' : _e, fullWidth = _a.fullWidth, placeholder = _a.placeholder, id = _a.id, propsClassName = _a.className, _f = _a.type, type = _f === void 0 ? 'custom_select' : _f, readOnly = _a.readOnly, _g = _a.disabled, disabled = _g === void 0 ? false : _g, value = _a.value, _h = _a.autoFilter, autoFilter = _h === void 0 ? false : _h, _j = _a.autoDropdown, autoDropdown = _j === void 0 ? true : _j, _k = _a.insideOpen, insideOpen = _k === void 0 ? false : _k, _l = _a.isClose, isClose = _l === void 0 ? true : _l, _m = _a.noLocalFilter, noLocalFilter = _m === void 0 ? false : _m, _o = _a.isStaticList, isStaticList = _o === void 0 ? false : _o, _p = _a.isCustomPlaceholder, isCustomPlaceholder = _p === void 0 ? false : _p, checkParams = _a.checkParams, width = _a.width, hasParentError = _a.hasParentError, fromPrefix = _a.fromPrefix, labelTitle = _a.labelTitle, _q = _a.isModern, isModern = _q === void 0 ? true : _q, _r = _a.size, size = _r === void 0 ? 'md' : _r;
-    var _s = (0, react_1.useState)((_b = value === null || value === void 0 ? void 0 : value.name) !== null && _b !== void 0 ? _b : ''), inputValue = _s[0], setInputValue = _s[1];
-    var _t = (0, react_1.useState)(false), isHovered = _t[0], setIsHovered = _t[1];
-    var _u = (0, react_1.useState)(false), isLoading = _u[0], setIsLoading = _u[1];
-    var _v = (0, react_1.useState)(false), dropOpen = _v[0], setDropOpen = _v[1];
-    var _w = (0, react_1.useState)(disabled), isDisabled = _w[0], setIsDisabled = _w[1];
-    var _x = (0, react_1.useState)(false), showClose = _x[0], setShowClose = _x[1];
-    var _y = (0, react_1.useState)(false), showToolTip = _y[0], setShowTooltip = _y[1];
-    var _z = (0, react_1.useState)(false), tooltipIsHovered = _z[0], setTooltipIsHovered = _z[1];
-    var _0 = (0, react_1.useState)([]), suggestions = _0[0], setSuggestions = _0[1];
-    var inputRef = (0, react_1.useRef)(null);
-    var adorementRef = (0, react_1.useRef)(null);
-    var dropdownref = (0, react_1.useRef)(null);
-    var dropBtnRef = (0, react_1.useRef)(null);
-    var timerRef = (0, react_1.useRef)(0); // To fix the no results found issue on second type
-    var _1 = (0, react_1.useState)(0), selectedIndex = _1[0], setSelectedIndex = _1[1];
-    var itemRefs = (0, react_1.useRef)([]);
-    var scrollContainerRef = (0, react_1.useRef)(null);
-    var _2 = (0, react_1.useState)(false), refetchData = _2[0], setRefetchData = _2[1];
-    var _3 = (0, react_1.useState)({
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const customIcons_1 = __importDefault(require("./components/customIcons"));
+const Spinner_1 = __importDefault(require("./components/loader/Spinner"));
+const portal_1 = __importDefault(require("./components/portal"));
+const debounce_1 = require("./utilities/debounce");
+const getPosition_1 = require("./utilities/getPosition");
+const icons_1 = require("./utilities/icons");
+const ModernAutoCompleteDropdown = ({ label, onChange, getData, data, errors, required = false, autoFocus, name, shortCode = '', labelCode = '', fullWidth, placeholder, id, className: propsClassName, type = 'custom_select', readOnly, disabled = false, value, autoFilter = false, autoDropdown = true, insideOpen = false, isClose = true, noLocalFilter = false, isStaticList = false, isCustomPlaceholder = false, checkParams, width, hasParentError, fromPrefix, labelTitle, isModern = true, size = 'md', }) => {
+    var _a;
+    const [inputValue, setInputValue] = (0, react_1.useState)((_a = value === null || value === void 0 ? void 0 : value.name) !== null && _a !== void 0 ? _a : '');
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const [dropOpen, setDropOpen] = (0, react_1.useState)(false);
+    const [isDisabled, setIsDisabled] = (0, react_1.useState)(disabled);
+    const [showClose, setShowClose] = (0, react_1.useState)(false);
+    const [showToolTip, setShowTooltip] = (0, react_1.useState)(false);
+    const [tooltipIsHovered, setTooltipIsHovered] = (0, react_1.useState)(false);
+    const [suggestions, setSuggestions] = (0, react_1.useState)([]);
+    const inputRef = (0, react_1.useRef)(null);
+    const adorementRef = (0, react_1.useRef)(null);
+    const dropdownref = (0, react_1.useRef)(null);
+    const dropdownContentRef = (0, react_1.useRef)(null);
+    const dropBtnRef = (0, react_1.useRef)(null);
+    const timerRef = (0, react_1.useRef)(0); // To fix the no results found issue on second type
+    const [selectedIndex, setSelectedIndex] = (0, react_1.useState)(0);
+    const itemRefs = (0, react_1.useRef)([]);
+    const scrollContainerRef = (0, react_1.useRef)(null);
+    const [refetchData, setRefetchData] = (0, react_1.useState)(false);
+    const isSelectingRef = (0, react_1.useRef)(false);
+    const hasUserChangedInputRef = (0, react_1.useRef)(false); // Track if user has actually typed/changed input
+    const [dropPosition, setDropPosition] = (0, react_1.useState)({
         top: 0,
         left: 0,
         bottom: 0,
         right: 0,
-    }), dropPosition = _3[0], setDropPosition = _3[1];
-    var checkIncludes = function (mainString, subString, param1, param2, param3, param4) {
-        var checkIncludesIfExists = function (mainString, substring) {
+    });
+    const [isPositionReady, setIsPositionReady] = (0, react_1.useState)(false);
+    const checkIncludes = (mainString, subString, param1, param2, param3, param4) => {
+        const checkIncludesIfExists = (mainString, substring) => {
             return substring &&
                 mainString &&
                 typeof mainString === 'string' &&
@@ -97,7 +53,7 @@ var ModernAutoCompleteDropdown = function (_a) {
                     .startsWith(substring.toString().toLowerCase())
                 : false;
         };
-        var checkArrayContains = function (strArray, param) { var _a; return (_a = strArray === null || strArray === void 0 ? void 0 : strArray.includes(param)) !== null && _a !== void 0 ? _a : false; };
+        const checkArrayContains = (strArray, param) => { var _a; return (_a = strArray === null || strArray === void 0 ? void 0 : strArray.includes(param)) !== null && _a !== void 0 ? _a : false; };
         return (checkIncludesIfExists(mainString, subString) ||
             (!!checkParams &&
                 ((checkArrayContains(checkParams, 'param1') &&
@@ -109,7 +65,7 @@ var ModernAutoCompleteDropdown = function (_a) {
                     (checkArrayContains(checkParams, 'param4') &&
                         checkIncludesIfExists(param4, subString)))));
     };
-    var getHeight = function () {
+    const getHeight = () => {
         switch (size) {
             case 'sm':
                 return ' h-[34px] ';
@@ -117,9 +73,10 @@ var ModernAutoCompleteDropdown = function (_a) {
                 return ' ';
         }
     };
-    var handleChange = function (event) {
-        var value = event.target.value;
+    const handleChange = (event) => {
+        const { value } = event.target;
         timerRef.current = 0;
+        hasUserChangedInputRef.current = true; // Mark that user has changed the input
         setInputValue(value);
         handleValChange(value);
         if (!value) {
@@ -127,7 +84,7 @@ var ModernAutoCompleteDropdown = function (_a) {
             onChange({ id: undefined, name: '', from: 2 });
         }
     };
-    var handleValChange = (0, react_1.useCallback)((0, debounce_1.debounce)(function (value) {
+    const handleValChange = (0, react_1.useCallback)((0, debounce_1.debounce)((value) => {
         setDropOpen(true);
         onChange({ id: undefined, name: '', from: 1 });
         if (value.trim() === '' && type === 'auto_complete') {
@@ -142,20 +99,18 @@ var ModernAutoCompleteDropdown = function (_a) {
         else {
             handleDropData(value);
         }
-        setTimeout(function () {
+        setTimeout(() => {
             timerRef.current = 1;
         }, 200);
     }, isStaticList ? 0 : 1000), []);
-    var handleDropData = function (value) {
+    const handleDropData = (value) => {
         if (type === 'auto_complete') {
             if (isStaticList) {
                 loadStaticData();
-                var filteredData_1 = value && value !== '*'
-                    ? data === null || data === void 0 ? void 0 : data.filter(function (item) {
-                        return checkIncludes(item.name, value, item.param1, item.param2, item.param3);
-                    })
+                const filteredData = value && value !== '*'
+                    ? data === null || data === void 0 ? void 0 : data.filter((item) => checkIncludes(item.name, value, item.param1, item.param2, item.param3))
                     : data;
-                setSuggestions(filteredData_1);
+                setSuggestions(filteredData);
             }
             else {
                 handlePickSuggestions(value);
@@ -166,42 +121,29 @@ var ModernAutoCompleteDropdown = function (_a) {
             handlePickSuggestions();
         }
         else if (type === 'custom_search_select' && data && (data === null || data === void 0 ? void 0 : data.length) > 0) {
-            var filteredData_2 = value && value !== '*'
-                ? data.filter(function (item) {
-                    return checkIncludes(item.name, value, item.param1, item.param2, item.param3);
-                })
+            const filteredData = value && value !== '*'
+                ? data.filter((item) => checkIncludes(item.name, value, item.param1, item.param2, item.param3))
                 : data;
-            setSuggestions(filteredData_2);
+            setSuggestions(filteredData);
         }
     };
-    var handlePickSuggestions = function (value) { return __awaiter(void 0, void 0, void 0, function () {
-        var fetchedSuggestions, error_1;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!getData) return [3 /*break*/, 4];
-                    setIsLoading(true);
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, (getData === null || getData === void 0 ? void 0 : getData(value))];
-                case 2:
-                    fetchedSuggestions = _a.sent();
-                    setSuggestions(fetchedSuggestions);
-                    setIsLoading(false);
-                    if (autoDropdown) {
-                        setRefetchData(true);
-                    }
-                    return [3 /*break*/, 4];
-                case 3:
-                    error_1 = _a.sent();
-                    setIsLoading(false);
-                    return [3 /*break*/, 4];
-                case 4: return [2 /*return*/];
+    const handlePickSuggestions = async (value) => {
+        if (getData) {
+            setIsLoading(true);
+            try {
+                const fetchedSuggestions = await (getData === null || getData === void 0 ? void 0 : getData(value));
+                setSuggestions(fetchedSuggestions);
+                setIsLoading(false);
+                if (autoDropdown) {
+                    setRefetchData(true);
+                }
             }
-        });
-    }); };
-    var onLabelClick = function () {
+            catch (error) {
+                setIsLoading(false);
+            }
+        }
+    };
+    const onLabelClick = () => {
         var _a;
         if (!isDisabled) {
             (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
@@ -216,35 +158,28 @@ var ModernAutoCompleteDropdown = function (_a) {
             }
         }
     };
-    var handleClickOutside = function (event) {
+    const handleClickOutside = (event) => {
         if (dropdownref.current &&
             !dropdownref.current.contains(event.target)) {
             setDropOpen(false);
         }
     };
-    var checkIsEmptyField = function () {
+    const checkIsEmptyField = () => {
         var _a;
         if (inputValue === undefined)
             return true;
         else
             return ((_a = inputValue === null || inputValue === void 0 ? void 0 : inputValue.toString().length) !== null && _a !== void 0 ? _a : 0) <= 0 ? true : false;
     };
-    var loadStaticData = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var fetchedSuggestions, error_2;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!(!data || (refetchData && autoDropdown && !isStaticList))) return [3 /*break*/, 4];
-                    data = [];
-                    if (!getData) return [3 /*break*/, 4];
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 3, , 4]);
+    const loadStaticData = async () => {
+        if (!data || (refetchData && autoDropdown && !isStaticList)) {
+            data = [];
+            if (getData) {
+                try {
                     setIsLoading(true);
-                    return [4 /*yield*/, (getData === null || getData === void 0 ? void 0 : getData('*'))];
-                case 2:
-                    fetchedSuggestions = _a.sent();
-                    fetchedSuggestions === null || fetchedSuggestions === void 0 ? void 0 : fetchedSuggestions.forEach(function (element) {
+                    //handlePickSuggestions('*');
+                    const fetchedSuggestions = await (getData === null || getData === void 0 ? void 0 : getData('*'));
+                    fetchedSuggestions === null || fetchedSuggestions === void 0 ? void 0 : fetchedSuggestions.forEach((element) => {
                         data === null || data === void 0 ? void 0 : data.push(element);
                     });
                     setSuggestions(fetchedSuggestions);
@@ -253,27 +188,25 @@ var ModernAutoCompleteDropdown = function (_a) {
                         setRefetchData(false);
                         timerRef.current = 1;
                     }
-                    return [3 /*break*/, 4];
-                case 3:
-                    error_2 = _a.sent();
+                }
+                catch (error) {
                     setIsLoading(false);
-                    return [3 /*break*/, 4];
-                case 4: return [2 /*return*/];
+                }
             }
-        });
-    }); };
-    (0, react_1.useEffect)(function () {
+        }
+    };
+    (0, react_1.useEffect)(() => {
         document.addEventListener('click', handleClickOutside);
-        return function () {
+        return () => {
             document.removeEventListener('click', handleClickOutside);
         };
     }, []);
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         if (autoFocus) {
             onLabelClick();
         }
     }, [autoFocus]);
-    var onInputFocus = function () {
+    const onInputFocus = () => {
         if (!isDisabled) {
             if (autoFilter && inputValue === '') {
                 handleValChange('*');
@@ -286,17 +219,23 @@ var ModernAutoCompleteDropdown = function (_a) {
             }
         }
     };
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         setIsDisabled(disabled);
     }, [disabled]);
-    var handleSuggestionClick = function (suggestion, index) {
-        onChange(__assign(__assign(__assign({}, suggestion), { id: suggestion === null || suggestion === void 0 ? void 0 : suggestion.id, name: suggestion.name }), ((suggestion === null || suggestion === void 0 ? void 0 : suggestion.label) ? { label: suggestion === null || suggestion === void 0 ? void 0 : suggestion.label } : {})));
+    const handleSuggestionClick = (suggestion, index) => {
+        isSelectingRef.current = true;
+        hasUserChangedInputRef.current = false; // Reset flag when selecting from dropdown
+        onChange(Object.assign(Object.assign(Object.assign({}, suggestion), { id: suggestion === null || suggestion === void 0 ? void 0 : suggestion.id, name: suggestion.name }), ((suggestion === null || suggestion === void 0 ? void 0 : suggestion.label) ? { label: suggestion === null || suggestion === void 0 ? void 0 : suggestion.label } : {})));
         if (type !== 'custom_select')
             setInputValue(suggestion.name);
         setDropOpen(false);
         setSelectedIndex(index);
+        // Reset flag after a short delay to allow blur handler to check it
+        setTimeout(() => {
+            isSelectingRef.current = false;
+        }, 100);
     };
-    var handleOpen = function (e) {
+    const handleOpen = (e) => {
         if (!suggestions || (suggestions === null || suggestions === void 0 ? void 0 : suggestions.length) === 0)
             handleDropData();
         if (!isLoading) {
@@ -305,7 +244,7 @@ var ModernAutoCompleteDropdown = function (_a) {
                 setInputValue('');
         }
     };
-    var handleOpenDropdown = function (e) {
+    const handleOpenDropdown = (e) => {
         if (!suggestions || (suggestions === null || suggestions === void 0 ? void 0 : suggestions.length) === 0 || refetchData) {
             if (autoDropdown && (inputValue === '' || inputValue.trim() === '')) {
                 setSuggestions([]);
@@ -319,52 +258,69 @@ var ModernAutoCompleteDropdown = function (_a) {
             setDropOpen(!dropOpen);
         }
     };
-    var handleScroll = function () {
-        setDropOpen(false);
+    const handleScroll = (event) => {
+        const scrollTarget = event.target;
+        // Don't close if the user is scrolling inside the main autocomplete container
+        // or inside the dropdown content itself (portal list).
+        if (scrollTarget &&
+            ((dropdownref.current && dropdownref.current.contains(scrollTarget)) ||
+                (dropdownContentRef.current &&
+                    dropdownContentRef.current.contains(scrollTarget)))) {
+            return;
+        }
+        if (dropOpen) {
+            setDropOpen(false);
+        }
     };
-    (0, react_1.useEffect)(function () {
-        if (!insideOpen) {
-            setSelectedIndex(0);
-            window.addEventListener('scroll', handleScroll);
-            var mainElement = document.querySelector('main');
-            mainElement === null || mainElement === void 0 ? void 0 : mainElement.addEventListener('scroll', handleScroll);
-            var gridElements = document.querySelectorAll('.k-grid-content, .overflow-auto, .overflow-y-auto, .overflow-x-auto');
-            gridElements.forEach(function (gridElement) {
-                gridElement.addEventListener('scroll', handleScroll);
-            });
-            window.addEventListener('resize', getDropPosition);
-            getDropPosition();
-            return function () {
-                window.removeEventListener('scroll', handleScroll);
-                var mainElement = document.querySelector('main');
-                mainElement === null || mainElement === void 0 ? void 0 : mainElement.removeEventListener('scroll', handleScroll);
-                window.addEventListener('resize', getDropPosition);
-                var gridElements = document.querySelectorAll('.k-grid-content');
-                gridElements.forEach(function (gridElement) {
-                    gridElement.removeEventListener('scroll', handleScroll);
-                });
-            };
+    (0, react_1.useEffect)(() => {
+        // Only attach scroll listeners when dropdown is open and rendered in portal
+        if (insideOpen || !dropOpen) {
+            // Reset positioning flag when dropdown is closed
+            if (!dropOpen && isPositionReady) {
+                setIsPositionReady(false);
+            }
+            return;
         }
-    }, [dropOpen]);
-    var handleClear = function () {
+        setSelectedIndex(0);
+        const scrollableDivs = document.querySelectorAll('div[style*="overflow"], .overflow-auto, .overflow-y-auto, .overflow-x-auto');
+        // Listen to window/document scrolls, plus any scrollable divs
+        window.addEventListener('scroll', handleScroll);
+        document.addEventListener('scroll', handleScroll, true);
+        scrollableDivs.forEach((div) => {
+            div.addEventListener('scroll', handleScroll);
+        });
+        window.addEventListener('resize', getDropPosition);
+        getDropPosition();
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+            document.removeEventListener('scroll', handleScroll, true);
+            scrollableDivs.forEach((div) => {
+                div.removeEventListener('scroll', handleScroll);
+            });
+            window.removeEventListener('resize', getDropPosition);
+        };
+    }, [dropOpen, insideOpen]);
+    const handleClear = () => {
         setDropOpen(false);
         setInputValue('');
         onChange({ id: undefined, name: '', from: 3 });
+        hasUserChangedInputRef.current = false; // Reset flag when clearing
         onLabelClick();
         if (autoDropdown) {
             setRefetchData(true);
         }
     };
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         var _a;
         setInputValue((_a = value === null || value === void 0 ? void 0 : value.name) !== null && _a !== void 0 ? _a : '');
+        hasUserChangedInputRef.current = false; // Reset flag when value prop changes (e.g., coming back to page)
     }, [value === null || value === void 0 ? void 0 : value.name]);
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         setSuggestions(data);
     }, [data]);
-    var getErrors = function (err) {
+    const getErrors = (err) => {
         var _a, _b, _c, _d;
-        var errMsg = '';
+        let errMsg = '';
         if (err.message) {
             errMsg = err === null || err === void 0 ? void 0 : err.message;
         }
@@ -376,13 +332,13 @@ var ModernAutoCompleteDropdown = function (_a) {
         }
         return errMsg;
     };
-    var generateClassName = function (type) {
-        var className = propsClassName;
+    const generateClassName = (type) => {
+        let className = propsClassName;
         switch (type) {
             case 'input':
-                className += " block text-common text-input-text font-normal px-3.5 w-full text-sm text-gray-900 bg-transparent  border  appearance-none    peer h-10 rounded-[4px] disabled:text-input-disabled bg-white disabled:bg-disabled ".concat(label && isModern
+                className += ` block text-common text-input-text font-normal px-3.5 w-full text-sm text-gray-900 bg-transparent  border  appearance-none    peer h-10 rounded-[4px] disabled:text-input-disabled bg-white disabled:bg-disabled ${label && isModern
                     ? 'placeholder-transparent'
-                    : 'focus:placeholder-grey-secondary placeholder-input-label', " focus:placeholder-grey-secondary");
+                    : 'focus:placeholder-grey-secondary placeholder-input-label'} focus:placeholder-grey-secondary`;
                 if (errors && errors[name]) {
                     className +=
                         ' border-[#FDA29B] focus:border-error-[#FDA29B] focus:ring-[#FDA29B] focus:ring-3 focus:outline-[#FDA29B] input-outline';
@@ -394,17 +350,19 @@ var ModernAutoCompleteDropdown = function (_a) {
                 className += getHeight();
                 break;
             case 'label':
-                className += " flex modern-input-label-truncate  peer-focus:modern-input-peer-focus-label-size \n          ".concat(isDisabled
+                className += ` flex modern-input-label-truncate  peer-focus:modern-input-peer-focus-label-size 
+          ${isDisabled
                     ? 'cursor-pointer'
-                    : 'cursor-text peer-focus:cursor-pointer', " ").concat(isDisabled && !checkIsEmptyField()
+                    : 'cursor-text peer-focus:cursor-pointer'} ${isDisabled && !checkIsEmptyField()
                     ? 'disabled-input-label-bg'
                     : !isDisabled || !checkIsEmptyField()
                         ? 'active-input-label-bg'
-                        : '', " absolute   duration-300 transform -translate-y-4  top-2 z-1 origin-[0]  px-0 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2  peer-focus:-translate-y-4 start-[14px] rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto ").concat(isDisabled
+                        : ''} absolute   duration-300 transform -translate-y-4  top-2 z-1 origin-[0]  px-0 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2  peer-focus:-translate-y-4 start-[14px] rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto ${isDisabled
                     ? 'cursor-pointer'
-                    : 'cursor-text peer-focus:cursor-pointer', "\n           ").concat(checkIsEmptyField()
+                    : 'cursor-text peer-focus:cursor-pointer'}
+           ${checkIsEmptyField()
                     ? 'modern-input-label-size'
-                    : 'modern-input-peer-focus-label-size');
+                    : 'modern-input-peer-focus-label-size'}`;
                 if (errors && errors[name]) {
                     className += ' text-error-light ';
                 }
@@ -423,16 +381,16 @@ var ModernAutoCompleteDropdown = function (_a) {
         }
         return className;
     };
-    var handleClose = function () {
-        setTimeout(function () {
+    const handleClose = () => {
+        setTimeout(() => {
             setDropOpen(false);
         }, 500);
     };
-    var handleClearInputValue = function () {
+    const handleClearInputValue = () => {
         // setInputValue(value?.name ?? '')
     };
-    var getInnerWidth = function () {
-        var innerwidth = adorementRef.current
+    const getInnerWidth = () => {
+        const innerwidth = adorementRef.current
             ? adorementRef.current.offsetWidth
             : 0;
         return innerwidth;
@@ -440,67 +398,145 @@ var ModernAutoCompleteDropdown = function (_a) {
     // const getPosition = () => {
     //   return 'bottom'
     // }
-    var filteredData = inputValue !== '*' &&
+    const selectExactMatchFromSuggestions = () => {
+        // If user is clicking on dropdown, don't execute exact match logic
+        if (isSelectingRef.current) {
+            isSelectingRef.current = false;
+            hasUserChangedInputRef.current = false; // Reset flag
+            return;
+        }
+        // Only proceed if user has actually changed the input value
+        if (!hasUserChangedInputRef.current) {
+            return;
+        }
+        if (!inputValue) {
+            hasUserChangedInputRef.current = false; // Reset flag
+            return;
+        }
+        if (!filteredData || filteredData.length === 0) {
+            // No suggestions to match against – notify parent with raw value
+            onChange({ id: undefined, name: inputValue, from: 4 });
+            hasUserChangedInputRef.current = false; // Reset flag
+            return;
+        }
+        const normalizedInput = inputValue.toString().trim().toLowerCase();
+        const matchIndex = filteredData.findIndex((item) => {
+            var _a, _b;
+            const name = (_a = item === null || item === void 0 ? void 0 : item.name) === null || _a === void 0 ? void 0 : _a.toString().trim().toLowerCase();
+            const label = (_b = item === null || item === void 0 ? void 0 : item.label) === null || _b === void 0 ? void 0 : _b.toString().trim().toLowerCase();
+            return name === normalizedInput || label === normalizedInput;
+        });
+        if (matchIndex >= 0) {
+            const match = filteredData[matchIndex];
+            handleSuggestionClick(match, matchIndex);
+        }
+        else {
+            // No exact match – notify parent with typed value
+            onChange({ id: undefined, name: inputValue, from: 4 });
+            setInputValue('');
+        }
+        hasUserChangedInputRef.current = false; // Reset flag after handling
+    };
+    // Handle Tab key on input - works even when dropdown is closed or loading
+    const handleTabKey = (e) => {
+        if (e.key !== 'Tab')
+            return;
+        // Check for exact match first, then select highlighted item if no exact match
+        if (inputValue && filteredData && filteredData.length > 0) {
+            const normalizedInput = inputValue.toString().trim().toLowerCase();
+            const exactMatchIndex = filteredData.findIndex((item) => {
+                var _a, _b;
+                const name = (_a = item === null || item === void 0 ? void 0 : item.name) === null || _a === void 0 ? void 0 : _a.toString().trim().toLowerCase();
+                const label = (_b = item === null || item === void 0 ? void 0 : item.label) === null || _b === void 0 ? void 0 : _b.toString().trim().toLowerCase();
+                return name === normalizedInput || label === normalizedInput;
+            });
+            if (exactMatchIndex >= 0) {
+                // Exact match found - select it
+                isSelectingRef.current = true;
+                handleSuggestionClick(filteredData[exactMatchIndex], exactMatchIndex);
+            }
+            else if (dropOpen && filteredData[selectedIndex]) {
+                // No exact match but dropdown is open and has highlighted item - select highlighted item
+                isSelectingRef.current = true;
+                handleSuggestionClick(filteredData[selectedIndex], selectedIndex);
+            }
+            else {
+                // No exact match and no highlighted item - trigger invalid value action
+                onChange({ id: undefined, name: inputValue, from: 4 });
+                setInputValue('');
+                hasUserChangedInputRef.current = false; // Reset flag
+            }
+        }
+        else if (inputValue && (!filteredData || filteredData.length === 0)) {
+            // No suggestions available - trigger invalid value action
+            onChange({ id: undefined, name: inputValue, from: 4 });
+            setInputValue('');
+            hasUserChangedInputRef.current = false; // Reset flag
+        }
+        // Don't prevent default - allow Tab to move focus
+    };
+    const filteredData = inputValue !== '*' &&
         inputValue !== '' &&
         type !== 'custom_select' &&
         !noLocalFilter
-        ? suggestions === null || suggestions === void 0 ? void 0 : suggestions.filter(function (item) {
+        ? suggestions === null || suggestions === void 0 ? void 0 : suggestions.filter((item) => {
             var _a, _b, _c, _d;
             return checkIncludes(item.name, inputValue, (_a = item.param1) !== null && _a !== void 0 ? _a : '', (_b = item.param2) !== null && _b !== void 0 ? _b : '', (_c = item.param3) !== null && _c !== void 0 ? _c : '', (_d = item.param4) !== null && _d !== void 0 ? _d : '');
         })
         : suggestions;
-    var handleError = function (data) {
+    const handleError = (data) => {
         var _a;
         if (getErrors(data[name]) === 'required' ||
             getErrors(data[name]) === 'Required') {
-            return "".concat(label !== null && label !== void 0 ? label : labelTitle, " is ").concat(getErrors(data[name]));
+            return `${label !== null && label !== void 0 ? label : labelTitle} is ${getErrors(data[name])}`;
         }
         else {
             return (_a = getErrors(data[name])) !== null && _a !== void 0 ? _a : '';
         }
     };
-    var getDropPosition = function () {
+    const getDropPosition = () => {
         if (!insideOpen && (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current)) {
-            var dropdownHeight = 200; // Assume the height of the dropdown is 200px, adjust as needed
-            var inputRect = inputRef.current.getBoundingClientRect();
-            var spaceBelow = window.innerHeight - (inputRect.bottom + window.scrollY);
-            var spaceAbove = inputRect.top + window.scrollY;
-            var top_1;
-            var bottom = void 0;
+            const dropdownHeight = 200; // Assume the height of the dropdown is 200px, adjust as needed
+            const inputRect = inputRef.current.getBoundingClientRect();
+            const spaceBelow = window.innerHeight - (inputRect.bottom + window.scrollY);
+            const spaceAbove = inputRect.top + window.scrollY;
+            let top;
+            let bottom;
             if (spaceBelow < dropdownHeight && spaceAbove > dropdownHeight) {
                 bottom = spaceBelow + 43;
             }
             else {
-                top_1 = inputRect.top + window.scrollY + inputRect.height + 2;
+                top = inputRect.top + window.scrollY + inputRect.height + 2;
             }
             setDropPosition({
                 left: inputRect.left + window.scrollX,
-                top: top_1,
-                bottom: bottom,
+                top,
+                bottom,
                 width: inputRect.width,
             });
+            setIsPositionReady(true);
         }
         return undefined;
     };
-    var _4 = (0, react_1.useState)(false), showNoResults = _4[0], setShowNoResults = _4[1];
-    (0, react_1.useEffect)(function () {
+    const [showNoResults, setShowNoResults] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
         if ((inputValue || autoDropdown) &&
             (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) === 0 &&
             !isLoading &&
             timerRef.current === 1) {
-            var timer_1 = setTimeout(function () {
+            const timer = setTimeout(() => {
                 setShowNoResults(true);
             }, 500); // Delay in milliseconds
-            return function () { return clearTimeout(timer_1); };
+            return () => clearTimeout(timer);
         }
         else {
             setShowNoResults(false);
         }
         // Handle keyboard navigation
-        var handleKeyDown = function (e) {
+        const handleKeyDown = (e) => {
             if (!dropOpen)
                 return;
-            var nextIndex = e.key === 'ArrowDown'
+            const nextIndex = e.key === 'ArrowDown'
                 ? (selectedIndex + 1) % filteredData.length
                 : e.key === 'ArrowUp'
                     ? (selectedIndex - 1 + filteredData.length) % filteredData.length
@@ -512,14 +548,14 @@ var ModernAutoCompleteDropdown = function (_a) {
                     // Update index first
                     setSelectedIndex(nextIndex);
                     // Wait for DOM update before scrolling
-                    requestAnimationFrame(function () {
-                        var el = itemRefs.current[nextIndex];
-                        var container = scrollContainerRef.current;
+                    requestAnimationFrame(() => {
+                        const el = itemRefs.current[nextIndex];
+                        const container = scrollContainerRef.current;
                         if (el && container) {
-                            var elTop = el.offsetTop;
-                            var elBottom = elTop + el.offsetHeight;
-                            var containerTop = container.scrollTop;
-                            var containerBottom = containerTop + container.clientHeight;
+                            const elTop = el.offsetTop;
+                            const elBottom = elTop + el.offsetHeight;
+                            const containerTop = container.scrollTop;
+                            const containerBottom = containerTop + container.clientHeight;
                             if (elBottom > containerBottom) {
                                 container.scrollTop = elBottom - container.clientHeight;
                             }
@@ -529,9 +565,12 @@ var ModernAutoCompleteDropdown = function (_a) {
                         }
                     });
                     break;
+                case 'Tab':
                 case 'Enter':
                     e.preventDefault();
-                    handleSuggestionClick(filteredData[selectedIndex], selectedIndex);
+                    if (filteredData[selectedIndex]) {
+                        handleSuggestionClick(filteredData[selectedIndex], selectedIndex);
+                    }
                     break;
                 case 'Escape':
                     e.preventDefault();
@@ -543,7 +582,7 @@ var ModernAutoCompleteDropdown = function (_a) {
         };
         if ((filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0 && !isLoading) {
             window.addEventListener('keydown', handleKeyDown);
-            return function () {
+            return () => {
                 window.removeEventListener('keydown', handleKeyDown);
             };
         }
@@ -555,14 +594,19 @@ var ModernAutoCompleteDropdown = function (_a) {
         selectedIndex,
         dropOpen,
     ]);
-    var setDropDown = function () {
-        return (((filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0 || showNoResults) && ((0, jsx_runtime_1.jsx)("div", __assign({ style: dropPosition, className: "autocomplete-suggections absolute bg-white shadow-gray-300 shadow-md border border-grey-light z-50 mt-9" }, { children: (0, jsx_runtime_1.jsx)("ul", __assign({ className: "overflow-auto h-auto max-h-40 w-full py-1.5", ref: scrollContainerRef }, { children: (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0 ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: filteredData.map(function (suggestion, index) { return ((0, jsx_runtime_1.jsxs)("li", __assign({ className: "".concat((value === null || value === void 0 ? void 0 : value.id) === (suggestion === null || suggestion === void 0 ? void 0 : suggestion.id)
+    const setDropDown = () => {
+        return (((filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0 || showNoResults) && ((0, jsx_runtime_1.jsx)("div", { ref: dropdownContentRef, style: dropPosition, className: "autocomplete-suggections absolute bg-white shadow-gray-300 shadow-md border border-grey-light z-50 mt-9", children: (0, jsx_runtime_1.jsx)("ul", { className: "overflow-auto h-auto max-h-40 w-full py-1.5", ref: scrollContainerRef, children: (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0 ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: filteredData.map((suggestion, index) => ((0, jsx_runtime_1.jsxs)("li", { className: `${(value === null || value === void 0 ? void 0 : value.id) === (suggestion === null || suggestion === void 0 ? void 0 : suggestion.id)
                             ? 'bg-blue-navy text-white'
-                            : "".concat(index === selectedIndex ? 'is-selected' : '', " hover:bg-table-hover"), "  cursor-pointer p-1  text-xxs ps-3.5 pl-[10px] qbs-autocomplete-suggections-items"), "data-testid": suggestion.name, onClick: function () { return handleSuggestionClick(suggestion, index); }, tabIndex: index, ref: function (el) { return (itemRefs.current[index] = el); } }, { children: [(0, jsx_runtime_1.jsx)("span", { children: (suggestion === null || suggestion === void 0 ? void 0 : suggestion.label) ? suggestion === null || suggestion === void 0 ? void 0 : suggestion.label : suggestion.name }), labelCode && (suggestion === null || suggestion === void 0 ? void 0 : suggestion[labelCode]) && ((0, jsx_runtime_1.jsx)("span", __assign({ className: "label-code" }, { children: suggestion === null || suggestion === void 0 ? void 0 : suggestion[labelCode] }))), shortCode && (suggestion === null || suggestion === void 0 ? void 0 : suggestion[shortCode]) && ((0, jsx_runtime_1.jsx)("span", __assign({ className: "short-code" }, { children: suggestion === null || suggestion === void 0 ? void 0 : suggestion[shortCode] })))] }), suggestion === null || suggestion === void 0 ? void 0 : suggestion.id)); }) })) : (showNoResults &&
+                            : `${index === selectedIndex ? 'is-selected' : ''} hover:bg-table-hover`}  cursor-pointer p-1  text-xxs ps-3.5 pl-[10px] qbs-autocomplete-suggections-items`, "data-testid": suggestion.name, onMouseDown: (e) => {
+                            e.preventDefault(); // Prevent input blur before click
+                            isSelectingRef.current = true;
+                        }, onClick: () => handleSuggestionClick(suggestion, index), tabIndex: index, ref: (el) => {
+                            itemRefs.current[index] = el;
+                        }, children: [(0, jsx_runtime_1.jsx)("span", { className: "suggestion-text", children: (suggestion === null || suggestion === void 0 ? void 0 : suggestion.label) ? suggestion === null || suggestion === void 0 ? void 0 : suggestion.label : suggestion.name }), labelCode && (suggestion === null || suggestion === void 0 ? void 0 : suggestion[labelCode]) && ((0, jsx_runtime_1.jsx)("span", { className: "label-code", children: suggestion === null || suggestion === void 0 ? void 0 : suggestion[labelCode] })), shortCode && (suggestion === null || suggestion === void 0 ? void 0 : suggestion[shortCode]) && ((0, jsx_runtime_1.jsx)("span", { className: "short-code", children: suggestion === null || suggestion === void 0 ? void 0 : suggestion[shortCode] }))] }, suggestion === null || suggestion === void 0 ? void 0 : suggestion.id))) })) : (showNoResults &&
                     !isLoading &&
-                    timerRef.current === 1 && ((0, jsx_runtime_1.jsx)("li", __assign({ className: "$ cursor-pointer p-1 rounded-sm text-xxs", onClick: handleClose }, { children: "No Results Found" })))) })) }))));
+                    timerRef.current === 1 && ((0, jsx_runtime_1.jsx)("li", { className: `$ cursor-pointer p-1 rounded-sm text-xxs`, onClick: handleClose, children: "No Results Found" }))) }) })));
     };
-    var getBorderRight = function () {
+    const getBorderRight = () => {
         if (fromPrefix) {
             if ((hasParentError && Boolean(errors && errors[name])) ||
                 hasParentError) {
@@ -574,12 +618,12 @@ var ModernAutoCompleteDropdown = function (_a) {
         }
         return 0;
     };
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         (0, getPosition_1.applyPositionClass)(dropdownref, isHovered);
         setDropOpen(false);
     }, [isHovered]);
-    (0, react_1.useEffect)(function () {
-        var shouldShowClose = (value === null || value === void 0 ? void 0 : value.name) &&
+    (0, react_1.useEffect)(() => {
+        const shouldShowClose = (value === null || value === void 0 ? void 0 : value.name) &&
             ((value === null || value === void 0 ? void 0 : value.id) || String(value === null || value === void 0 ? void 0 : value.id) === '0') &&
             !disabled &&
             !readOnly &&
@@ -588,13 +632,13 @@ var ModernAutoCompleteDropdown = function (_a) {
             setShowClose(shouldShowClose);
         }
     }, [value, disabled, readOnly]);
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         // Check if input content overflows
-        var checkOverflow = function () {
+        const checkOverflow = () => {
             if (inputRef.current) {
-                var _a = inputRef.current, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth, value_1 = _a.value;
+                const { scrollWidth, clientWidth, value } = inputRef.current;
                 // Check for overflow only when there's content
-                if (value_1.trim() !== '') {
+                if (value.trim() !== '') {
                     setShowTooltip(scrollWidth > clientWidth + 2);
                 }
                 else {
@@ -606,29 +650,45 @@ var ModernAutoCompleteDropdown = function (_a) {
             inputRef.current.addEventListener('input', checkOverflow);
             checkOverflow(); // Initial check
         }
-        return function () {
+        return () => {
             if (inputRef.current) {
                 inputRef.current.removeEventListener('input', checkOverflow);
             }
         };
     }, [inputValue]);
-    var handleMouseEnter = function () {
+    const handleMouseEnter = () => {
         setTooltipIsHovered(true);
     };
-    var handleMouseLeave = function () {
+    const handleMouseLeave = () => {
         setTooltipIsHovered(false);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ id: id ? "autocomplete-container-".concat(id) : "autocomplete-container-".concat(name), className: " flex-grow  ".concat(fullWidth ? 'w-full' : 'w-auto'), ref: dropdownref }, { children: [label && !isModern && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "mb-3" }, { children: (0, jsx_runtime_1.jsxs)("label", __assign({ className: "text-xs font-medium" }, { children: [label, required ? (0, jsx_runtime_1.jsx)("span", __assign({ className: "text-error" }, { children: " *" })) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})] })) }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "tooltip-container" }, { children: [isHovered && errors && errors[name] && ((0, jsx_runtime_1.jsxs)("span", __assign({ className: "tooltip" }, { children: [handleError(errors), " "] }))), tooltipIsHovered && showToolTip && !dropOpen && inputValue && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "tooltip-info" }, { children: inputValue }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "flex relative ".concat(fullWidth ? 'w-full' : 'w-auto'), style: { width: width } }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "relative w-full", onMouseEnter: function () { return handleMouseEnter(); }, onMouseLeave: function () { return handleMouseLeave(); } }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "text", readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : type === 'custom_select', value: inputValue ? inputValue : '', onBlur: handleClearInputValue, autoComplete: "off", disabled: disabled, ref: inputRef, id: id ? "custom-autocomplete-".concat(id) : "custom-autocomplete-".concat(name), "data-testid": "custom-autocomplete", "aria-describedby": id, style: __assign({ paddingRight: getInnerWidth() }, (fromPrefix
+    return ((0, jsx_runtime_1.jsxs)("div", { id: id ? `autocomplete-container-${id}` : `autocomplete-container-${name}`, className: ` flex-grow  ${fullWidth ? 'w-full' : 'w-auto'}`, ref: dropdownref, children: [label && !isModern && ((0, jsx_runtime_1.jsx)("div", { className: "mb-3", children: (0, jsx_runtime_1.jsxs)("label", { className: `text-xs font-medium`, children: [label, required ? (0, jsx_runtime_1.jsx)("span", { className: "text-error", children: " *" }) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})] }) })), (0, jsx_runtime_1.jsxs)("div", { className: "tooltip-container", children: [isHovered && errors && errors[name] && ((0, jsx_runtime_1.jsxs)("span", { className: "tooltip", children: [handleError(errors), " "] })), tooltipIsHovered && showToolTip && !dropOpen && inputValue && ((0, jsx_runtime_1.jsx)("div", { className: `tooltip-info`, children: inputValue })), (0, jsx_runtime_1.jsxs)("div", { className: `flex relative ${fullWidth ? 'w-full' : 'w-auto'}`, style: { width: width }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative w-full", onMouseEnter: () => handleMouseEnter(), onMouseLeave: () => handleMouseLeave(), children: [(0, jsx_runtime_1.jsx)("input", { type: "text", readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : type === 'custom_select', value: inputValue ? inputValue : '', onKeyDown: handleTabKey, onBlur: (e) => {
+                                            // Check immediately if user is selecting (Tab or click)
+                                            const wasSelecting = isSelectingRef.current;
+                                            // Delay to allow click events on dropdown to process first
+                                            setTimeout(() => {
+                                                // Check if focus moved to dropdown or if user is selecting
+                                                const relatedTarget = e.relatedTarget;
+                                                if (wasSelecting ||
+                                                    (dropdownref.current &&
+                                                        relatedTarget &&
+                                                        dropdownref.current.contains(relatedTarget))) {
+                                                    return; // User selected an item or focus moved to dropdown, don't execute exact match
+                                                }
+                                                handleClearInputValue();
+                                                selectExactMatchFromSuggestions();
+                                            }, 200);
+                                        }, autoComplete: "off", disabled: disabled, ref: inputRef, id: id ? `custom-autocomplete-${id}` : `custom-autocomplete-${name}`, "data-testid": "custom-autocomplete", "aria-describedby": id, style: Object.assign({ paddingRight: getInnerWidth() }, (fromPrefix
                                             ? {
                                                 borderRight: getBorderRight(),
                                                 borderTopRightRadius: 0,
                                                 borderBottomRightRadius: 0,
                                             }
-                                            : {})), className: " ".concat(generateClassName('input')), onChange: handleChange, placeholder: type === 'auto_complete'
+                                            : {})), className: ` ${generateClassName('input')}`, onChange: handleChange, placeholder: type === 'auto_complete'
                                             ? placeholder && isCustomPlaceholder
                                                 ? placeholder
                                                 : 'Type to search'
-                                            : placeholder !== null && placeholder !== void 0 ? placeholder : '--Select--', onFocus: onInputFocus, onClick: function (e) {
+                                            : (placeholder !== null && placeholder !== void 0 ? placeholder : '--Select--'), onFocus: onInputFocus, onClick: (e) => {
                                             if (type === 'custom_select') {
                                                 setDropOpen(!dropOpen);
                                                 handleOpen(e);
@@ -637,9 +697,11 @@ var ModernAutoCompleteDropdown = function (_a) {
                                                 if (dropOpen || (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0)
                                                     setDropOpen(!dropOpen);
                                             }
-                                        } }), isModern && ((0, jsx_runtime_1.jsxs)("label", __assign({ htmlFor: id, onClick: function () { return onLabelClick(); }, className: generateClassName('label') }, { children: [label ? (0, jsx_runtime_1.jsx)("span", __assign({ className: "truncate" }, { children: label })) : '', required ? (0, jsx_runtime_1.jsx)("span", __assign({ className: "text-error" }, { children: " *" })) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})] })))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "flex items-center justify-center autocomplete-adorement-wrapper" }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ ref: adorementRef, className: "".concat(generateClassName('adorement'), " qbs-autocomplete-adorement auto-dorpdown-adorement mr-[1px] ").concat(isLoading ? 'bg-white' : '') }, { children: [showClose && ((0, jsx_runtime_1.jsx)("button", __assign({ onClick: function () { return handleClear(); }, className: " text-table-bodyColor text-[#667085]", "aria-label": "close", type: "button", id: "autocomplete-close-icon" }, { children: (0, jsx_runtime_1.jsx)(customIcons_1.default, { name: "close", type: "large-m" }) }))), isLoading && (0, jsx_runtime_1.jsx)(Spinner_1.default, {}), (type !== 'auto_complete' || autoDropdown) &&
+                                        } }), isModern && ((0, jsx_runtime_1.jsxs)("label", { htmlFor: id, onClick: () => onLabelClick(), className: generateClassName('label'), children: [label ? (0, jsx_runtime_1.jsx)("span", { className: "truncate", children: label }) : '', required ? (0, jsx_runtime_1.jsx)("span", { className: "text-error", children: " *" }) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center autocomplete-adorement-wrapper", children: (0, jsx_runtime_1.jsxs)("div", { ref: adorementRef, className: `${generateClassName('adorement')} qbs-autocomplete-adorement auto-dorpdown-adorement mr-[1px] ${isLoading ? 'bg-white' : ''}`, children: [showClose && ((0, jsx_runtime_1.jsx)("button", { onClick: () => handleClear(), className: " text-table-bodyColor text-[#667085]", "aria-label": "close", type: "button", id: "autocomplete-close-icon", children: (0, jsx_runtime_1.jsx)(customIcons_1.default, { name: "close", type: "large-m" }) })), isLoading && (0, jsx_runtime_1.jsx)(Spinner_1.default, {}), (type !== 'auto_complete' || autoDropdown) &&
                                             !disabled &&
-                                            !readOnly && ((0, jsx_runtime_1.jsx)("button", __assign({ disabled: disabled !== null && disabled !== void 0 ? disabled : readOnly, onClick: function (e) { return handleOpenDropdown(e); }, onBlur: handleClose, className: " text-[#667085] focus-visible:outline-slate-100", "data-testid": "drop-arrow", type: "button", id: "autocomplete-drop-icon", ref: dropBtnRef }, { children: !dropOpen ? (autoDropdown ? ((0, jsx_runtime_1.jsx)(icons_1.AllDropArrow, { type: "down", uniqueId: "all-dropdow-arrow-icon", className: "all-dropdow-arrow-icon" })) : ((0, jsx_runtime_1.jsx)(icons_1.DropArrow, { uniqueDropArrowId: "drop-arrow-icon" }))) : autoDropdown ? ((0, jsx_runtime_1.jsx)(icons_1.AllDropArrow, { type: "up", uniqueId: "all-dropdow-arrow-icon", className: "all-dropdow-arrow-icon" })) : ((0, jsx_runtime_1.jsx)(icons_1.DropArrow, { className: "rotate-180", uniqueDropArrowId: "drop-arrow-icon" })) }))), errors && errors[name] && ((0, jsx_runtime_1.jsx)("div", __assign({ className: " text-error-label  relative cursor-pointer ".concat(generateClassName('message')), onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: (0, jsx_runtime_1.jsx)(customIcons_1.default, { name: "alert", type: "medium" }) })))] })) })), dropOpen && (!isLoading || (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0) && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: insideOpen ? setDropDown() : (0, jsx_runtime_1.jsx)(portal_1.default, { children: setDropDown() }) }))] }))] }))] })));
+                                            !readOnly && ((0, jsx_runtime_1.jsx)("button", { disabled: disabled !== null && disabled !== void 0 ? disabled : readOnly, onClick: (e) => handleOpenDropdown(e), onBlur: handleClose, className: " text-[#667085] focus-visible:outline-slate-100", "data-testid": "drop-arrow", type: "button", id: "autocomplete-drop-icon", ref: dropBtnRef, children: !dropOpen ? (autoDropdown ? ((0, jsx_runtime_1.jsx)(icons_1.AllDropArrow, { type: "down", uniqueId: "all-dropdow-arrow-icon", className: "all-dropdow-arrow-icon" })) : ((0, jsx_runtime_1.jsx)(icons_1.DropArrow, { uniqueDropArrowId: "drop-arrow-icon" }))) : autoDropdown ? ((0, jsx_runtime_1.jsx)(icons_1.AllDropArrow, { type: "up", uniqueId: "all-dropdow-arrow-icon", className: "all-dropdow-arrow-icon" })) : ((0, jsx_runtime_1.jsx)(icons_1.DropArrow, { className: "rotate-180", uniqueDropArrowId: "drop-arrow-icon" })) })), errors && errors[name] && ((0, jsx_runtime_1.jsx)("div", { className: ` text-error-label  relative cursor-pointer ${generateClassName('message')}`, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: (0, jsx_runtime_1.jsx)(customIcons_1.default, { name: "alert", type: "medium" }) }))] }) }), dropOpen &&
+                                (!insideOpen ? isPositionReady : true) &&
+                                (!isLoading || (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0) && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: insideOpen ? setDropDown() : (0, jsx_runtime_1.jsx)(portal_1.default, { children: setDropDown() }) }))] })] })] }));
 };
 exports.default = ModernAutoCompleteDropdown;
 //# sourceMappingURL=ReactAutoCompleteDropdown.js.map