fis-component 0.0.91 → 0.0.93

package/dist/esm/index.js

@@ -73628,6 +73628,7 @@ const FISSelect = forwardRef(({ className, style, size = "md", options, value, d
     const [isOpen, setIsOpen] = useState(false);
     const [referenceElement, setReferenceElement] = useState(null);
     const [popperElement, setPopperElement] = useState(null);
+    const isSelectingRef = useRef(false);
     const popperOptions = useMemo$1(() => ({
         modifiers: [
             { name: "preventOverflow", options: { padding: 0, altAxis: true } },
@@ -73682,23 +73683,48 @@ const FISSelect = forwardRef(({ className, style, size = "md", options, value, d
         }
     }, [multi, onChange, value]);
     const handleMenuChange = useCallback((values) => {
+        console.log("Starting selection, blocking onBlur"); // Debug log
+        isSelectingRef.current = true;
         if (multi) {
             onChange(values);
+            isSelectingRef.current = false;
         }
         else {
             if (values.length > 0) {
                 onChange(values[0]);
-                // Delay closing to ensure react-hook-form processes the change first
-                setTimeout(() => setIsOpen(false), 0);
+                setIsOpen(false);
+                // Reset selecting flag after a longer delay to ensure validation completes
+                setTimeout(() => {
+                    console.log("Selection complete, allowing onBlur"); // Debug log
+                    isSelectingRef.current = false;
+                }, 100);
             }
         }
     }, [multi, onChange]);
     const handleMenuClick = useCallback(() => {
         if (!multi) {
-            // Delay closing to ensure react-hook-form processes the change first
-            setTimeout(() => setIsOpen(false), 0);
+            console.log("Menu click, setting isSelecting to true"); // Debug log
+            isSelectingRef.current = true;
+            setIsOpen(false);
+            setTimeout(() => {
+                console.log("Menu click complete, allowing onBlur"); // Debug log
+                isSelectingRef.current = false;
+            }, 100);
         }
     }, [multi]);
+    // Handle onBlur to prevent validation flash during selection
+    const handleBlur = useCallback((event) => {
+        // Don't trigger onBlur validation if user is currently selecting an option
+        if (isSelectingRef.current) {
+            console.log("Blocking onBlur during selection"); // Debug log
+            return;
+        }
+        console.log("Allowing onBlur to proceed"); // Debug log
+        // Call original onBlur if provided
+        if (restProps.onBlur) {
+            restProps.onBlur(event);
+        }
+    }, [restProps]);
     const menuProps = useMemo$1(() => ({
         groups: options,
         placeholder: placeholderSearch,
@@ -73747,7 +73773,7 @@ const FISSelect = forwardRef(({ className, style, size = "md", options, value, d
         document.addEventListener("mousedown", handleClickOutside);
         return () => document.removeEventListener("mousedown", handleClickOutside);
     }, [isOpen, referenceElement, popperElement]);
-    return (jsxs(DivWrapperSC$1, { className: className, style: style, children: [(textLabel || iconLabel) && (jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsx(DivInputWrapperSC, { ref: setReferenceElement, onClick: handleToggle, "$hasValue": !!value, children: jsx(FISSelectItem, { ...restProps, ref: ref, size: size, placeholder: placeholder, iconSuffix: isOpen ? jsx(ArrowUpIcon, {}) : jsx(ArrowDownIcon, {}), value: computedDisplayValue, disabled: disabled, activeDropdown: isOpen, negative: negative }) }), message && (jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && Array.isArray(value) && value.length > 0 && (jsx(SelectedTagsWrapper, { children: jsx(MultipleValue, { options: selectedItems, onRemove: handleOptionRemove }) })), isOpen && (jsx(Portal, { portal: portal, children: jsx(DivDropdownMenuSC, { ref: setPopperElement, style: {
+    return (jsxs(DivWrapperSC$1, { className: className, style: style, children: [(textLabel || iconLabel) && (jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsx(DivInputWrapperSC, { ref: setReferenceElement, onClick: handleToggle, "$hasValue": !!value, children: jsx(FISSelectItem, { ...restProps, onBlur: handleBlur, ref: ref, size: size, placeholder: placeholder, iconSuffix: isOpen ? jsx(ArrowUpIcon, {}) : jsx(ArrowDownIcon, {}), value: computedDisplayValue, disabled: disabled, activeDropdown: isOpen, negative: negative }) }), message && (jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && Array.isArray(value) && value.length > 0 && (jsx(SelectedTagsWrapper, { children: jsx(MultipleValue, { options: selectedItems, onRemove: handleOptionRemove }) })), isOpen && (jsx(Portal, { portal: portal, children: jsx(DivDropdownMenuSC, { ref: setPopperElement, style: {
                         ...styles.popper,
                         width: referenceElement?.offsetWidth,
                         zIndex: 9999,