fis-component 0.0.92 → 0.0.94

package/dist/cjs/index.js

@@ -73648,7 +73648,7 @@ const FISSelect = React.forwardRef(({ className, style, size = "md", options, va
     const [isOpen, setIsOpen] = React.useState(false);
     const [referenceElement, setReferenceElement] = React.useState(null);
     const [popperElement, setPopperElement] = React.useState(null);
-    const [isSelecting, setIsSelecting] = React.useState(false);
+    const isSelectingRef = React.useRef(false);
     const popperOptions = React.useMemo(() => ({
         modifiers: [
             { name: "preventOverflow", options: { padding: 0, altAxis: true } },
@@ -73693,8 +73693,10 @@ const FISSelect = React.forwardRef(({ className, style, size = "md", options, va
         }
     }, [multi, value, multiDisplayText, selectedItems, displayValue]);
     const handleToggle = React.useCallback(() => {
-        if (!disabled)
+        if (!disabled) {
+            console.log("Toggle dropdown"); // Debug log
             setIsOpen((prev) => !prev);
+        }
     }, [disabled]);
     const handleOptionRemove = React.useCallback((option) => {
         if (multi && Array.isArray(value)) {
@@ -73703,36 +73705,49 @@ const FISSelect = React.forwardRef(({ className, style, size = "md", options, va
         }
     }, [multi, onChange, value]);
     const handleMenuChange = React.useCallback((values) => {
-        setIsSelecting(true);
+        console.log("Starting selection, keeping onBlur blocked"); // Debug log
         if (multi) {
             onChange(values);
-            setIsSelecting(false);
+            // For multi-select, allow onBlur immediately since dropdown stays open
+            setTimeout(() => {
+                console.log("Multi-selection complete, allowing onBlur"); // Debug log
+                isSelectingRef.current = false;
+            }, 50);
         }
         else {
             if (values.length > 0) {
                 onChange(values[0]);
                 setIsOpen(false);
-                // Reset selecting flag after onChange completes
-                setTimeout(() => setIsSelecting(false), 0);
+                // Keep blocking until value is processed
+                setTimeout(() => {
+                    console.log("Single selection complete, allowing onBlur"); // Debug log
+                    isSelectingRef.current = false;
+                }, 150);
             }
         }
     }, [multi, onChange]);
     const handleMenuClick = React.useCallback(() => {
         if (!multi) {
+            console.log("Menu click - closing dropdown"); // Debug log
             setIsOpen(false);
         }
     }, [multi]);
     // Handle onBlur to prevent validation flash during selection
     const handleBlur = React.useCallback((event) => {
-        // Don't trigger onBlur validation if user is currently selecting an option
-        if (isSelecting) {
+        // Block onBlur if dropdown is open OR we're in the middle of selection
+        if (isOpen || isSelectingRef.current) {
+            console.log("Blocking onBlur - dropdown open or selecting:", {
+                isOpen,
+                isSelecting: isSelectingRef.current,
+            }); // Debug log
             return;
         }
+        console.log("Allowing onBlur to proceed"); // Debug log
         // Call original onBlur if provided
         if (restProps.onBlur) {
             restProps.onBlur(event);
         }
-    }, [isSelecting, restProps]);
+    }, [isOpen, restProps]);
     const menuProps = React.useMemo(() => ({
         groups: options,
         placeholder: placeholderSearch,
@@ -73775,12 +73790,25 @@ const FISSelect = React.forwardRef(({ className, style, size = "md", options, va
                 !referenceElement.contains(target) &&
                 popperElement &&
                 !popperElement.contains(target)) {
+                console.log("Click outside - closing dropdown"); // Debug log
                 setIsOpen(false);
             }
         };
         document.addEventListener("mousedown", handleClickOutside);
         return () => document.removeEventListener("mousedown", handleClickOutside);
     }, [isOpen, referenceElement, popperElement]);
+    // Add delay after dropdown closes to ensure validation processes
+    React.useEffect(() => {
+        if (!isOpen && !multi) {
+            // When dropdown closes, give time for value to be processed before allowing onBlur
+            isSelectingRef.current = true;
+            const timer = setTimeout(() => {
+                console.log("Dropdown closed delay complete, allowing onBlur"); // Debug log
+                isSelectingRef.current = false;
+            }, 200);
+            return () => clearTimeout(timer);
+        }
+    }, [isOpen, multi]);
     return (jsxRuntime.jsxs(DivWrapperSC$1, { className: className, style: style, children: [(textLabel || iconLabel) && (jsxRuntime.jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsxRuntime.jsx(DivInputWrapperSC, { ref: setReferenceElement, onClick: handleToggle, "$hasValue": !!value, children: jsxRuntime.jsx(FISSelectItem, { ...restProps, onBlur: handleBlur, ref: ref, size: size, placeholder: placeholder, iconSuffix: isOpen ? jsxRuntime.jsx(ArrowUpIcon, {}) : jsxRuntime.jsx(ArrowDownIcon, {}), value: computedDisplayValue, disabled: disabled, activeDropdown: isOpen, negative: negative }) }), message && (jsxRuntime.jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && Array.isArray(value) && value.length > 0 && (jsxRuntime.jsx(SelectedTagsWrapper, { children: jsxRuntime.jsx(MultipleValue, { options: selectedItems, onRemove: handleOptionRemove }) })), isOpen && (jsxRuntime.jsx(Portal, { portal: portal, children: jsxRuntime.jsx(DivDropdownMenuSC, { ref: setPopperElement, style: {
                         ...styles.popper,
                         width: referenceElement?.offsetWidth,