Root DOM blocks other elements in popup mode

[caaatisgood]

trafficstars

I added some content on the example you provided. Turns out the root DOM would block it above. I think the root DOM could be hidden in popup mode.

[alexgarces]

Hello @imrobinized. Thanks for reporting the issue but I'm not sure I understand it since I can't reproduce the problem. Where are you adding the blocked content exactly? I'm not sure if this change could break other people setups...

[caaatisgood]

Hi @alexgarces, here's the example. I added some contents to the example you provided to reproduce the case. screenshot on my end:

[Jule-]

@alexgarces Indeed, in popup mode you still generate this empty div :

<div
   class="ReactTypeformEmbed"
   style="position: absolute; top: 100px; left: 0px; width: 100%; height: 100%; overflow: hidden;">
</div>

Since it is an absolute 100% width and height div it catches pointer events for the HTML elements right after it in the regular flow (cf. @imrobinized screenshot).

For what I have seen you don't even use it for the form popup so I think it cannot break anything to remove the width and height (at least) of this div.ReactTypeformEmbed in popup mode. Removing them make a 0x0 div which is harmless for the user's DOM, IMHO.

[Jule-]

Btw @imrobinized an easy "dirty fix" :

<ReactTypeformEmbed popup ... style={{ width: 0, height: 0 }} />

[salvoravida]

same problem

[AlbertGozzi]

Btw @imrobinized an easy "dirty fix" :

<ReactTypeformEmbed popup ... style={{ width: 0, height: 0 }} />

Came for the same issue and this solved it!