React-dnd: Problems with text input inside draggable component (Firefox)

Created on 7 Aug 2015  ·  5Comments  ·  Source: react-dnd/react-dnd

There are problems with text inputs inside components that have the HTML5 attribute draggable set to true in Firefox (because of this known bug). I'm working on setting draggable to false in an onFocus handler and setting it back to true in an onBlur handler (as recommended here), but react-dnd has no support for such a workaround and the attribute is immediately set back to true.

Given that there doesn't seem to be progress on this bug in FireFox, is there room for a shim in react-dnd to handle this? I'll update this issue if I come up with a good solution regardless.

bug
Source
picture ntdb

Most helpful comment

You should be able to work around this bug by toggling a state variable in onFocus and onBlur, and changing your render function to _not_ call connectDragSource() during input:

render() {
  const element = <div><textarea onFocus=... /></div>;
  return this.state.editing ? element : this.props.connectDragSource(element);
}
picture gaearon on 17 Sep 2015
👍4

All 5 comments

The root of this might be #256

ntdb picture ntdb on 7 Aug 2015

For now I'm working off of a fork that allows me to manage the draggable attribute directly in my app.

ntdb picture ntdb on 7 Aug 2015

Thanks. I'm currently busy with some other projects.
If any of these PRs help you, let me know too: https://github.com/gaearon/react-dnd/pulls

gaearon picture gaearon on 7 Aug 2015

Please don't forget HTML5 backend is only included as a convenience.
You can publish your fixed version on NPM (it's a single file) but still use the main repo for everything else.

gaearon picture gaearon on 7 Aug 2015

You should be able to work around this bug by toggling a state variable in onFocus and onBlur, and changing your render function to _not_ call connectDragSource() during input:

render() {
  const element = <div><textarea onFocus=... /></div>;
  return this.state.editing ? element : this.props.connectDragSource(element);
}
gaearon picture gaearon on 17 Sep 2015
👍4
Was this page helpful?
0 / 5 - 0 ratings

Related issues

FutureProg picture FutureProg  ·  3Comments
Okami92 picture Okami92  ·  3Comments
dreamcog picture dreamcog  ·  4Comments
TheBolliwood picture TheBolliwood  ·  3Comments
BrennanRoberts picture BrennanRoberts  ·  3Comments