Search code examples
reactjsantdreact-dnd

Ant Design Input / React DND - Unable to move text pointer inside Ant Design Input when using react-dnd

I am working on a project where I have an Ant Design Table, containing rows of Input Fields. These rows and moveable/draggable. I am using react-dnd to achieve this.

The problem that I am facing is when using Firefox browser, I can not move the text cursor/pointer in the Input field, when I am using any other browser I can.

I know and understand that it is difficult to select text inside the Input because it will cause the row to move. I have already found a workaround for that, even though that is not my real problem.

Here is a link to the demo project: https://codesandbox.io/s/react-dnd-antd-input-select-issue-gy2hb

Steps to reproduce:

  1. Using any other browser except Firefox try to move the text cursor inside the Input field using your mouse (not arrow keys). Outcome - The cursor/pointer will move depending on where you clicked.
  2. Using Firefox try to the same thing. Outcome - The cursor/pointer does not move regardless of where you click inside the Input field.

Expected Outcome: The cursor/pointer should move regardless of the browser

I need this to work on Firefox as I am working on an Important Project.

Solution

  • I had the same issue and this comment here helped me to solve it. Hope it helps you as well.