React-beautiful-dnd: Controlled input loses focus onChange

Created on 6 Mar 2019  路  2Comments  路  Source: atlassian/react-beautiful-dnd

Bug or feature request?

Bug

Expected behavior

When using a controlled text field inside a draggable component, editing the field works as expected, with the edits to maintain in state with the onChange handler.

Actual behavior

When using a controlled text field inside a draggable component, editing the field works causes focus to be lost - specifically when the state is being controlled.

Steps to reproduce

What version of React are you using?

Latest

What version of react-beautiful-dnd are you running?

Latest

What browser are you using?

Chrome

Demo

https://codesandbox.io/s/rmrnqlolwp

picture milkman4

Most helpful comment

Here you go: https://codesandbox.io/s/kon8qyy6qo

Your issue is that you are using the value of the input as part of the key for the draggable. This is causing the component to mount and remount which is the root of your issue.

picture alexreardon on 11 Mar 2019
👍4 🎉2 ❤1

All 2 comments

Here you go: https://codesandbox.io/s/kon8qyy6qo

Your issue is that you are using the value of the input as part of the key for the draggable. This is causing the component to mount and remount which is the root of your issue.

alexreardon picture alexreardon on 11 Mar 2019
👍4 🎉2 ❤1

@alexreardon thanks it worked

Karan02 picture Karan02 on 2 Oct 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

WJKwok picture WJKwok  路  3Comments
JESii picture JESii  路  3Comments
alexreardon picture alexreardon  路  3Comments
khurram-wasim picture khurram-wasim  路  3Comments
h182032 picture h182032  路  3Comments