react-core-ts 2.0.2 → 2.0.4

package/src/dropdownFilterTabs.tsx

@@ -24,6 +24,9 @@ const DropdownFilterTabs = forwardRef<
   AutoSuggestionInputProps & {
     dropdownRef?: React.RefObject<HTMLDivElement>;
     open?: boolean;
+    applyTabFilter?: () => void;
+    onToolClose?: () => void;
+
   }
 >(
   (
@@ -81,6 +84,8 @@ const DropdownFilterTabs = forwardRef<
       enableSelectAll = false,
       dropdownRef,
       open = false,
+      applyTabFilter,
+      onToolClose
     },
     ref
   ) => {
@@ -121,6 +126,7 @@ const DropdownFilterTabs = forwardRef<
     const [selectAll, setSelectAll] = useState(false);
     const [refetchData, setRefetchData] = useState(false);
     const [allDataLoaded, setAllDataLoaded] = useState(false);
+    const [isKeyboardOpen, setIsKeyboardOpen] = useState(false);
 
     // Filter selected items based on current active tab
     const currentTabId = tab.length > 0 ? tab[activeTab].id : undefined;
@@ -128,8 +134,6 @@ const DropdownFilterTabs = forwardRef<
       return selectedItems.filter(item => item.tabId === currentTabId);
     }, [selectedItems, currentTabId]);
 
-    let originalOverflow = '';
-    let hasScrollbar = false;
 
     useEffect(() => {
       setDropOpen(open);
@@ -347,10 +351,6 @@ const DropdownFilterTabs = forwardRef<
       if (async && type === 'auto_suggestion' && tabInlineSearch) resetSuggections?.();
     };
 
-    const generateClassName = useCallback(() => {
-      return `qbs-textfield-default ${className} ${errors && errors?.message ? 'textfield-error' : 'textfield'
-        } ${expandable ? 'expandable' : ''}`;
-    }, [errors, name]);
     const handleRemoveSelectedItem = useCallback((index: number) => {
       const itemToRemove = filteredSelectedItems[index];
       setSelectedItems((prev) => {
@@ -361,48 +361,130 @@ const DropdownFilterTabs = forwardRef<
     }, [filteredSelectedItems, descId]);
 
     const uniqueDropArrowId = `${name}-drop-arrow-selected-list-icon`;
+    const isKeyboardOpenRef = useRef(false);
+
+    // Keep ref in sync with state for use in event handlers
+    useEffect(() => {
+      isKeyboardOpenRef.current = isKeyboardOpen;
+    }, [isKeyboardOpen]);
+
+    // Detect keyboard open on mobile using Visual Viewport API
     useEffect(() => {
+      const vv = (window as any).visualViewport;
+      if (!vv) return;
+      const onResize = () => {
+        // Heuristic: if visual viewport height shrinks a lot, keyboard is likely open
+        const open = vv.height < window.innerHeight - 100;
+        setIsKeyboardOpen(open);
+      };
+      vv.addEventListener("resize", onResize);
+      vv.addEventListener("scroll", onResize); // iOS sometimes fires scroll instead
+      onResize();
+      return () => {
+        vv.removeEventListener("resize", onResize);
+        vv.removeEventListener("scroll", onResize);
+      };
+    }, []);
+
+    useEffect(() => {
+      const handleScroll = (event: any) => {
+        // On mobile: Don't close dropdown on scroll when keyboard is open
+        // On desktop: Always allow closing on scroll
+        if (isKeyboardOpenRef.current) {
+          // Only prevent closing if keyboard is actually open (mobile scenario)
+          // Also check if input is focused to avoid closing while typing
+          const activeElement = document.activeElement;
+          if (activeElement && (
+            activeElement === inputRef.current ||
+            activeElement === inputSearchRef.current ||
+            (dropRef.current && dropRef.current.contains(activeElement))
+          )) {
+            return;
+          }
+        }
+
+        // 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(() => {
+            setDropOpen(false);
+            onToolClose?.();
+            if (!typeOnlyFetch) setSearchValue('');
+          }, 200);
+        }
+      };
+
       const handleClickOutside = (event: any) => {
+        const target = event.target as HTMLElement;
+
+        // When keyboard is open, be more lenient - only close on clear outside clicks
+        if (isKeyboardOpenRef.current) {
+          // Only close if it's a clear click outside, not on input/textarea elements
+          if (
+            dropRef.current &&
+            target instanceof Node &&
+            !dropRef.current.contains(target) &&
+            target?.id !== uniqueDropArrowId &&
+            event.type === 'mousedown' &&
+            target.closest &&
+            !target.closest('input') &&
+            !target.closest('textarea')
+          ) {
+            setTimeout(() => {
+              setDropOpen(false);
+              onToolClose?.();
+              if (!typeOnlyFetch) setSearchValue('');
+            }, 200);
+          }
+          return;
+        }
+
+        // Normal behavior when keyboard is not open
         if (
           dropRef.current &&
-          event.target instanceof Node &&
-          !dropRef.current.contains(event.target) &&
-          event.target?.id !== uniqueDropArrowId
+          target instanceof Node &&
+          !dropRef.current.contains(target) &&
+          target?.id !== uniqueDropArrowId
         ) {
           setTimeout(() => {
             setDropOpen(false);
+            onToolClose?.();
             if (!typeOnlyFetch) setSearchValue('');
           }, 200);
-          //setSearchValue("");
         }
       };
 
       document.addEventListener('mousedown', handleClickOutside as any);
-      window.addEventListener('scroll', handleClickOutside as any);
+      window.addEventListener('scroll', handleScroll as any);
 
       const scrollableDivs = document.querySelectorAll(
         'div[style*="overflow"], .overflow-auto, .overflow-y-auto, .overflow-x-auto'
       );
       scrollableDivs.forEach((div) =>
-        div.addEventListener('scroll', handleClickOutside as any)
+        div.addEventListener('scroll', handleScroll as any)
       );
       if (scrollRef && scrollRef.current && scrollRef.current !== null) {
-        scrollRef.current.addEventListener('scroll', handleClickOutside as any);
+        scrollRef.current.addEventListener('scroll', handleScroll as any);
       }
       return () => {
         document.removeEventListener('mousedown', handleClickOutside as any);
-        window.removeEventListener('scroll', handleClickOutside as any);
+        window.removeEventListener('scroll', handleScroll as any);
         scrollableDivs.forEach((div) =>
-          div.removeEventListener('scroll', handleClickOutside as any)
+          div.removeEventListener('scroll', handleScroll as any)
         );
         if (scrollRef && scrollRef.current && scrollRef.current !== null) {
           scrollRef.current.removeEventListener(
             'scroll',
-            handleClickOutside as any
+            handleScroll as any
           );
         }
       };
-    }, []);
+    }, [dropOpen, typeOnlyFetch, uniqueDropArrowId, onToolClose]);
 
     // Filtering suggestions based on type and search value
     const selected: any = isMultiple ? selectedItems : inputValue;
