I have been testing react, redux and react-dnd for a new project and came with a strange situation that doesn't work in Google Chrome (I've only tested it on windows. both 32bit and 64bit). It works fine in Firefox and IE11.
I'm showing a list of divs that are backed up by redux store,
I'm using dnd to drop one item on another to exchange them.
The first 5 or so items in the list can be dragged but the the rest cannot.
I'v put a console log on canDrop on the render of the component and you can see, that for those items that cannot be dragged, it changes immediately from true to false.
I've put a sample project at github https://github.com/zivni/test-react-dnd-chrome
Edit: I identified the source of the problem. it is the classes on the dragged div. in my PlacedItemContainer.tsx i'm using classNames to add classes on items when moving over or can drop in them:
<div className={classNames(this.getDndStyle()) }>
...
private getDndStyle(): ClassDictionary {
const {isOver, canDrop} = this.props;
return {
['itemIsOver']: isOver && canDrop,
['itemCanDrop']: canDrop,
}
}
the styles are:
.itemIsOver{
background: yellowgreen;
}
.itemCanDrop{
border: 1px solid green;
}
As you can see, in normal mode there is no css class on the div.
When I removed the class from the div or when I changed to
return {
['item']: true,
['itemIsOver']: isOver && canDrop,
['itemCanDrop']: canDrop,
}
and css:
.item{
border: 1px solid black;
}
It started to work.
But when the css was not border but background for instance, it didn't work. but this did work:
.itemIsOver{
background: yellowgreen;
}
.item .itemCanDrop{
border: 1px solid green;
}
.item{
background: wheat;
}
Also just putting the item class on the div without an actual css style, didn't work.
I have been testing react, redux and react-dnd for a new project and came with a strange situation that doesn't work in Google Chrome (I've only tested it on windows. both 32bit and 64bit). It works fine in Firefox and IE11.
I'm showing a list of divs that are backed up by redux store,
I'm using dnd to drop one item on another to exchange them.
The first 5 or so items in the list can be dragged but the the rest cannot.
I'v put a console log on canDrop on the render of the component and you can see, that for those items that cannot be dragged, it changes immediately from true to false.
I've put a sample project at github https://github.com/zivni/test-react-dnd-chrome
Edit: I identified the source of the problem. it is the classes on the dragged div. in my PlacedItemContainer.tsx i'm using classNames to add classes on items when moving over or can drop in them:
the styles are:
As you can see, in normal mode there is no css class on the div.
When I removed the class from the div or when I changed to
It started to work.
But when the css was not border but background for instance, it didn't work. but this did work:
Also just putting the item class on the div without an actual css style, didn't work.