Tagify doesn't show dropdown in Dialog - probably due to #top-layer

[RoflJOE]

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

Tagify doesn't show dropdown in Dialog - probably due to #top-layer.

Has anybody experienced this issue before?

Attached is a picture to show the issue.
I know it's blurry, but it's because the Dropdown is hidden behind the Dialog element, and also because I blur out information not relevant to the issue.

1. If I set the Dialog element opacity to 0.5 you can see the dropdown behind it.
2. Setting z-index makes no difference, as z-index doesn't affect Dialog elements - Dialog is Top-Layer and will always be on top.
3. I have also tried generating the Tagify elements after the Modal have opened, but that made no difference.

[RoflJOE]

It seems like it's because Tagify generates the "tagify__dropdown" outside of the Dialog element, appends it to the HTML Body.. And therefore it will appear behind the Dialog element 🤔

Is there any way to get Tagify to append the "tagify__dropdown" element inside the Dialog element, where the input is?
And not just append it to the HTML Body.

[RoflJOE]

I can get a little further with it, by using the dropdown.appendTarget setting.
And appending the dropdown to the Dialog element: appendTarget: document.getElementById("ModalAddSystemToMatches")

However, now the placement of the dropdown is wrong, it doesn't calculate the position Top and Left correctly.

This is mitigated a little bit by using the setting position: "text"

I will keep working on it and post updates.

[RoflJOE]

The position looks to be calculated based on the current position of the whole browser window, where you have scrolled to, and not calculating based on the element it has been appended to.

So if I set the Dialog element to be Position: Relative; it will calculate a little bit more correct, but still not close to optimal.
But setting the Dialog element with that position, breaks the functionality of the Dialog, so it won't behave correctly...

[RoflJOE]

Moving on - Still hoping for a reply

I tried all that I could think of, and we need to move on with our code - so I ended up creating my own custom Modal to avoid using the Dialog element with the built in showModal()

I used this code here for base, and built the custom modal from there: https://www.freecodecamp.org/news/how-to-build-a-modal-with-javascript/

I hope that Tagify will implement some functionality to make it usable in Dialog Modal, without the hacky code to try and make it align correctly when appending to elements inside the Dialog Modal.

Still hoping for a resolution, so we can go back and use the regular Dialog Modal, without too much hassle :)

[yairEO]

Hi, please post here a minimal reproduction of the issue in JSBIN, as is the guidelines for posting issues.. I cannot help without seeing the issue and be able to inspect the code.

[andreadipalma]

Hi @yairEO , having the same problem here and I believe I understood why it happens. When you put the tagify on a overlay layer like a Dialog window (using with React), you cannot see the dropdown. But I double checked it with the debugger. As you press the "@" the dropdown actually appears in the correct position but "under" the dialog box, so it is not actually not visible. I'm also looking in the code to override the class "tagify__dropdown" class just as a workaround in order to make it as the topmost layer in the stack, but no positive results as of now.

I recreated the problem using the react template on codesandbox:

https://codesandbox.io/s/tagify-react-issue-template-forked-wrs2dg?file=/src/index.js:0-2820

When you open the dialog box (I'm using react fluent UI) the dropdown appears behind the dialog box.
Can you help with any suggestion?

[andreadipalma]

Hi @RoflJOE can you help with this? Thank you

[yairEO]

@andreadipalma - Hi, I was on a long break from coding but am now back and will look at this issue.

Sorry @RoflJOE but if it was urgent you could have contacted me by email (others do that) and I would assist your company in a special manner by billing for it.

I did ask you to create a minimal JSBIN for me to example and you did not reply, and without your cooperation, I cannot help since I don't know your exact set-up which have led to your problematic outcome. I must have something to work with in order to conduct an investigation.

[yairEO]

@andreadipalma - seems like in your example the .tagify__dropdown doesn't have a high-enough z-index CSS value. That is all.

The popover layer (fluent-default-layer-host) has a z-index of 1000000 which is higher.

You, as the developer, should stack your layers accordingly and it's your responsibility to make sure they make sense.

[esnunes]

I've faced the same issue when using dialogs. I've fixed the issue by doing small changes in the getAncestorsOffset function:

      function getAncestorsOffsets(p){
        if (p.tagName === 'DIALOG') return {top: p.offsetTop, left: p.offsetLeft} // new

        var top = 0, left = 0;

        p = p.parentNode;

        // when in element-fullscreen mode, do not go above the fullscreened-element
        while(p && p != root){
          top += p.offsetTop || 0
          left += p.offsetLeft || 0

          if (p.tagName === 'DIALOG') break // new

          p = p.parentNode
        }

        return {top, left};
      }

I will create a PR with the modified code and a JSBIN sample of the issue. In sum, a dialog behaves as a new window, the function above was traversing the DOM hierarchy till a root element and adding the offset of all elements, however, those offsets should be discarded. This solution requires the user to set the dropdown.appendTarget to be the dialog itself or any element inside the dialog.

Another solution would be based on setting the dialog as the root element, the library could expose the root as a setting but that would add yet another setting. The function above would have to be modified to ensure the offset of ROOT was taking into account as the dialog may have a margin, I'm not sure if that would be applicable to fullscreen elements though.

[yairEO]

@esnunes - great solution in getAncestorsOffsets!

Yes, if Tagify is set up to be within a Dialog, then it would require manually setting the appendTarget to be other than document.body.

I is sad there is no "automatic" solution to this which I can do that will in require any change from developers using Tagify within a Dialog.