fix(VariantManagement): show search in view list popover if count is over 10 (#4999)

Fixes #4992

Author: Lukas742

packages/main/src/components/VariantManagement/VariantManagement.cy.tsx

@@ -253,28 +253,28 @@ describe('VariantManagement', () => {
       <VariantManagement>
         <VariantItem>VariantItem 1</VariantItem>
         <VariantItem selected>VariantItem 2</VariantItem>
-        {...new Array(8)
+        {...new Array(9)
           .fill(':)')
           .map((_, index) => <VariantItem key={index + 3}>{`VariantItem ${index + 3}`}</VariantItem>)}
       </VariantManagement>
     );
     cy.get('[icon="navigation-down-arrow"]').click();
-    cy.get('[ui5-li]').should('have.length', 10);
+    cy.get('[ui5-li]').should('have.length', 11);
     cy.findByPlaceholderText('Search').typeIntoUi5Input('VariantItem 10');
     cy.get('[ui5-li]').should('have.length', 1).should('have.text', 'VariantItem 10');
     cy.get('[input-icon]').click();
-    cy.get('[ui5-li]').should('have.length', 10);
+    cy.get('[ui5-li]').should('have.length', 11);
 
     cy.mount(
       <VariantManagement>
         {TwoVariantItems}
-        {new Array(7).fill(':)').map((_, index) => (
+        {new Array(8).fill(':)').map((_, index) => (
           <VariantItem key={index + 3}>{`VariantItem ${index + 3}`}</VariantItem>
         ))}
       </VariantManagement>
     );
     cy.get('[icon="navigation-down-arrow"]').click();
-    cy.get('[ui5-li]').should('have.length', 9);
+    cy.get('[ui5-li]').should('have.length', 10);
     cy.findByPlaceholderText('Search', { timeout: 200 }).should('not.exist');
   });
 

packages/main/src/components/VariantManagement/index.tsx

@@ -279,20 +279,11 @@ const VariantManagement = forwardRef<HTMLDivElement, VariantManagementPropTypes>
   const popoverRef = useRef<ResponsivePopoverDomRef>(null);
 
   const [safeChildren, setSafeChildren] = useState(Children.toArray(children));
-  const [showInput, setShowInput] = useState(safeChildren.length > 9);
 
   useEffect(() => {
     setSafeChildren(Children.toArray(children));
   }, [children]);
 
-  useEffect(() => {
-    if (safeChildren.length > 9) {
-      setShowInput(true);
-    } else {
-      setShowInput(false);
-    }
-  }, [safeChildren.length]);
-
   const [manageViewsDialogOpen, setManageViewsDialogOpen] = useState(false);
   const [saveAsDialogOpen, setSaveAsDialogOpen] = useState(false);
   const [selectedVariant, setSelectedVariant] = useState<SelectedVariant | undefined>(() => {
@@ -449,6 +440,7 @@ const VariantManagement = forwardRef<HTMLDivElement, VariantManagementPropTypes>
   }, [showOnlyFavorites, safeChildren]);
 
   const safeChildrenWithFavorites = favoriteChildren ?? safeChildren;
+  const showInput = safeChildrenWithFavorites.length > 10;
 
   const [filteredChildren, setFilteredChildren] = useState(undefined);
   const [searchValue, setSearchValue] = useState('');