[BUG] PopupButton infinite render loop on production build

[igoratf]

Hello Typeform team 👋

I came across a strange bug when attempting to use the PopupButton this week. We were having an infinite render loop that happened under very specific conditions.

I noticed this only reproduced in React production build, but also specifically in incognito mode (I wasn't able to crack the reason for this part though). After a lot of debugging, I realized the bug was caused because we were trying to use the PopupButton with our own UI component inside it. Something like this:

<PopupButton id="<form-id>" style={{ fontSize: 20 }} className="my-button"> <Button variation="secondary"> Our own button component </Button> </PopupButton>

when trying to find the source of the error, we got to this:

I wouldn't think it was this element at first, until I tried to replace it with a simple text exactly like in the docs, then error stopped. The solution in our case was to move the Button outside the PopupButton and open it with a ref as your documentation shows (thanks for this!).

Just wanted to bring this case to your attention as something seems to be wrong with the compiled assets when we try to use different components as child of the PopupButton.

Appreciate your attention and the work on this lib! :)

[mathio]

Hello @igoratf

I tried putting a custom component into the PopupButon and it works as expected for me:
https://codesandbox.io/p/devbox/blissful-grothendieck-csk2x6?file=%2Fpages%2Findex.js%3A50%2C11

Can you please provide a reproducible example?

[igoratf]

Hi @mathio

Thanks for checking this!

Unfortunately I don't have a reproducible example, it was a very specific case that happened in a project at my company and was hard to reproduce on our own side. Since you have a working example with custom components, it might be related to our build setup and not an actual bug in the project then.

I will close this issue, just wanted to raise this so you could check it.
Appreciate your assistance!