Search code examples
javascriptreactjsdomant-design-pro

Bug where only header cell content is dragged using react-resizable, react-drag-listview and AntDesign table

I have an Ant Design table where columns are resizable using react-resizable and drag-able using react-drag-listview.

All of the features are working nicely although there is a bug that exhibits itself under certain circumstances which means that the entire solution to having those features working together might not be viable or ready for production.

Here is the correct behaviour - when clicking on a table header cell the entire cell is dragged and you can see the box-shadow around its borders like this:

enter image description here

The bug is that sometimes after resizing a column and then clicking the header cell of the column to the right, the header cell is not dragged, only the the content (text in this case) / column title is, which looks like this:

enter image description here

Here is a code sandbox and a step by step guide on how to recreate the bug:

  1. Go to the code sandbox
  2. Click on the right hand border of any column
  3. Drag and resize that column to the right / bigger until the mouse is over the title of the column to the right of it like this:

enter image description here

  1. As soon as you have done this lift the mouse button up and press it down on the title of the column you are hovering over i.e. (click on the title of that column to the right)
  2. Drag the column

Sometime the behaviour is intermittent but it is easily reproducible and may be more visible if the steps are repeated quickly.

How can this bug be solved?

Solution

  • Issue occurs because header text is selectable and dragable by default. Add following style for dragHandle class and th elements. You will not be able to select text in the header but on the bright side issue will be resolved.

    thead tr th,.dragHandler {
  user-select: none;
}

    Take a look at the updated example.