ButtonGroup overflow logic is running w/o overflowButton prop

[GerardasB]

Describe the bug (current behavior)

ButtonGroup will re-render multiple times based on visible nodes returned by the useOverflow even when overflowButton prop is not provided. This complicates a use-case where a custom overflow logic is needed.

Expected Behavior

ButtonGroup should always render provided children as is when overflowButton is not specified.

Link to minimal repro

https://stackblitz.com/edit/github-fywssb?file=src%2FApp.tsx

Steps To Reproduce

1. Open console of the repro
2. Click Calculate overflow (simulates conditional rendering of overflow button)
3. Observe that the overflow button is toggled correctly (render is fine)
4. Observe the console - when the overflow button is rendered it logs HTMLCollection w/ 2 elements.

Anything else?

Final render is fine due to later re-renders.

[Ben-Pusey-Bentley]

Thanks for submitting this issue. I can confirm that I am able to reproduce it using the steps that you have provided. I would like to add that the elements in the HTMLCollection are the 1 and 2 buttons, and the 3 button is missing, along with the overflow button. @mayank99 Do you know of a way that we could avoid this re-render?

[mayank99]

This is strange. I actually noticed that all elements are correctly present in the HTMLCollection, even though the length is incorrect.

[mayank99]

Fixed in 3.7.2

[HaveSpacesuit]

@Ben-Pusey-Bentley Do you know if this would fix #1118?

[Ben-Pusey-Bentley]

@Ben-Pusey-Bentley Do you know if this would fix #1118?

Did some testing with the linked stackblitz, and this change does not seem to have fixed that issue.

[mayank99]

#1118 is technically unrelated, and can be worked around by not using overflowButton. But it does present an interesting question: why is overflowButton so difficult to use in practice? Maybe we need to rethink how we've implemented useOverflow.