react-core-ts 2.1.19 → 2.1.21

package/src/ReactAutoComplete.tsx

@@ -101,6 +101,7 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
   const inputRef = useRef<HTMLInputElement>(null);
   const adorementRef = useRef<HTMLDivElement>(null);
   const dropdownref = useRef<HTMLDivElement>(null);
+  const dropdownContentRef = useRef<HTMLDivElement | null>(null);
   const dropBtnRef = useRef<HTMLButtonElement>(null);
   const timerRef = useRef<number>(0); // To fix the no results found issue on second type
   const [selectedIndex, setSelectedIndex] = useState(0);
@@ -359,39 +360,57 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
     }
   };
 
-  const handleScroll = () => {
-    setDropOpen(false);
+  const handleScroll = (event: any) => {
+    const scrollTarget = event.target as Node | null;
+
+    // Ignore scrolls inside the main autocomplete container or dropdown content
+    if (
+      scrollTarget &&
+      ((dropdownref.current && dropdownref.current.contains(scrollTarget)) ||
+        (dropdownContentRef.current &&
+          dropdownContentRef.current.contains(scrollTarget)))
+    ) {
+      return;
+    }
+
+    if (dropOpen) {
+      setDropOpen(false);
+    }
   };
 
   useEffect(() => {
-    if (!insideOpen) {
-      setSelectedIndex(0);
-      window.addEventListener('scroll', handleScroll);
-
-      const mainElement = document.querySelector('main');
-      mainElement?.addEventListener('scroll', handleScroll);
-
-      const gridElements = document.querySelectorAll(
-        '.k-grid-content, .overflow-auto, .overflow-y-auto, .overflow-x-auto',
-      );
-      gridElements.forEach((gridElement: any) => {
-        gridElement.addEventListener('scroll', handleScroll);
+    // Only attach scroll listeners when dropdown is open and rendered in portal
+    if (insideOpen || !dropOpen) {
+      return;
+    }
+
+    setSelectedIndex(0);
+
+    const scrollableDivs = document.querySelectorAll(
+      'div[style*="overflow"], .overflow-auto, .overflow-y-auto, .overflow-x-auto',
+    );
+
+    window.addEventListener('scroll', handleScroll);
+    document.addEventListener('scroll', handleScroll, true);
+
+    scrollableDivs.forEach((div) => {
+      div.addEventListener('scroll', handleScroll as any);
+    });
+
+    window.addEventListener('resize', getDropPosition);
+    getDropPosition();
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+      document.removeEventListener('scroll', handleScroll, true);
+
+      scrollableDivs.forEach((div) => {
+        div.removeEventListener('scroll', handleScroll as any);
       });
 
-      window.addEventListener('resize', getDropPosition);
-      getDropPosition();
-      return () => {
-        window.removeEventListener('scroll', handleScroll);
-        const mainElement = document.querySelector('main');
-        mainElement?.removeEventListener('scroll', handleScroll);
-        window.addEventListener('resize', getDropPosition);
-        const gridElements = document.querySelectorAll('.k-grid-content');
-        gridElements.forEach((gridElement: any) => {
-          gridElement.removeEventListener('scroll', handleScroll);
-        });
-      };
-    }
-  }, [dropOpen]);
+      window.removeEventListener('resize', getDropPosition);
+    };
+  }, [dropOpen, insideOpen]);
 
   const handleClear = () => {
     setDropOpen(false);
@@ -732,6 +751,7 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
     return (
       (filteredData?.length > 0 || showNoResults) && (
         <div
+          ref={dropdownContentRef}
           className="autocomplete-suggections absolute bg-white shadow-gray-300 shadow-md border border-grey-light z-50 mt-9"
           style={dropPosition}
         >

package/src/ReactAutoCompleteDropdown.tsx

@@ -103,6 +103,7 @@ const ModernAutoCompleteDropdown: React.FC<AutoSuggestionInputProps> = ({
   const inputRef = useRef<HTMLInputElement>(null);
   const adorementRef = useRef<HTMLDivElement>(null);
   const dropdownref = useRef<HTMLDivElement>(null);
+  const dropdownContentRef = useRef<HTMLDivElement | null>(null);
   const dropBtnRef = useRef<HTMLButtonElement>(null);
   const timerRef = useRef<number>(0); // To fix the no results found issue on second type
   const [selectedIndex, setSelectedIndex] = useState(0);
@@ -379,39 +380,59 @@ const ModernAutoCompleteDropdown: React.FC<AutoSuggestionInputProps> = ({
     }
   };
 
-  const handleScroll = () => {
-    setDropOpen(false);
+  const handleScroll = (event: any) => {
+    const scrollTarget = event.target as Node | null;
+
+    // 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);
+    }
   };
 
   useEffect(() => {
-    if (!insideOpen) {
-      setSelectedIndex(0);
-      window.addEventListener('scroll', handleScroll);
-
-      const mainElement = document.querySelector('main');
-      mainElement?.addEventListener('scroll', handleScroll);
-
-      const gridElements = document.querySelectorAll(
-        '.k-grid-content, .overflow-auto, .overflow-y-auto, .overflow-x-auto',
-      );
-      gridElements.forEach((gridElement: any) => {
-        gridElement.addEventListener('scroll', handleScroll);
+    // Only attach scroll listeners when dropdown is open and rendered in portal
+    if (insideOpen || !dropOpen) {
+      return;
+    }
+
+    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 as any);
+    });
+
+    window.addEventListener('resize', getDropPosition);
+    getDropPosition();
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+      document.removeEventListener('scroll', handleScroll, true);
+
+      scrollableDivs.forEach((div) => {
+        div.removeEventListener('scroll', handleScroll as any);
       });
 
-      window.addEventListener('resize', getDropPosition);
-      getDropPosition();
-      return () => {
-        window.removeEventListener('scroll', handleScroll);
-        const mainElement = document.querySelector('main');
-        mainElement?.removeEventListener('scroll', handleScroll);
-        window.addEventListener('resize', getDropPosition);
-        const gridElements = document.querySelectorAll('.k-grid-content');
-        gridElements.forEach((gridElement: any) => {
-          gridElement.removeEventListener('scroll', handleScroll);
-        });
-      };
-    }
-  }, [dropOpen]);
+      window.removeEventListener('resize', getDropPosition);
+    };
+  }, [dropOpen, insideOpen]);
 
   const handleClear = () => {
     setDropOpen(false);
@@ -749,6 +770,7 @@ const ModernAutoCompleteDropdown: React.FC<AutoSuggestionInputProps> = ({
     return (
       (filteredData?.length > 0 || showNoResults) && (
         <div
+          ref={dropdownContentRef}
           style={dropPosition}
           className="autocomplete-suggections absolute bg-white shadow-gray-300 shadow-md border border-grey-light z-50 mt-9"
         >

package/src/ReactAutoCompleteSuggections.tsx

@@ -137,6 +137,7 @@ const ModernAutoCompleteSuggections: React.FC<
   const inputRef = useRef<HTMLInputElement>(null);
   const adorementRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
+  const dropdownContentRef = useRef<HTMLDivElement | null>(null);
   const isExternalUpdateRef = useRef(false);
   const previousDebouncedValueRef = useRef<string>('');
 
@@ -332,36 +333,52 @@ const ModernAutoCompleteSuggections: React.FC<
     }
   };
 
-  // Handle scroll to close dropdown
-  const handleScroll = () => {
+  // Handle scroll to close dropdown (only for scrolls outside the component/dropdown)
+  const handleScroll = (event: any) => {
+    const scrollTarget = event.target as Node | null;
+
+    if (
+      scrollTarget &&
+      ((containerRef.current &&
+        containerRef.current.contains(scrollTarget)) ||
+        (dropdownContentRef.current &&
+          dropdownContentRef.current.contains(scrollTarget)))
+    ) {
+      // Ignore scrolls inside the autocomplete container or the dropdown content
+      return;
+    }
+
     setShowDropdown(false);
   };
 
   // Attach event listeners for click outside and scroll
   useEffect(() => {
-    if (showDropdown) {
-      document.addEventListener('click', handleClickOutside);
-      window.addEventListener('scroll', handleScroll);
-
-      const mainElement = document.querySelector('main');
-      mainElement?.addEventListener('scroll', handleScroll);
-
-      const gridElements = document.querySelectorAll(
-        '.k-grid-content, .overflow-auto, .overflow-y-auto, .overflow-x-auto'
-      );
-      gridElements.forEach((gridElement: any) => {
-        gridElement.addEventListener('scroll', handleScroll);
-      });
-
-      return () => {
-        document.removeEventListener('click', handleClickOutside);
-        window.removeEventListener('scroll', handleScroll);
-        mainElement?.removeEventListener('scroll', handleScroll);
-        gridElements.forEach((gridElement: any) => {
-          gridElement.removeEventListener('scroll', handleScroll);
-        });
-      };
+    if (!showDropdown) {
+      return;
     }
+
+    document.addEventListener('click', handleClickOutside);
+
+    const scrollableDivs = document.querySelectorAll(
+      'div[style*="overflow"], .overflow-auto, .overflow-y-auto, .overflow-x-auto'
+    );
+
+    window.addEventListener('scroll', handleScroll);
+    document.addEventListener('scroll', handleScroll, true);
+
+    scrollableDivs.forEach((div) => {
+      div.addEventListener('scroll', handleScroll as any);
+    });
+
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+      window.removeEventListener('scroll', handleScroll);
+      document.removeEventListener('scroll', handleScroll, true);
+
+      scrollableDivs.forEach((div) => {
+        div.removeEventListener('scroll', handleScroll as any);
+      });
+    };
   }, [showDropdown]);
 
   const checkIsEmptyField = (): boolean => {
@@ -643,7 +660,10 @@ const ModernAutoCompleteSuggections: React.FC<
         <>
           {insideOpen ? (
             <div className="suggection-list">
-              <div className="bg-white border border-grey-light shadow-gray-300 shadow-md rounded-sm max-h-40 overflow-auto text-[11px] text-gray-700 px-3.5 py-1.5">
+              <div
+                ref={dropdownContentRef}
+                className="bg-white border border-grey-light shadow-gray-300 shadow-md rounded-sm max-h-40 overflow-auto text-[11px] text-gray-700 px-3.5 py-1.5"
+              >
                 {effectiveVisible.map((g) => (
                   <SuggestionItem 
                     key={g.name} 
@@ -657,6 +677,7 @@ const ModernAutoCompleteSuggections: React.FC<
           ) : (
             <Portal>
               <div
+                ref={dropdownContentRef}
                 className="autocomplete-suggections autosuggection-list suggection-list bg-white shadow-gray-300 shadow-md border border-grey-light z-50"
                 style={dropPosition}
               >

package/src/ReactAutoCompleteTableView.tsx

@@ -114,6 +114,7 @@ const ReactAutoCompleteTableView: React.FC<AutoSuggestionInputProps> = ({
   const inputRef = useRef<HTMLInputElement>(null);
   const adorementRef = useRef<HTMLDivElement>(null);
   const dropdownref = useRef<HTMLDivElement>(null);
+  const dropdownContentRef = useRef<HTMLDivElement | null>(null);
   const dropBtnRef = useRef<HTMLButtonElement>(null);
   const timerRef = useRef<number>(0); // To fix the no results found issue on second type
   const [selectedIndex, setSelectedIndex] = useState(0);
@@ -381,39 +382,59 @@ const ReactAutoCompleteTableView: React.FC<AutoSuggestionInputProps> = ({
     }
   };
 
-  const handleScroll = () => {
-    setDropOpen(false);
+  const handleScroll = (event: any) => {
+    const scrollTarget = event.target as Node | null;
+
+    // Ignore scrolls that originate from inside the autocomplete container
+    // or inside the dropdown content itself.
+    if (
+      scrollTarget &&
+      ((dropdownref.current && dropdownref.current.contains(scrollTarget)) ||
+        (dropdownContentRef.current &&
+          dropdownContentRef.current.contains(scrollTarget)))
+    ) {
+      return;
+    }
+
+    if (dropOpen) {
+      setDropOpen(false);
+    }
   };
 
   useEffect(() => {
-    if (!insideOpen) {
-      setSelectedIndex(0);
-      window.addEventListener('scroll', handleScroll);
+    // Only attach scroll listeners when dropdown is open and rendered in portal
+    if (insideOpen || !dropOpen) {
+      return;
+    }
 
-      const mainElement = document.querySelector('main');
-      mainElement?.addEventListener('scroll', handleScroll);
+    setSelectedIndex(0);
+
+    const scrollableDivs = document.querySelectorAll(
+      'div[style*="overflow"], .overflow-auto, .overflow-y-auto, .overflow-x-auto'
+    );
 
-      const gridElements = document.querySelectorAll(
-        '.k-grid-content, .overflow-auto, .overflow-y-auto, .overflow-x-auto'
-      );
-      gridElements.forEach((gridElement: any) => {
-        gridElement.addEventListener('scroll', handleScroll);
+    // 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 as any);
+    });
+
+    window.addEventListener('resize', getDropPosition);
+    getDropPosition();
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+      document.removeEventListener('scroll', handleScroll, true);
+
+      scrollableDivs.forEach((div) => {
+        div.removeEventListener('scroll', handleScroll as any);
       });
 
-      window.addEventListener('resize', getDropPosition);
-      getDropPosition();
-      return () => {
-        window.removeEventListener('scroll', handleScroll);
-        const mainElement = document.querySelector('main');
-        mainElement?.removeEventListener('scroll', handleScroll);
-        window.addEventListener('resize', getDropPosition);
-        const gridElements = document.querySelectorAll('.k-grid-content');
-        gridElements.forEach((gridElement: any) => {
-          gridElement.removeEventListener('scroll', handleScroll);
-        });
-      };
-    }
-  }, [dropOpen]);
+      window.removeEventListener('resize', getDropPosition);
+    };
+  }, [dropOpen, insideOpen]);
 
   const handleClear = () => {
     setDropOpen(false);
@@ -731,6 +752,7 @@ const ReactAutoCompleteTableView: React.FC<AutoSuggestionInputProps> = ({
     return (
       (filteredData?.length > 0 || showNoResults) && (
         <div
+          ref={dropdownContentRef}
           style={{ ...dropPosition, overflow: 'hidden' }}
           className="autocomplete-suggections autocomplete-suggections-tableview absolute bg-white shadow-gray-300 shadow-md border border-grey-light z-50 mt-9"
         >