@@ -745,6 +827,11 @@ const DropdownFilterTabs = forwardRef<
       }
     };
 
+    const handleApplySelected = () => {
+      setDropOpen(false);
+      applyTabFilter?.();
+    };
+
     useEffect(() => {
       const allSelected =
         filteredData?.length > 0 && filteredSelectedItems?.length > 0 &&
@@ -959,10 +1046,10 @@ const DropdownFilterTabs = forwardRef<
                           className={`qbs-done-link qbs-text-right qbs-cursor-pointer ${viewMode ? 'hidden' : ''
                             }`}
                           onClick={() => {
-                            setDropOpen(false);
+                            handleApplySelected();
                           }}
                         >
-                          Done
+                          Apply
                         </div>
                       </div>
 

package/src/dummyAutoCompleteWithSelectedList.tsx

@@ -113,7 +113,6 @@ const AutoCompleteWithSelectedList = forwardRef<
         if (tab.length > 0) {
           if (tabRef?.current) dropdownHeight += tabRef?.current?.clientHeight;
         }
-        console.log(dropdownHeight);
         if (spaceBelow >= dropdownHeight) {
           dropdownPosition.top =
             inputRect.top + window.scrollY + inputRect.height;

package/src/styles/components/autocomplete.css

@@ -382,6 +382,21 @@ ul {
   color: #e76458;
 }
 
+.qbs-inline-all-dropdown-btn {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  position: absolute;
+  right: 25px;
+  z-index: 99;
+  top: 18px;
+  flex-wrap: wrap;
+}
+
+.qbs-inline-all-direct-dropdown-btn {
+  right: 0px;
+}
+
 .selected-items-container {
   display: flex;
   gap: 12px;
@@ -416,6 +431,18 @@ ul {
   color: #fff;
 }
 
+.selected-item-inline-counter {
+  right: 30px;
+}
+
+.selected-item-tool-direct-counter {
+  right: 60px;
+}
+
+.selected-item-nontool-direct-counter {
+  right: 35px;
+}
+
 .selected-item-more {
   display: flex;
   align-items: center;

package/src/utilities/tooltip.tsx

@@ -11,7 +11,6 @@ const ToolTip: React.FC<any> = ({ title, children }) => {
 
       const spaceAbove = inputBoxRect.top;
       const spaceBelow = viewportHeight - inputBoxRect.bottom;
-      console.log(spaceAbove, spaceBelow);
       if (spaceAbove > spaceBelow) {
         if (spaceAbove > 90 && spaceBelow < 120) {
           setDropdownPosition('top-position');