fix(Toolbar): make ids unique for overflow items (#4557)

Fixes #4556

Author: Lukas742

packages/main/src/components/Toolbar/OverflowPopover.tsx

@@ -129,6 +129,11 @@ export const OverflowPopover: FC<OverflowPopoverProps> = (props: OverflowPopover
             <div className={classes.popoverContent} ref={overflowContentRef}>
               {children.map((item, index) => {
                 if (index > lastVisibleIndex && index > numberOfAlwaysVisibleItems - 1) {
+                  // @ts-expect-error: if props is not defined, it doesn't have an id (is not a ReactElement)
+                  if (item?.props?.id) {
+                    // @ts-expect-error: item is ReactElement
+                    return cloneElement(item, { id: `${item.props.id}-overflow` });
+                  }
                   // @ts-expect-error: if type is not defined, it's not a spacer
                   if (item.type?.displayName === 'ToolbarSeparator') {
                     return cloneElement(item as ReactElement, {

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

@@ -535,6 +535,23 @@ describe('Toolbar', () => {
     cy.findByTestId('tb').should('have.css', 'boxShadow', 'rgb(0, 112, 242) 0px 0px 0px 2px inset');
   });
 
+  it('unique ids for overflow', () => {
+    cy.viewport(100, 500);
+    cy.mount(
+      <Toolbar>
+        <div id="1">Text1</div>
+        <div>Text2 no id</div>
+        <Button id="3">Text4</Button>
+      </Toolbar>
+    );
+
+    cy.get('#1').should('have.length', 1);
+    cy.get('#1-overflow').should('have.length', 1);
+    cy.findAllByText('Text2 no id').should('have.length', 2).and('not.have.attr', 'id');
+    cy.get('#3').should('have.length', 1);
+    cy.get('#3-overflow').should('have.length', 1);
+  });
+
   mountWithCustomTagName(Toolbar);
   cypressPassThroughTestsFactory(Toolbar);
 });