Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
3 tasks done
RoflJOE opened this issue Jul 18, 2023 · 11 comments
Open
3 tasks done

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

RoflJOE opened this issue Jul 18, 2023 · 11 comments

Comments

@RoflJOE
Copy link

RoflJOE commented Jul 18, 2023

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.

TopLayerError

@RoflJOE
Copy link
Author

RoflJOE commented Jul 19, 2023

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
Copy link
Author

RoflJOE commented Jul 19, 2023

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.

3534534

@RoflJOE
Copy link
Author

RoflJOE commented Jul 19, 2023

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
Copy link
Author

RoflJOE commented Jul 20, 2023

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
Copy link
Owner

yairEO commented Aug 20, 2023

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
Copy link

andreadipalma commented Nov 1, 2023

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
Copy link

Hi @RoflJOE can you help with this? Thank you

@yairEO
Copy link
Owner

yairEO commented Jan 6, 2024

@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
Copy link
Owner

yairEO commented Jan 6, 2024

@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
Copy link

esnunes commented Jun 20, 2024

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
Copy link
Owner

yairEO commented Jun 22, 2024

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants