React-beautiful-dnd: Message: Unable to find draggable with id

Created on 2 Nov 2019 · 4Comments · Source: atlassian/react-beautiful-dnd

Hi! This is not really a bug, but I was unable to find any support related to the react-beautiful-dnd messages I received in my console.

Expected behavior

I am trying to create an accordion whose top-level elements can be dragged and dropped.

Actual behavior

Only the first draggable selected remains draggable. I receive a message 'unable to find draggable id: ' - unfortunately, I cannot find any issues related to the message. For example, if we have three draggable elements, A, B, and C positioned as such:

A
B
C

If we drag C above B, B can no longer be dragged, but C and A can be dragged.

A
C
B

Now, if you try dragging with A below C, or C above A, A then becomes undraggable.

Steps to reproduce

Please refer to my codesandbox link to reproduce the following steps:

Drag left-nav-three above left-nav-two
Now try dragging left-nav-two. The console should record a unable to find draggable with id: left-nav-two message. left-nav-two is now undraggable.
Now, drag left-nav-three above left-nav-one.
left-nav-one is now undraggable.

I also got another message Detected non-consecutive <Draggable /> indexes but I am unable to reproduce this.

What version of `React` are you using?

16.11.0 (forked from your codesandbox)

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

12.0.0 (forked from your codesandbox)

What browser are you using?

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

Demo

https://codesandbox.io/s/vertical-list-ktdtt

unconfirmed-bug untriaged

Source

kwajiehao

Most helpful comment

I was able to fix your issue by adding keys:

https://codesandbox.io/s/vertical-list-9rmrs

Here is some background details: https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/api/draggable.md#keys-for-a-list-of-draggable-

alexreardon on 2 Nov 2019

👍4

All 4 comments

Check your console. I can see a few issues:

the items in your list to not have a key (needed for react to avoid
unmounting items during a reorder)
you are having some issues with your indexes (see your console)

On Sat, Nov 2, 2019 at 9:10 PM kwajiehao notifications@github.com wrote:

Expected behavior

I am trying to create an accordion whose top-level elements can be dragged
and dropped.
Actual behavior

Only the first draggable selected remains draggable. I receive a message
'unable to find draggable id: ' - unfortunately, I cannot find any issues
related to the message. For example, if we have three draggable elements,
A, B, and C positioned as such:

A
B
C

If we drag C above B, B can no longer be dragged, but C and A can be
dragged.

A
C
B

Now, if you try dragging with A below C, or C above A, A then becomes
undraggable.
Steps to reproduce

Please refer to my codesandbox link to reproduce the following steps:

Drag left-nav-three above left-nav-two

Now try dragging left-nav-two. The console should record a unable to
find draggable with id: left-nav-two message. left-nav-two is now
undraggable.

Now, drag left-nav-three above left-nav-one.

left-nav-one is now undraggable.

I also got another message Detected non-consecutive indexes
but I am unable to reproduce this.
What version of React are you using?

16.11.0 (forked from your codesandbox)
What version of react-beautiful-dnd are you running?

12.0.0 (forked from your codesandbox)
What browser are you using?

Chrome Version 78.0.3904.87 (Official Build) (64-bit)
Demo

https://codesandbox.io/s/vertical-list-ktdtt

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/atlassian/react-beautiful-dnd/issues/1580?email_source=notifications&email_token=AAQU33IXUGOQWQVV72D2GTLQRVG2HA5CNFSM4JIEQGAKYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4HWKBSIQ,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAQU33O4LW5SJBT5YRW3UYDQRVG2HANCNFSM4JIEQGAA
.

alexreardon on 2 Nov 2019

I was able to fix your issue by adding keys:

https://codesandbox.io/s/vertical-list-9rmrs

Here is some background details: https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/api/draggable.md#keys-for-a-list-of-draggable-

alexreardon on 2 Nov 2019

👍4

ah i see. i'm pretty new to front-end development but i found your video series on react-beautiful-dnd wonderfully explained - thanks for taking the time to have a look at this issue!

kwajiehao on 2 Nov 2019

❤3

I didn't realize this either and this issue has helped me tremendously, thanks for asking the question!