react-core-ts 2.0.21 → 2.0.22

package/dist/utilities/measureTabListNaturalWidth.d.ts

@@ -0,0 +1,30 @@
+export declare const MIN_DROPDOWN_WIDTH_PX = 300;
+export declare const MAX_DROPDOWN_WIDTH_WITH_TABS_PX = 600;
+/**
+ * Measures the "natural" (nowrap) width of a rendered tabs <ul>, including the dropdown's horizontal padding.
+ * This avoids tabs wrapping/squishing when the trigger/input is narrower than the tab labels.
+ */
+export declare function measureTabListNaturalWidth(tabListEl: HTMLUListElement): number | null;
+/**
+ * Keeps a dropdown fully visible within the viewport by clamping width and shifting left/right as needed.
+ * All coordinates are page coordinates (i.e., include window.scrollX).
+ */
+export declare function clampDropdownToViewport(opts: {
+    desiredWidth: number;
+    desiredLeft: number;
+}): {
+    width: number;
+    left: number;
+};
+/**
+ * Same as clampDropdownToViewport, but if the dropdown would overflow the right edge, it will prefer
+ * right-aligning the dropdown to the provided anchor (typically the input's right edge).
+ */
+export declare function clampDropdownToViewportPreferRightAlign(opts: {
+    desiredWidth: number;
+    desiredLeft: number;
+    anchorRight: number;
+}): {
+    width: number;
+    left: number;
+};

