As drag placeholder render, dom cannot trigger button click event which in grid item at v1.4.3

[moonrailgun]

Describe the bug

I wanna add a button ( for example delete this item) in grid item.

And in latest version, its not work. Because its will trigger onDrag event and render a placeholder on click event trigger

Relation PR: #1923

Your Example Website or App

https://codesandbox.io/s/vigorous-cdn-ssnvts?file=/src/ShowcaseLayout.js

Steps to Reproduce the Bug or Issue

1. open sandbox
2. click "Click" button in grid item, its will not print log, onClick event is not work
3. switch package version from 'v1.4.3' to 'v1.4.2'
4. try again of step 2, every thing is work

Expected behavior

As a user, i wanna we can click button in grid item. not just drag

react-grid-layout library version

v1.4.3

Operating System Version

windows

Browser

Chrome

Additional context

No response

Screenshots or Videos

20231112-230850.mp4

[旧梦丶996ICU]

我也遇到了同样的问题，尝试修改这段css代码

.react-grid-item.react-grid-placeholder {
  background: red;
  opacity: 0.2;
  transition-duration: 100ms;
  z-index: 2;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  pointer-events: none;
}

pointer-events: none;

[Thomas Zimmermann]

I think you should add the draggableCancel prop and put this className also on the button, I've modified your example to work.

[moonrailgun]

I think you should add the draggableCancel prop and put this className also on the button, I've modified your example to work.

Its a good idea, can as be a workaround solution. but when click major block for grid item, its will show a red block, and when i move it, this will disappear. Its looks weird

[jonashirata99]

Had a similar problem. In my case, I have a onClick in the grid item itself to set it as active, so I cannot use the draggableCancel prop on that

[Thomas Beverley]

This can also be an issue if you want the top-level item to be draggable and clickable.

We have a case where the draggable item can be clicked on for some interaction, or also just dragged. In 1.4.2 this works fine, however in 1.4.3 the onClick handler fails to fire.

[Matt Watts]

Same problem here, reverting to 1.4.2 fixes the issue for me.

[magyarp]

@moonrailgun Just add onMouseDown={(event) => event.stopPropagation()} to the button and your problem is gone.

[Jesper Pettersson]

I had the same problem, if I add onMouseDown={(event) => event.stopPropagation()} it fixes the issue.

[Hernan J. González]

Same problem here.

Because we have lots of widgets, with different interactive components, to place onMouseDown={(event) => event.stopPropagation()} everywhere is rather cumbersome.

This worked ok in 1.4.2 ?

Is this change of behaviour to be expected? I don't see any release notes or changelog.

[moonrailgun]

@leonbloy i already leave relation PR and codesandbox so you can check it by your self

[ddrapeau-jmdnsolutions]

I agree with @leonbloy that it is cumbersome. What if I have a bars chart that I need to click on any bar. Do I have to write onMouseDown=... on every bar? That does not make sense. Especially since it was working properly with v1.4.2, for me at least, it seems to be a bug needed to be solved. If only I was skilled enough to help, I would fix it myself and share with the community. Unfortunately, I am not that skilled.

[magyarp]

@leonbloy @ddrapeau-jmdnsolutions Add z-index: 10 to your direct child div of GridLayout.

[Hajimi]

some problem. mark

[feico]

如果您希望顶级项目可拖动和可单击，这也可能是一个问题。

我们有一种情况，可以单击可拖动项目进行某些交互，或者也可以只是拖动。在1.4.2此工作正常，但是在1.4.3onClick 处理程序中无法触发。

Thank you for solving my problem

[Antoine Latournerie]

Based on @xams-creator and @magyarp suggestions, these two CSS only solutions work:

.react-grid-item.react-grid-placeholder {
  pointer-events: none;
}

.react-grid-item {
  z-index: 3;
}

However the end result is slightly different: with the first solution the placeholder will appear on mouse down but not with the second one.

[TeoAvignon]

@latourna Cheers a lot! Looks like it also fixes a bug I have where the placeholder get stuck in front of the div!