react-core-ts 2.1.21 → 2.1.23

package/src/AutoCompleteWithTabFilter.tsx

@@ -363,7 +363,7 @@ const AutoCompleteWithTabFilter = forwardRef<
                         setShowToolsTab(false);
                         setAllDataLoaded(false);
                         if (!typeOnlyFetch) setSearchValue('');
-                    }, 200);
+                    }, 0);
                 }
             };
 
@@ -397,7 +397,7 @@ const AutoCompleteWithTabFilter = forwardRef<
                             setShowToolsTab(false);
                             setAllDataLoaded(false);
                             if (!typeOnlyFetch) setSearchValue('');
-                        }, 200);
+                        }, 0);
                     }
                     return;
                 }
@@ -414,7 +414,7 @@ const AutoCompleteWithTabFilter = forwardRef<
                         setShowToolsTab(false);
                         setAllDataLoaded(false);
                         if (!typeOnlyFetch) setSearchValue('');
-                    }, 200);
+                    }, 0);
                 }
             };
 
@@ -1145,7 +1145,7 @@ const AutoCompleteWithTabFilter = forwardRef<
                             {!countOnly ? (
                                 getSelectedItems(false)
                             ) : !tabInlineSearch ? (
-                                <div className={`selected-items-counter-container selected-item-inline-counter qbs-text-sm qbs-gap-1 ${!tabInlineSearch && autoDropdown ? 'selected-item-tool-direct-counter' : ''}`}>
+                                <div className={`selected-items-counter-container selected-item-inline-counter ${disabled ? 'selected-item-inline-counter-disabled' : ''} qbs-text-sm qbs-gap-1 ${!tabInlineSearch && autoDropdown && !disabled ? 'selected-item-tool-direct-counter' : ''}`}>
                                     <Tooltip title={allSelectedTooltipContent} enabled={selectedItems?.length > 0 ? true : false}>
                                         <span className="badge qbs-rounded-full qbs-text-xs qbs-inline-flex qbs-items-center qbs-justify-center qbs-px-2 qbs-py-1 qbs-leading-none qbs-min-w-6 qbs-min-h-6">
                                             {selectedItems?.length}
@@ -1249,7 +1249,7 @@ const AutoCompleteWithTabFilter = forwardRef<
                         />
                     </div>
 
-                    {enableToolsTab && (
+                    {enableToolsTab && !disabled && (
                         <button
                             disabled={disabled ?? readOnly}
                             onClick={(e) => handleOpenToolsTab(e)}

package/src/ReactAutoComplete.tsx

@@ -115,6 +115,7 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
     bottom: 0,
     right: 0,
   });
+  const [isPositionReady, setIsPositionReady] = useState(false);
   const checkIncludes = (
     mainString: string,
     subString: string,
@@ -381,6 +382,10 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
   useEffect(() => {
     // Only attach scroll listeners when dropdown is open and rendered in portal
     if (insideOpen || !dropOpen) {
+      // Reset positioning flag when dropdown is closed
+      if (!dropOpen && isPositionReady) {
+        setIsPositionReady(false);
+      }
       return;
     }
 
@@ -647,6 +652,7 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
         bottom,
         width: inputRect.width,
       });
+      setIsPositionReady(true);
     }
 
     return undefined;
@@ -1042,9 +1048,13 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
               )}
             </div>
           </div>
-          {dropOpen && (!isLoading || filteredData?.length > 0) && (
-            <>{insideOpen ? setDropDown() : <Portal>{setDropDown()}</Portal>}</>
-          )}
+          {dropOpen &&
+            (!insideOpen ? isPositionReady : true) &&
+            (!isLoading || filteredData?.length > 0) && (
+              <>
+                {insideOpen ? setDropDown() : <Portal>{setDropDown()}</Portal>}
+              </>
+            )}
         </div>
       </div>
     </div>

package/src/ReactAutoCompleteDropdown.tsx

@@ -119,6 +119,7 @@ const ModernAutoCompleteDropdown: React.FC<AutoSuggestionInputProps> = ({
     bottom: 0,
     right: 0,
   });
+  const [isPositionReady, setIsPositionReady] = useState(false);
   const checkIncludes = (
     mainString: string,
     subString: string,
@@ -402,6 +403,10 @@ const ModernAutoCompleteDropdown: React.FC<AutoSuggestionInputProps> = ({
   useEffect(() => {
     // Only attach scroll listeners when dropdown is open and rendered in portal
     if (insideOpen || !dropOpen) {
+      // Reset positioning flag when dropdown is closed
+      if (!dropOpen && isPositionReady) {
+        setIsPositionReady(false);
+      }
       return;
     }
 
@@ -672,6 +677,7 @@ const ModernAutoCompleteDropdown: React.FC<AutoSuggestionInputProps> = ({
         bottom,
         width: inputRect.width,
       });
+      setIsPositionReady(true);
     }
 
     return undefined;
@@ -1079,9 +1085,13 @@ const ModernAutoCompleteDropdown: React.FC<AutoSuggestionInputProps> = ({
               )}
             </div>
           </div>
-          {dropOpen && (!isLoading || filteredData?.length > 0) && (
-            <>{insideOpen ? setDropDown() : <Portal>{setDropDown()}</Portal>}</>
-          )}
+          {dropOpen &&
+            (!insideOpen ? isPositionReady : true) &&
+            (!isLoading || filteredData?.length > 0) && (
+              <>
+                {insideOpen ? setDropDown() : <Portal>{setDropDown()}</Portal>}
+              </>
+            )}
         </div>
       </div>
     </div>

package/src/dropdownFilterTabs.tsx

@@ -514,7 +514,7 @@ const DropdownFilterTabs = forwardRef<
             setDropOpen(false);
             onToolClose?.();
             if (!typeOnlyFetch) setSearchValue('');
-          }, 200);
+          }, 0);
         }
       };
 
@@ -538,7 +538,7 @@ const DropdownFilterTabs = forwardRef<
               setDropOpen(false);
               onToolClose?.();
               if (!typeOnlyFetch) setSearchValue('');
-            }, 200);
+            }, 0);
           }
           return;
         }
@@ -554,7 +554,7 @@ const DropdownFilterTabs = forwardRef<
             setDropOpen(false);
             onToolClose?.();
             if (!typeOnlyFetch) setSearchValue('');
-          }, 200);
+          }, 0);
         }
       };
 

package/src/styles/components/autocomplete.css

@@ -440,6 +440,10 @@ ul {
   right: 30px;
 }
 
+.selected-item-inline-counter-disabled {
+  right: 8px;
+}
+
 .selected-item-tool-direct-counter {
   right: 60px;
 }