package/dist/utilities/measureTabListNaturalWidth.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.clampDropdownToViewportPreferRightAlign = exports.clampDropdownToViewport = exports.measureTabListNaturalWidth = exports.MAX_DROPDOWN_WIDTH_WITH_TABS_PX = exports.MIN_DROPDOWN_WIDTH_PX = void 0;
+var DROPDOWN_HORIZONTAL_PADDING_PX = 16; // .qbs-autocomplete-suggestions has padding: 8px
+var VIEWPORT_RIGHT_GUTTER_PX = 8;
+var VIEWPORT_LEFT_GUTTER_PX = 8;
+exports.MIN_DROPDOWN_WIDTH_PX = 300;
+// When tabs exist, cap dropdown width and let the tab strip scroll horizontally if needed.
+exports.MAX_DROPDOWN_WIDTH_WITH_TABS_PX = 600;
+/**
+ * Measures the "natural" (nowrap) width of a rendered tabs <ul>, including the dropdown's horizontal padding.
+ * This avoids tabs wrapping/squishing when the trigger/input is narrower than the tab labels.
+ */
+function measureTabListNaturalWidth(tabListEl) {
+    if (!tabListEl || typeof document === 'undefined')
+        return null;
+    try {
+        var container = document.createElement('div');
+        container.style.position = 'absolute';
+        container.style.top = '-99999px';
+        container.style.left = '-99999px';
+        container.style.visibility = 'hidden';
+        container.style.pointerEvents = 'none';
+        container.style.whiteSpace = 'nowrap';
+        var clone = tabListEl.cloneNode(true);
+        // Force a single row with natural width.
+        clone.style.display = 'inline-flex';
+        clone.style.flexWrap = 'nowrap';
+        clone.style.width = 'max-content';
+        clone.style.whiteSpace = 'nowrap';
+        // Remove width constraints from items so content can dictate width.
+        clone.querySelectorAll('li').forEach(function (li) {
+            li.style.flex = '0 0 auto';
+            li.style.width = 'auto';
+        });
+        clone.querySelectorAll('span').forEach(function (span) {
+            span.style.width = 'max-content';
+            span.style.whiteSpace = 'nowrap';
+        });
+        container.appendChild(clone);
+        document.body.appendChild(container);
+        var tabRowWidth = Math.ceil(clone.getBoundingClientRect().width);
+        document.body.removeChild(container);
+        // Include dropdown padding so the tabs still fit within the content box.
+        return tabRowWidth + DROPDOWN_HORIZONTAL_PADDING_PX;
+    }
+    catch (_a) {
+        return null;
+    }
+}
+exports.measureTabListNaturalWidth = measureTabListNaturalWidth;
+/**
+ * Keeps a dropdown fully visible within the viewport by clamping width and shifting left/right as needed.
+ * All coordinates are page coordinates (i.e., include window.scrollX).
+ */
+function clampDropdownToViewport(opts) {
+    if (typeof window === 'undefined')
+        return { width: opts.desiredWidth, left: opts.desiredLeft };
+    var viewportLeft = window.scrollX;
+    var viewportRight = window.scrollX + window.innerWidth;
+    var maxWidth = Math.max(0, Math.floor(viewportRight - viewportLeft - VIEWPORT_LEFT_GUTTER_PX - VIEWPORT_RIGHT_GUTTER_PX));
+    var width = maxWidth > 0 ? Math.min(opts.desiredWidth, maxWidth) : opts.desiredWidth;
+    var minLeft = viewportLeft + VIEWPORT_LEFT_GUTTER_PX;
+    var maxLeft = viewportRight - VIEWPORT_RIGHT_GUTTER_PX - width;
+    var left = Math.min(Math.max(opts.desiredLeft, minLeft), maxLeft);
+    return { width: width, left: left };
+}
+exports.clampDropdownToViewport = clampDropdownToViewport;
+/**
+ * Same as clampDropdownToViewport, but if the dropdown would overflow the right edge, it will prefer
+ * right-aligning the dropdown to the provided anchor (typically the input's right edge).
+ */
+function clampDropdownToViewportPreferRightAlign(opts) {
+    if (typeof window === 'undefined')
+        return { width: opts.desiredWidth, left: opts.desiredLeft };
+    var viewportLeft = window.scrollX;
+    var viewportRight = window.scrollX + window.innerWidth;
+    var maxWidth = Math.max(0, Math.floor(viewportRight - viewportLeft - VIEWPORT_LEFT_GUTTER_PX - VIEWPORT_RIGHT_GUTTER_PX));
+    var width = maxWidth > 0 ? Math.min(opts.desiredWidth, maxWidth) : opts.desiredWidth;
+    var minLeft = viewportLeft + VIEWPORT_LEFT_GUTTER_PX;
+    var maxLeft = viewportRight - VIEWPORT_RIGHT_GUTTER_PX - width;
+    // Default: left-align to the trigger.
+    var left = opts.desiredLeft;
+    // If it would overflow right, prefer right-align to the trigger's right edge.
+    if (left + width > viewportRight - VIEWPORT_RIGHT_GUTTER_PX) {
+        left = opts.anchorRight - width;
+    }
+    left = Math.min(Math.max(left, minLeft), maxLeft);
+    return { width: width, left: left };
+}
+exports.clampDropdownToViewportPreferRightAlign = clampDropdownToViewportPreferRightAlign;
+//# sourceMappingURL=measureTabListNaturalWidth.js.map

package/dist/utilities/measureTabListNaturalWidth.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"measureTabListNaturalWidth.js","sourceRoot":"","sources":["../../src/utilities/measureTabListNaturalWidth.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-core-ts",
-  "version": "2.0.21",
+  "version": "2.0.22",
   "description": "React Components",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/AutoCompleteWithSelectedList.tsx

@@ -18,6 +18,12 @@ import { filterSuggestions } from './utilities/filterSuggestions';
 import { AllDropArrow, DropArrow, Search, Spinner } from './utilities/icons';
 import { default as Tooltip } from './utilities/NewTooltip';
 import { getKeyValue, safeToLowerString } from './utilities/getKeyValue';
+import {
+  clampDropdownToViewportPreferRightAlign,
+  MAX_DROPDOWN_WIDTH_WITH_TABS_PX,
+  MIN_DROPDOWN_WIDTH_PX,
+  measureTabListNaturalWidth,
+} from './utilities/measureTabListNaturalWidth';
 
 const AutoCompleteWithSelectedList = forwardRef<
   HTMLInputElement,
@@ -119,6 +125,7 @@ const AutoCompleteWithSelectedList = forwardRef<
     const [refetchData, setRefetchData] = useState(false);
     const [allDataLoaded, setAllDataLoaded] = useState(false);
     const [isKeyboardOpen, setIsKeyboardOpen] = useState(false);
+    const [tabsScrollable, setTabsScrollable] = useState(false);
 
     let originalOverflow = '';
     let hasScrollbar = false;
@@ -131,6 +138,23 @@ const AutoCompleteWithSelectedList = forwardRef<
           width: inputRect.width,
           top: 0,
         };
