React-beautiful-dnd: Can't focus input element inside Draggable element with click.

Created on 21 Sep 2017 · 4Comments · Source: atlassian/react-beautiful-dnd

Bug or feature request?

Bug

Expected behaviour

Click on input inside Draggable element make the input focused.

Actual behaviour

Click on input element is ignored, but I can still focus the input with rightclick or tab button.

Steps to reproduce

See the demo with Basic usage example.

Browser version

Chrome Version 61.0.3163.91 (Official Build) (64-bit)

Demo

https://www.webpackbin.com/bins/-Ku_6XQiCPARUUx0b-PU

question ❓

Source

asstet

Most helpful comment

Hey @asstet, you just need to stop propagation of mousedown events from the input 🙂 Here's an updated fork of your demo with this working correctly: https://www.webpackbin.com/bins/-KuabtumPW4RKbXlc5Ak

Here's the specific change you'll want to make:

<input
  defaultValue={item.content}
  onMouseDown={e => e.stopPropagation()}
/>

jaredcrowe on 22 Sep 2017

👍9 🎉4 🚀2 ❤2 😄2

All 4 comments

Here's the specific change you'll want to make:

<input
  defaultValue={item.content}
  onMouseDown={e => e.stopPropagation()}
/>

jaredcrowe on 22 Sep 2017

👍9 🎉4 🚀2 ❤2 😄2

Related to: #61 (similiar issue raised and solution offered)

alexreardon on 22 Sep 2017

Could be worth adding a note about this in the docs at some point

alexreardon on 22 Sep 2017

I had the same issue, and stopping propagation allowed me to focus my inputs, however, you still cannot cause the input to blur by clicking anywhere within the draggable while the input has focus. Any thoughts?