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

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);
}

All 5 comments

The root of this might be #256

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

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

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.

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);
}
Was this page helpful?
0 / 5 - 0 ratings

Related issues

playpauseandstop picture playpauseandstop  ·  17Comments

jchristman picture jchristman  ·  27Comments

kesne picture kesne  ·  6Comments

jsteel picture jsteel  ·  7Comments

schmaluk picture schmaluk  ·  34Comments