+        const tabsNaturalWidth = tabRef.current
+          ? measureTabListNaturalWidth(tabRef.current)
+          : null;
+        const widthBeforeClamp = Math.min(
+          Math.max(dropdownPosition.width, tabsNaturalWidth ?? 0, MIN_DROPDOWN_WIDTH_PX),
+          tab.length > 0 ? MAX_DROPDOWN_WIDTH_WITH_TABS_PX : Number.POSITIVE_INFINITY
+        );
+        const { width: desiredWidth, left: desiredLeft } =
+          clampDropdownToViewportPreferRightAlign({
+            desiredWidth: widthBeforeClamp,
+            desiredLeft: dropdownPosition.left,
+            anchorRight: inputRect.right + window.scrollX,
+          });
+        setTabsScrollable((prev) => {
+          const next = tab.length > 0 && (tabsNaturalWidth ?? 0) > desiredWidth;
+          return prev === next ? prev : next;
+        });
         // Check if there's enough space below the input for the dropdown
         const spaceBelow = window.innerHeight - inputRect.bottom;
         const spaceAbove = inputRect.top + window.scrollY;
@@ -184,8 +208,8 @@ const AutoCompleteWithSelectedList = forwardRef<
         setDropdownStyle((prevStyle) => ({
           ...prevStyle,
           transform: `translateY(${dropdownPosition.top}px)`,
-          left: inputRect.left + window.scrollX,
-          width: inputRect.width,
+          left: desiredLeft,
+          width: desiredWidth,
         }));
       }
     };
@@ -383,6 +407,7 @@ const AutoCompleteWithSelectedList = forwardRef<
 
     const uniqueDropArrowId = `${name}-drop-arrow-selected-list-icon`;
     const isKeyboardOpenRef = useRef(false);
