When Draggable unmounts, if a textbox is focused, the textbox loses focus inexplicably

My app renders some Items depending on the content of several text input.

The Items each contain a Draggable.

I’m coming across this very strange behavior:

• I type a valid value into a textbox, causing some Items to render
• Without leaving the textbox, I delete or add a few characters to make the value invalid
• The Items disappear (unmount)
• My textbox suddenly loses focus. However, no onBlur handlers are called, and if I switch tabs / windows and then switch back, focus is restored
• I can prevent this issue by deleting the Draggable component

Here’s a codesandbox showing the issue: https://codesandbox.io/s/32x3voojm5

I can consistently reproduce this.

Browser is Chrome 64.0.3282.119 (Official Build) (64-bit) on Mac OSX.

[skvale]

Looks like it is an issue in the enableUserSelectHack prop

enableUserSelectHack causes this to be called

export function removeUserSelectStyles(doc: ?Document) {
  try {
    if (doc && doc.body) removeClassName(doc.body, 'react-draggable-transparent-selection');
    window.getSelection().removeAllRanges();  // remove selection caused by scroll
  } catch (e) {
    // probably IE
  }
}

You could try

<Draggable enableUserSelectHack={false}>

But I didn’t look into what consequence not calling removeUserSelectStyles would have.

Working: https://codesandbox.io/s/944j9x101o

[lc-stevenzhang]

Thank you guys! I have encounter the same problem, my filter lose focus cause the Draggable. And enableUserSelectHack={false} fixed my problem.