List renderer HOC: removeItems does not handle indices above 10 properly

[xou816]

Describe the bug

The removeItems function exposed by the array HOC does not work well with indexes above 10.

For instance, given a custom list renderer that holds 12 items, props.removeItems('', [11, 2])() won't give the expected result: only the item at index 2 will be removed.

The issue is with the usage of sort on an array of number in the implementation: [1, 2, 10].sort() === [1, 10, 2].

Expected behavior

The removeItems function exposed by the array HOC should work well with indexes above 10.

In this example, item at index 11 should have been removed.

Steps to reproduce the issue

Here is a test that reproduces the issue:

test('mapDispatchToArrayControlProps should remove items from array with more than 10 items', (t) => {
  const data = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'];
  const schema: JsonSchema = {
    type: 'array',
    items: {
      type: 'string',
    },
  };
  const uischema: ControlElement = {
    type: 'Control',
    scope: '#',
  };
  const initCore: JsonFormsCore = {
    uischema,
    schema,
    data,
    errors: [] as ErrorObject[],
  };
  const [getCore, dispatch] = mockDispatch(initCore);
  dispatch(init(data, schema, uischema));
  const props = mapDispatchToArrayControlProps(dispatch);
  props.removeItems('', [11, 2])();
  t.is(getCore().data.length, 10); // fails, actual value is 11
});

Screenshots

No response

In which browser are you experiencing the issue?

any

Which Version of JSON Forms are you using?

master

Framework

core

RendererSet

No response

Additional context

Custom renderer

[lucas-koehler]

Thanks for the report :)