OrderList: Behavior when using spread syntax in onChange

[xabierun]

Describe the bug

Hello.
When updating state using spread syntax with the value of [event.value] passed when the onChange event of OrderList is fired, the following bug occurs.

• Focus is lost when selecting.
• When the down arrow is pressed continuously, "undefined" is stored in the array and becomes an invalid value.

Reproducer

https://codesandbox.io/s/primereact-demo-forked-i55nkl?file=/src/demo.js

PrimeReact version

8.3.0

React version

17.x

Language

TypeScript

Build / Runtime

Next.js

Browser(s)

No response

Steps to reproduce the behavior

1. select one of the products shown.
2. press the down arrow once (the focus is removed at this point)
3. Press the down arrow again (the value of the item at the top is undefined)

Expected behavior

Ideally, no focus is lost and no undefined is stored in the array.

[melloware]

I will try and diagnose what is going on here. Is it only with spread notation? Not if you use individual props?

[xabierun]

For example, if I keep sort numbers in my product list and I want to update only the other values without changing the sort numbers, I want to use the spread syntax.

  const sortEventHandle = (value) => {
    const newData = value.map((item, index) => {
      return {
          ...item,
         sort_number: products[index].sort_number
       };
    });
    setProducts(newData);
  };

[kl-nevermore]

@xabierun
when dataKey isn't passed, ObjectUtils.findIndexInList will use reference checking

return dataKey ? ... : list.findIndex((item) => item === value);

So you should passed dataKey like...

<OrderList
    dataKey="id"
    value={products}
    onChange={(e) => {
        sortEventHandle(e);
    }}
    itemTemplate={itemTemplate}
    header="Products"
></OrderList>;

[kl-nevermore]

@melloware
Maybe give a warning in development mode when not pass dataKey?
or
Update doc to inform users of the importance of dataKey(like Table, OrderList, etc.)

[melloware]

Lets update docs and make sure all showcase examples have a dataKey ??

[melloware]

OK I updated all examples and switching dataKey to required in the TypeScript def.