store.get not sorting when using data-id type string[bug]

[eladonline]

Describe the bug

To Reproduce Steps to reproduce the behavior: this is the configuration:

new Sortable(refClassifierList.current, {
        animation: 150,
        handle: ".handle",
        group: `${profileName}_${policy.name}`,
        dataIdAttr: "data-id",
        store: {
          get: function (sortable) {
            const order = localStorage.getItem(sortable.options.group.name);
            return order ? order.split("|") : [];
          },
          set: function (sortable) {
            const order = sortable.toArray();
            localStorage.setItem(sortable.options.group.name, order.join("|"));
          },
        },
      });

this is the Item: <StyleClassifierContainer data-id={classifier.uid} key={classifier.uid}/>

this is how it saved in the storage: 82b4eae9-1683-4a8b-8317-3abd761054e8|27623740-fae4-429c-9ae9-375cdaac1114

Expected behavior to be sorted as saved in the local storage after refreshing the page

Real behavior ignores the local storage order (only when saved as strings, numbers works as expected)

Information this is how I parse:

<StyleClassifiersSection ref={refClassifierList}>
{classifiers.map((classifier, i) => {
          return (
            <Classifier
              profileName={profileName}
              key={classifier.uid}
              index={classifier.uid}
              policy={policy}
              classifier={classifier}
            />
          );
        })}
 </StyleClassifiersSection>

Versions: sortablejs = ^1.12.0 @types/sortablejs = not installed

[owen-m1]

@eladonline Im not sure what is causing the issue, but it seems like you are using React. You should try this with react-sortablejs and see if it fixes the problem.

[omeiirr]

Facing the same issue. Any workarounds found for this?

I'm also working in React, and using the react-sortablejs library.

I have described my use case in this issue

[ArtBat123]

Use dataIdAttr: 'data-id' . Specify 'data-id' in html.

let el = document.querySelector('#id')
let sortable = new Sortable(el, {
    dataIdAttr: "data-id",
    ...

html:

<div id="el">
    <div data-id="value1"></div>
    <div data-id="value2"></div>
</div>