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

[lukeknep]

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.

[lukeknep]

Temporary workaround is to only render the Draggable when the component I care about is hovered, or only when the textbox is not focused. But both of those have flaws.

BTW this happens so consistently in our application that, without this workaround, we would not be able to use React Draggable in our application.

[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

[STRML]

Hmm. The user-select hack is necessary to ensure we don't start dragging text all over the page when using the draggable, but calling it on componentWillUnmount is a bit of a hack that ensures that we clean up after ourselves. It may be safe to completely remove it, or at the very least check if a drag is still in progress and only then clean up. But I believe handleDragStop() should be called in all circumstances.

[RomaricMourgues]

I resolved it by adding :

enableUserSelectHack={false}
onStart={(event) => {$("body").addClass("dragging");}}
onStop={(event) => {$("body").removeClass("dragging");}}

on and

body.dragging {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

in style.css.

Thanks for your comment about enableUserSelectHack, it helped !

[lc-stevenzhang]

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

[paul-pro]

Not directly related to the focus issue, but I have had a rare selection bug:
if there is ::selection normalization in css (added with some antd lib code in my case) and there is both color and background were set, text becomes white on dragging handler. See repro (+ possible solution): https://codesandbox.io/s/n54p5mwm60

Should we somehow improve current addUserSelectStyles implementation? If @mzabriskie or @STRML approves I can create PR with all: inherit style in this function.

[STRML]

Fixed in v3.3.2.

[ghost]

@STRML Is it possible that this problem still exists in v.4.0.3? Use case: I have a list of draggable items and I want to search in this list. When the list rerenders, the search field loses focus.
👉 https://stackblitz.com/edit/react-draggable-search

[MattMorrisDev]

I'm also still having related issues using the latest release.

Adding enableUserSelectHack={false} fixes the textbox losing focus issue for me, but that prevents my dragging from actually showing any movement until the drag finishes (and then it just snaps all the way to the end).

[schnerd]

Yeah, I'm not sure how the change in 3.3.2 is supposed to fix this issue. The de-focusing is caused by the window.getSelection().removeAllRanges() call.

Modifying react-draggable to check selection.type would fix it:

const selection = window.getSelection();
if (selection && selection.type !== 'Caret') {
  selection.removeAllRanges();
}

Tested this change locally with yarn link and it works fine. Opened PR #450 in case you'd like to merge.

I also wonder why *::selection {all: inherit;} is used instead of user-select: none; (After testing it seems like this has the nice side effect of causing overflowing containers/viewports to scroll as you drag near the edges)