Skip to content

[bug] Empty lists are not allowed at initialization for a shared group of ReactSortable components #204

Open
@michaeltheyeti

Description

@michaeltheyeti

Describe the bug
Empty lists are not allowed at initialization for a shared group of ReactSortable components

To Reproduce
Steps to reproduce the behavior:

  1. Create two arrays with elements for using in ReactSortable components
  2. One array has items. The other is empty.
  3. Create two ReactSortable components which are shared using the arrays defined previously
  4. After building the app, start in browser
  5. Devtools will produce the following set of errors for the empty array
TypeError: Cannot read property 'filtered' of undefined
    at 2.1234d37d.chunk.js:2
    at 2.1234d37d.chunk.js:2
    at T (2.1234d37d.chunk.js:2)
    at Object.O [as map] (2.1234d37d.chunk.js:2)
    at f.value (2.1234d37d.chunk.js:2)
    at f.value (2.1234d37d.chunk.js:2)
    at Ua (2.1234d37d.chunk.js:2)
    at Ba (2.1234d37d.chunk.js:2)
    at $l (2.1234d37d.chunk.js:2)
    at Tu (2.1234d37d.chunk.js:2)
ll @ 2.1234d37d.chunk.js:2
n.callback @ 2.1234d37d.chunk.js:2
di @ 2.1234d37d.chunk.js:2
hl @ 2.1234d37d.chunk.js:2
Nu @ 2.1234d37d.chunk.js:2
t.unstable_runWithPriority @ 2.1234d37d.chunk.js:2
Wo @ 2.1234d37d.chunk.js:2
Du @ 2.1234d37d.chunk.js:2
gu @ 2.1234d37d.chunk.js:2
(anonymous) @ 2.1234d37d.chunk.js:2
t.unstable_runWithPriority @ 2.1234d37d.chunk.js:2
Wo @ 2.1234d37d.chunk.js:2
Qo @ 2.1234d37d.chunk.js:2
Vo @ 2.1234d37d.chunk.js:2
vu @ 2.1234d37d.chunk.js:2
notify @ 2.1234d37d.chunk.js:2
t.notifyNestedSubs @ 2.1234d37d.chunk.js:2
t.handleChangeWrapper @ 2.1234d37d.chunk.js:2
g @ 2.1234d37d.chunk.js:2
(anonymous) @ 2.1234d37d.chunk.js:2
dispatch @ 2.1234d37d.chunk.js:2
(anonymous) @ main.a1320b66.chunk.js:1
c @ 2.1234d37d.chunk.js:2
(anonymous) @ 2.1234d37d.chunk.js:2
(anonymous) @ 2.1234d37d.chunk.js:2
r @ 2.1234d37d.chunk.js:2
l @ 2.1234d37d.chunk.js:2
Promise.then (async)
r @ 2.1234d37d.chunk.js:2
l @ 2.1234d37d.chunk.js:2
Promise.then (async)
r @ 2.1234d37d.chunk.js:2
l @ 2.1234d37d.chunk.js:2
(anonymous) @ 2.1234d37d.chunk.js:2
(anonymous) @ 2.1234d37d.chunk.js:2
(anonymous) @ main.a1320b66.chunk.js:1
(anonymous) @ 2.1234d37d.chunk.js:2
(anonymous) @ main.a1320b66.chunk.js:1
Lu @ 2.1234d37d.chunk.js:2
t.unstable_runWithPriority @ 2.1234d37d.chunk.js:2
Wo @ 2.1234d37d.chunk.js:2
Au @ 2.1234d37d.chunk.js:2
(anonymous) @ 2.1234d37d.chunk.js:2
R @ 2.1234d37d.chunk.js:2
_.port1.onmessage @ 2.1234d37d.chunk.js:2
resourcesReducer.js:119 Cannot read property 'filtered' of undefined

Expected behavior
I expect that the ReactSortable component with the empty array will simply initialize with a minimum height (overridable of course) and allow its list/array to be empty.

Information
react-sortable = ^6.0.0
react = ^17.0.1

Additional context
These conditions prevent the app from rendering. It's possible hide an empty element from rendering, but then it is impossible to drag onto that element.
My non-empty list contains the four required properties on each element. In order to load my 'empty' list I need to have a 'dummy' element that is filtered with code to prevent dragging of the element.

Like the following:

    batchresources: [{ id: 99999999999, selected: false, filtered: true, chosen: false }],

Please provide examples, screenshots or a code sandbox for faster resolution times.
image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions