Dropdown position is incorrect when element enters fullscreen mode

[dirslashls]

Prerequisites

• I am running the latest version
• I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed

💥 Demo Page

https://jsbin.com/sovoceremu/1

Explanation

Access the above demo page and click the "Fullscreen" button. This should show the UI in fullscreen.

• What is the expected behavior?
  The dropdown should be positioned correctly when using fullscreen API.

• What is happening instead?
  The dropdown is not at the correct place.

• What error message are you getting?
  No errors.

The issue is how the top and left values are calculated at

tagify/src/parts/dropdown.js

Line 289 in e6605ed

while(p){

Current logic assumes to go all the way to the root. But when an element is requested to be in fullscreen mode, then any parent element of it doesn't matter as far as left/top values are concerned. I am not sure if I can do something in the app so Tagify doesn't have to make any change.

[yairEO]

Clicking the button does nothing on my computer (Chrome/Windows10)

[dirslashls]

Sorry about that. It seems an element within an iframe can't make a fullscreen request unless the iframe markup explicitly specifies allow="fullscreen". I couldn't do that with jsbin but can do it with jsfiddle.

Please visit https://jsfiddle.net/k7n1tmhw/ , then from dev tools change the iframe (name="result"). Look for existing "allow" attribute and just add fullscreen as an extra value. Then the button will launch fullscreen mode. In case all of this is tedious, you can just copy the html, css and javascript locally and do it without any of this iframe stuff.

[yairEO]

jsbin can discard the iframe by clicking on the top right arrow:

I can see the issue now and will resolve it in the coming days when I have time

[yairEO]

This is an edge-case that is not easily solvable. why are you entering fullscreen mode on an element?

[dirslashls]

The application has a lot of UI and it allows users to focus on part of the UI by entering into fullscreen mode. Imagine a stock market application or a dashboard with lots of widgets but you want the user to be able to focus on a specific widget if they want to.

[dirslashls]

FYI, locally I changed the

  while(p){

mentioned above to

var root = (document.fullscreenElement ?? document.webkitFullscreenElement ?? document.documentElement);
while (p !== root){

and it worked in normal and fullscreen modes.

[yairEO]

Good idea! I will incorporate that into the code and publish a new release later today

[dirslashls]

Thank you @yairEO