Issue with Red Color Popover on Item Click in Versions 1.4.3 and Above

[varakumar1105]

Describe the bug

I wanted to bring to your attention a potential issue in the recent versions (1.4.3 and newer) of your application. Upon clicking an item, a red color popover appears, and it's unclear whether this behavior is intentional or if it might be a bug.

1.4.2...1.4.3

Your Example Website or App

https://codesandbox.io/p/sandbox/silent-river-58md72

Steps to Reproduce the Bug or Issue

To demonstrate the difference, I have prepared CodeSandbox examples for both versions:

• Version 1.4.3: https://codesandbox.io/p/sandbox/silent-river-58md72
• Older version: https://codesandbox.io/p/sandbox/5wy3rz5z1x

Expected behavior

By comparing these examples, you can observe the red color popover issue in the newer versions. I believe it's important to clarify whether this is an expected behavior or an unintended problem.

Thank you for your time and attention.

react-grid-layout library version

1.4.3

Operating System Version

Windows

Browser

Chrome

Additional context

No response

Screenshots or Videos

No response

[hunxjunedo]

I'm pretty sure its intended in order to maintain interactivity.

[alexandrbig]

More over, it prevents clicks inside the container.

See the behavior in codesandboxes:
new: https://codesandbox.io/p/sandbox/cranky-bird-6fgmhf
old: https://codesandbox.io/p/sandbox/zen-morning-vjqt5y

Click is is still possible

Normal way

Adding draggableCancel class to button.
Not suitable in my case

Strange way

When started dragging container on a button on release the click works %)

It has to be fixed, as for me.

[alexandrbig]

It is caused by #1923

@tantawyk @STRML guys you were discussing simple clicks which now are broken

@STRML wrote:

I think it was that it didn't make much sense to show the placeholder only on onDragStart in case it was a simple click with no movement.

Why is it important?
We have dozen of widgets with different clickable controls which after the update are not working. Is it possible to fix both issues - mentioned in PR and current one?

Thank you in advance.

[STRML]

It's important not to render a placeholder on a click - otherwise you would see a transparent red widget flash when you're just trying to click a button. It appears we have indeed actually broken this in 1.4.3+.

I am swamped with other commitments right now, if you can identify the issue please open a PR. Please include a test in that PR so we don't break it again! This interaction is complex.

[alexandrbig]

It's important not to render a placeholder on a click - otherwise you would see a transparent red widget flash when you're just trying to click a button. It appears we have indeed actually broken this in 1.4.3+.

I am swamped with other commitments right now, if you can identify the issue please open a PR. Please include a test in that PR so we don't break it again! This interaction is complex.

Thank you for your reply.
Currently I've downgraded to 1.4.2.

Once I have spare time I'll try to investigate it deeply.

[gripzyyy]

It's important not to render a placeholder on a click - otherwise you would see a transparent red widget flash when you're just trying to click a button. It appears we have indeed actually broken this in 1.4.3+.

I am swamped with other commitments right now, if you can identify the issue please open a PR. Please include a test in that PR so we don't break it again! This interaction is complex.

For me there seems to be the issue with Z-index, whenever I manually add a Z-index to my DOM elements it works. On click the red placeholder that appears has a Z-index of 3, so it's above the actual rendered DOM elements if you do not manually put a Z-index on them.

[gripzyyy]

It also appears that in 1.4.4 the red placeholder is rendered when the mouse is down not when the mouse starts moving, this along with my previous comment stating the Z-index issue creates issues, maybe this commit introduced the issue while trying to fix another issue: 57bba6b