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

Reorder creates a stacking context which breaks children with a z-index #1313

Closed
PhilGarb opened this issue Oct 28, 2021 · 0 comments · Fixed by #1367
Closed

Reorder creates a stacking context which breaks children with a z-index #1313

PhilGarb opened this issue Oct 28, 2021 · 0 comments · Fixed by #1367
Labels

Comments

@PhilGarb
Copy link

@PhilGarb PhilGarb commented Oct 28, 2021

Description

Hi everyone!
Huge fan of the library and the changes in v5. I stumbled upon an issue when trying out the new Reorder Components. If an element that is part of the Reorder.Item needs to have a z-index to overlap other items (like a dropdown or combobox) it is not working with the current approach.

image

Please see the codesandbox for a reproduction. It is the Reorder example codesanbox forked.
Reproduction

Debug

I think the Reorder.Item has a stacking context, because it has transform: none applied. This might be coming from here, but I am absolutely not sure about that.

/**
* Update the layout of this element and resolve the latest drag constraints
*/
const { transformTemplate } = this.visualElement.getProps()
this.visualElement.getInstance().style.transform = transformTemplate
? transformTemplate({}, "")
: "none"
projection.root?.updateScroll()
projection.updateLayout()
this.resolveConstraints()

Result

This results in children of Reorder.Item not being able to overlap other elements.

Expected Behavior

A child with a z-index should correctly overlap other items.

I see two possible ways to achieve this.

  1. Change the applied css so no stacking context is created. This is probably quite difficult if this is not just how the Reorder components work.
  2. Allow the consumer to overwrite the zIndex of an item. It seems like here a z-index is created:
    const zIndex = useTransform([point.x, point.y], ([latestX, latestY]) =>
    latestX || latestY ? 1 : 0
    It is applied here and overwrites user styles making it impossible to pass a z-index to the element:
    style={{ ...style, x: point.x, y: point.y, zIndex }}
    is If instead of always using 0 here the user could provide a z-index it could be up to the consumer when to "raise" an item above the others.

Let me know if you need additional details or if I am missing a reason why it is working like this.

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

Successfully merging a pull request may close this issue.

1 participant