+    const closeOnScrollTimeoutRef = useRef<number | null>(null);
     
     // Keep ref in sync with state for use in event handlers
     useEffect(() => {
@@ -391,7 +416,13 @@ const AutoCompleteWithSelectedList = forwardRef<
 
     useEffect(() => {
       const handleScroll = (event: any) => {
-        // On mobile: Don't close dropdown on scroll when keyboard is open
+        // Don't close if the user is scrolling inside the dropdown itself.
+        const scrollTarget = event.target;
+        if (dropRef.current && scrollTarget instanceof Node && dropRef.current.contains(scrollTarget)) {
+          return;
+        }
+
+        // On mobile: Don't close dropdown on scroll when keyboard is open (typing scenario)
         // On desktop: Always allow closing on scroll
         if (isKeyboardOpenRef.current) {
           // Only prevent closing if keyboard is actually open (mobile scenario)
@@ -406,15 +437,12 @@ const AutoCompleteWithSelectedList = forwardRef<
           }
         }
         
-        // Check if scroll is happening within the dropdown itself - if so, don't close
-        const scrollTarget = event.target;
-        if (dropRef.current && scrollTarget instanceof Node && dropRef.current.contains(scrollTarget)) {
-          return;
-        }
-        
-        // On desktop (keyboard not open), close on scroll
-        if (dropRef.current && dropOpen) {
-          setTimeout(() => {
+        // Close on any outside scroll (including scrolls on nested containers).
+        if (dropOpen) {
+          if (closeOnScrollTimeoutRef.current) {
+            window.clearTimeout(closeOnScrollTimeoutRef.current);
+          }
+          closeOnScrollTimeoutRef.current = window.setTimeout(() => {
             setDropOpen(false);
             if (!typeOnlyFetch) setSearchValue('');
           }, 200);
@@ -460,6 +488,8 @@ const AutoCompleteWithSelectedList = forwardRef<
 
       document.addEventListener('mousedown', handleClickOutside as any);
       window.addEventListener('scroll', handleScroll as any);
+      // Capture-phase scroll catches scrolls from any scroll container (scroll doesn't bubble).
+      document.addEventListener('scroll', handleScroll as any, true);
 
       const scrollableDivs = document.querySelectorAll(
         'div[style*="overflow"], .overflow-auto, .overflow-y-auto, .overflow-x-auto'
@@ -473,9 +503,14 @@ const AutoCompleteWithSelectedList = forwardRef<
       return () => {
         document.removeEventListener('mousedown', handleClickOutside as any);
         window.removeEventListener('scroll', handleScroll as any);
+        document.removeEventListener('scroll', handleScroll as any, true);
         scrollableDivs.forEach((div) =>
           div.removeEventListener('scroll', handleScroll as any)
         );
+        if (closeOnScrollTimeoutRef.current) {
+          window.clearTimeout(closeOnScrollTimeoutRef.current);
+          closeOnScrollTimeoutRef.current = null;
+        }
         if (scrollRef && scrollRef.current && scrollRef.current !== null) {
           scrollRef.current.removeEventListener(
             'scroll',
@@ -774,7 +809,7 @@ const AutoCompleteWithSelectedList = forwardRef<
     const getTabItems = () => {
       return (
         <ul
-          className="qbs-flex qbs-flex-wrap qbs-w-full qbs-tab qbs-mb-2 -qbs-mt-2"
+          className={`qbs-flex qbs-flex-wrap qbs-w-full qbs-tab qbs-mb-2 -qbs-mt-2 ${tabsScrollable ? 'qbs-tab-scroll' : ''}`}
           ref={tabRef}
         >
           {tab.map((item: TabPops, idx: number) => (

package/src/AutoCompleteWithTabFilter.tsx

@@ -17,6 +17,12 @@ import { filterSuggestions } from './utilities/filterSuggestions';
 import { AllDropArrow, DropArrow, Search, Spinner, Tools } from './utilities/icons';
 import { default as Tooltip } from './utilities/NewTooltip';
 import { getKeyValue, safeToLowerString } from './utilities/getKeyValue';
+import {
+    clampDropdownToViewportPreferRightAlign,
+    MAX_DROPDOWN_WIDTH_WITH_TABS_PX,
+    MIN_DROPDOWN_WIDTH_PX,
+    measureTabListNaturalWidth,
+} from './utilities/measureTabListNaturalWidth';
 import DropdownFilterTabs from './dropdownFilterTabs';
 
 const AutoCompleteWithTabFilter = forwardRef<
@@ -140,6 +146,7 @@ const AutoCompleteWithTabFilter = forwardRef<
         const [refetchData, setRefetchData] = useState(false);
         const [allDataLoaded, setAllDataLoaded] = useState(false);
         const [isKeyboardOpen, setIsKeyboardOpen] = useState(false);
+        const [tabsScrollable, setTabsScrollable] = useState(false);
         const toolsBtnRef = useRef<HTMLButtonElement>(null);
         const [showToolsTab, setShowToolsTab] = useState(false);
         // Track previous tabSelectedItems to detect new items
@@ -317,6 +324,7 @@ const AutoCompleteWithTabFilter = forwardRef<
 
         const uniqueDropArrowId = `${name}-drop-arrow-selected-list-icon`;
         const isKeyboardOpenRef = useRef(false);
+        const closeOnScrollTimeoutRef = useRef<number | null>(null);
 
         // Keep ref in sync with state for use in event handlers
         useEffect(() => {
@@ -325,7 +333,13 @@ const AutoCompleteWithTabFilter = forwardRef<
 
         useEffect(() => {
             const handleScroll = (event: any) => {
-                // On mobile: Don't close dropdown on scroll when keyboard is open
+                // Don't close if the user is scrolling inside the dropdown itself.
+                const scrollTarget = event.target;
+                if (dropRef.current && scrollTarget instanceof Node && dropRef.current.contains(scrollTarget)) {
+                    return;
+                }
+
+                // On mobile: Don't close dropdown on scroll when keyboard is open (typing scenario)
                 // On desktop: Always allow closing on scroll
                 if (isKeyboardOpenRef.current) {
                     // Only prevent closing if keyboard is actually open (mobile scenario)
@@ -340,15 +354,12 @@ const AutoCompleteWithTabFilter = forwardRef<
                     }
                 }
 
-                // Check if scroll is happening within the dropdown itself - if so, don't close
-                const scrollTarget = event.target;
-                if (dropRef.current && scrollTarget instanceof Node && dropRef.current.contains(scrollTarget)) {
-                    return;
-                }
-
-                // On desktop (keyboard not open), close on scroll
-                if (dropRef.current && dropOpen) {
-                    setTimeout(() => {
+                // Close on any outside scroll (including scrolls on nested containers).
+                if (dropOpen) {
+                    if (closeOnScrollTimeoutRef.current) {
+                        window.clearTimeout(closeOnScrollTimeoutRef.current);
+                    }
+                    closeOnScrollTimeoutRef.current = window.setTimeout(() => {
                         setDropOpen(false);
                         setShowToolsTab(false);
                         setAllDataLoaded(false);
@@ -410,6 +421,8 @@ const AutoCompleteWithTabFilter = forwardRef<
 
             document.addEventListener('mousedown', handleClickOutside as any);
             window.addEventListener('scroll', handleScroll as any);
+            // Capture-phase scroll catches scrolls from any scroll container (scroll doesn't bubble).
+            document.addEventListener('scroll', handleScroll as any, true);
 
             const scrollableDivs = document.querySelectorAll(
                 'div[style*="overflow"], .overflow-auto, .overflow-y-auto, .overflow-x-auto'
@@ -423,9 +436,14 @@ const AutoCompleteWithTabFilter = forwardRef<
             return () => {
                 document.removeEventListener('mousedown', handleClickOutside as any);
                 window.removeEventListener('scroll', handleScroll as any);
+                document.removeEventListener('scroll', handleScroll as any, true);
                 scrollableDivs.forEach((div) =>
                     div.removeEventListener('scroll', handleScroll as any)
                 );
+                if (closeOnScrollTimeoutRef.current) {
+                    window.clearTimeout(closeOnScrollTimeoutRef.current);
+                    closeOnScrollTimeoutRef.current = null;
+                }
                 if (scrollRef && scrollRef.current && scrollRef.current !== null) {
                     scrollRef.current.removeEventListener(
                         'scroll',
@@ -457,6 +475,22 @@ const AutoCompleteWithTabFilter = forwardRef<
                     width: inputRect.width,
                     top: 0,
                 };
+                const tabsNaturalWidth = tabRef.current
+                    ? measureTabListNaturalWidth(tabRef.current)
+                    : null;
+                const widthBeforeClamp = Math.min(
+                    Math.max(dropdownPosition.width, tabsNaturalWidth ?? 0, MIN_DROPDOWN_WIDTH_PX),
+                    tab.length > 0 ? MAX_DROPDOWN_WIDTH_WITH_TABS_PX : Number.POSITIVE_INFINITY
+                );
+                const { width: desiredWidth, left: desiredLeft } = clampDropdownToViewportPreferRightAlign({
+                    desiredWidth: widthBeforeClamp,
+                    desiredLeft: dropdownPosition.left,
+                    anchorRight: inputRect.right + window.scrollX,
+                });
+                setTabsScrollable((prev) => {
+                    const next = tab.length > 0 && (tabsNaturalWidth ?? 0) > desiredWidth;
+                    return prev === next ? prev : next;
+                });
                 // Check if there's enough space below the input for the dropdown
                 const spaceBelow = window.innerHeight - inputRect.bottom;
                 const spaceAbove = inputRect.top + window.scrollY;
@@ -512,8 +546,8 @@ const AutoCompleteWithTabFilter = forwardRef<
                     const newStyle = {
                         ...prevStyle,
                         transform: `translateY(${dropdownPosition.top}px)`,
-                        left: inputRect.left + window.scrollX,
-                        width: inputRect.width,
+                        left: desiredLeft,
+                        width: desiredWidth,
                     };
                     // Only update if the style actually changed
                     if (prevStyle.transform !== newStyle.transform ||
@@ -833,7 +867,7 @@ const AutoCompleteWithTabFilter = forwardRef<
         const getTabItems = useCallback(() => {
             return (
                 <ul
-                    className="qbs-flex qbs-flex-wrap qbs-w-full qbs-tab qbs-mb-2 -qbs-mt-2"
+                    className={`qbs-flex qbs-flex-wrap qbs-w-full qbs-tab qbs-mb-2 -qbs-mt-2 ${tabsScrollable ? 'qbs-tab-scroll' : ''}`}
                     ref={tabRef}
                 >
                     {tab.map((item: TabPops, idx: number) => (
@@ -851,7 +885,7 @@ const AutoCompleteWithTabFilter = forwardRef<
                     ))}
                 </ul>
             );
-        }, [tab, activeTab, handleTabClick]);
+        }, [tab, activeTab, handleTabClick, tabsScrollable]);
 
         const handleSelectAll = useCallback(() => {
             if (isMultiple) {

package/src/dropdownFilterTabs.tsx

@@ -18,6 +18,12 @@ import { filterSuggestions } from './utilities/filterSuggestions';
 import { AllDropArrow, DropArrow, Search, Spinner } from './utilities/icons';
 import { default as Tooltip } from './utilities/NewTooltip';
 import { getKeyValue, safeToLowerString } from './utilities/getKeyValue';
+import {
+  clampDropdownToViewportPreferRightAlign,
+  MAX_DROPDOWN_WIDTH_WITH_TABS_PX,
+  MIN_DROPDOWN_WIDTH_PX,
+  measureTabListNaturalWidth,
+} from './utilities/measureTabListNaturalWidth';
 
 const DropdownFilterTabs = forwardRef<
   HTMLInputElement,
@@ -137,6 +143,7 @@ const DropdownFilterTabs = forwardRef<
     const [allDataLoaded, setAllDataLoaded] = useState(false);
     const [isKeyboardOpen, setIsKeyboardOpen] = useState(false);
     const [hasMoreOptionValues, setHasMoreOptionValues] = useState(false);
+    const [tabsScrollable, setTabsScrollable] = useState(false);
     
     // Use external reset key if provided, otherwise default to 0
     const currentResetKey = externalResetKey !== undefined ? externalResetKey : 0;
@@ -171,6 +178,23 @@ const DropdownFilterTabs = forwardRef<
           width: inputRect.width,
           top: 0,
         };
+        const hasTabs = tab.length > 0 || !!moreOptionTab;
+        const tabsNaturalWidth = tabRef.current
+          ? measureTabListNaturalWidth(tabRef.current)
+          : null;
+        const widthBeforeClamp = Math.min(
+          Math.max(dropdownPosition.width, tabsNaturalWidth ?? 0, MIN_DROPDOWN_WIDTH_PX),
+          hasTabs ? MAX_DROPDOWN_WIDTH_WITH_TABS_PX : Number.POSITIVE_INFINITY
+        );
+        const { width: desiredWidth, left: desiredLeft } = clampDropdownToViewportPreferRightAlign({
+          desiredWidth: widthBeforeClamp,
+          desiredLeft: dropdownPosition.left,
+          anchorRight: inputRect.right + window.scrollX,
+        });
+        setTabsScrollable((prev) => {
+          const next = hasTabs && (tabsNaturalWidth ?? 0) > desiredWidth;
+          return prev === next ? prev : next;
+        });
         // Check if there's enough space below the input for the dropdown
         const spaceBelow = window.innerHeight - inputRect.bottom;
         const spaceAbove = inputRect.top + window.scrollY;
@@ -224,8 +248,8 @@ const DropdownFilterTabs = forwardRef<
         setDropdownStyle((prevStyle) => ({
           ...prevStyle,
           transform: `translateY(${dropdownPosition.top}px)`,
-          left: inputRect.left + window.scrollX,
-          width: inputRect.width,
+          left: desiredLeft,
+          width: desiredWidth,
         }));
 
       }
@@ -386,6 +410,7 @@ const DropdownFilterTabs = forwardRef<
 
     const uniqueDropArrowId = `${name}-drop-arrow-selected-list-icon`;
     const isKeyboardOpenRef = useRef(false);
+    const closeOnScrollTimeoutRef = useRef<number | null>(null);
 
     // Keep ref in sync with state for use in event handlers
     useEffect(() => {
@@ -412,7 +437,13 @@ const DropdownFilterTabs = forwardRef<
 
     useEffect(() => {
       const handleScroll = (event: any) => {
-        // On mobile: Don't close dropdown on scroll when keyboard is open
+        // Don't close if the user is scrolling inside the dropdown itself.
+        const scrollTarget = event.target;
+        if (dropRef.current && scrollTarget instanceof Node && dropRef.current.contains(scrollTarget)) {
+          return;
+        }
+
+        // On mobile: Don't close dropdown on scroll when keyboard is open (typing scenario)
         // On desktop: Always allow closing on scroll
         if (isKeyboardOpenRef.current) {
           // Only prevent closing if keyboard is actually open (mobile scenario)
@@ -427,15 +458,12 @@ const DropdownFilterTabs = forwardRef<
           }
         }
 
-        // Check if scroll is happening within the dropdown itself - if so, don't close
-        const scrollTarget = event.target;
-        if (dropRef.current && scrollTarget instanceof Node && dropRef.current.contains(scrollTarget)) {
-          return;
-        }
-
-        // On desktop (keyboard not open), close on scroll
-        if (dropRef.current && dropOpen) {
-          setTimeout(() => {
+        // Close on any outside scroll (including scrolls on nested containers).
+        if (dropOpen) {
+          if (closeOnScrollTimeoutRef.current) {
+            window.clearTimeout(closeOnScrollTimeoutRef.current);
+          }
+          closeOnScrollTimeoutRef.current = window.setTimeout(() => {
             setDropOpen(false);
             onToolClose?.();
             if (!typeOnlyFetch) setSearchValue('');
@@ -485,6 +513,8 @@ const DropdownFilterTabs = forwardRef<
 
       document.addEventListener('mousedown', handleClickOutside as any);
       window.addEventListener('scroll', handleScroll as any);
+      // Capture-phase scroll catches scrolls from any scroll container (scroll doesn't bubble).
+      document.addEventListener('scroll', handleScroll as any, true);
 
       const scrollableDivs = document.querySelectorAll(
         'div[style*="overflow"], .overflow-auto, .overflow-y-auto, .overflow-x-auto'
@@ -498,9 +528,14 @@ const DropdownFilterTabs = forwardRef<
       return () => {
         document.removeEventListener('mousedown', handleClickOutside as any);
         window.removeEventListener('scroll', handleScroll as any);
+        document.removeEventListener('scroll', handleScroll as any, true);
         scrollableDivs.forEach((div) =>
           div.removeEventListener('scroll', handleScroll as any)
         );
+        if (closeOnScrollTimeoutRef.current) {
+          window.clearTimeout(closeOnScrollTimeoutRef.current);
+          closeOnScrollTimeoutRef.current = null;
+        }
         if (scrollRef && scrollRef.current && scrollRef.current !== null) {
           scrollRef.current.removeEventListener(
             'scroll',
@@ -758,7 +793,7 @@ const DropdownFilterTabs = forwardRef<
       const allTabs = moreOptionTab ? [...tab, { id: 'more-options', label: moreOptionTabLabel }] : tab;
       return (
         <ul
-          className="qbs-flex qbs-flex-wrap qbs-w-full qbs-tab qbs-mb-2 -qbs-mt-2"
+          className={`qbs-flex qbs-flex-wrap qbs-w-full qbs-tab qbs-mb-2 -qbs-mt-2 ${tabsScrollable ? 'qbs-tab-scroll' : ''}`}
           ref={tabRef}
         >
           {allTabs.map((item: TabPops, idx: number) => {
@@ -794,7 +829,7 @@ const DropdownFilterTabs = forwardRef<
           })}
         </ul>
       );
-    }, [tab, hasSelectedItemsInTab, activeTab, handleTabClick, moreOptionTab, moreOptionTabLabel, moreOptionTabIcon]);
+    }, [tab, hasSelectedItemsInTab, activeTab, handleTabClick, moreOptionTab, moreOptionTabLabel, moreOptionTabIcon, tabsScrollable]);
 
     const handleSelectAll = useCallback(() => {
       if (isMultiple) {
@@ -866,6 +901,8 @@ const DropdownFilterTabs = forwardRef<
 
     const handleApplySelected = (values?: any) => {
       setDropOpen(false);
+      setSearchValue('');
+      resetSuggections?.();
       applyTabFilter?.(values);
     };
 

package/src/styles/components/selectedautocomplete.css

@@ -37,6 +37,15 @@
 .qbs-tab-item {
   color: #4b5563;
   border-color: #d1d5db;
+  /* Prevent mid-word breaking from any inherited/global rules */
+  word-break: normal;
+  overflow-wrap: normal;
+  hyphens: manual;
+  /* Prevent breaking at spaces too (single-line label) */
+  white-space: nowrap;
+  /* In non-scroll layout, keep text tidy if it's forced into a narrow cell */
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .qbs-tab-item:hover {
   color: #2563eb;
@@ -45,6 +54,36 @@
   color: #2563eb;
   border-color: #2563eb;
 }
+
+/* When tabs overflow, keep them in a single row and allow horizontal scroll */
+.qbs-tab.qbs-tab-scroll {
+  flex-wrap: nowrap !important; /* override .qbs-flex-wrap */
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+}
+
+.qbs-tab.qbs-tab-scroll .qbs-tab-items {
+  flex: 0 0 auto !important; /* override .qbs-flex-1 */
+}
+
+.qbs-tab.qbs-tab-scroll .qbs-tab-item {
+  width: max-content !important; /* override .qbs-w-full */
+  white-space: nowrap;
+  word-break: normal;
+  overflow-wrap: normal;
+  hyphens: manual;
+  overflow: visible;
+  text-overflow: clip;
+}
+
+/* If the tab label has nested spans (icons + text), ensure they inherit the non-breaking behavior */
+.qbs-tab-item * {
+  word-break: inherit;
+  overflow-wrap: inherit;
+  hyphens: inherit;
+  white-space: inherit;
+}
 .qbs-relative {
   position: relative;
 }