Skip to content

bug: When using IonReorder and trying to save the order in state, the list snaps to a different order #28496

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
3 tasks done
filifunk opened this issue Nov 8, 2023 · 3 comments
Labels

Comments

@filifunk
Copy link
Contributor

filifunk commented Nov 8, 2023

Prerequisites

Ionic Framework Version

v7.x

Current Behavior

I've got an array of arrays stored in state called items, I want to reorder the array of arrays and save it within state with the new order. Instead I seem to get a random order.

Expected Behavior

I expect it to work so that when I reorder the array of arrays, the order stays in that new order and I'm able to save it in state. The order stays how I expect it to only if I get rid of the line where I try to use setItems to save the new order.

Steps to Reproduce

https://stackblitz.com/edit/ionic-react-starter-telztw?file=pages%2FHome.js

Try and reorder the list here. I can't get it to stick.

Code Reproduction URL

https://stackblitz.com/edit/ionic-react-starter-telztw?file=pages%2FHome.js

Ionic Info

Ionic:

Ionic CLI : 7.1.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 7.2.3

Capacitor:

Capacitor CLI : 5.2.3
@capacitor/android : 5.2.3
@capacitor/core : 5.2.3
@capacitor/ios : 5.3.0

Utility:

cordova-res : 0.15.4
native-run (update available: 2.0.0) : 1.7.2

System:

NodeJS : v16.20.0 (/usr/local/bin/node)
npm : 8.19.4
OS : Linux 5.14

Additional Information

No response

@ionitron-bot ionitron-bot bot added the triage label Nov 8, 2023
@liamdebeasi liamdebeasi self-assigned this Nov 9, 2023
@liamdebeasi
Copy link
Contributor

Thanks for the issue. I am going to close this as this is not a bug in Ionic Framework. As per the Reorder Updating Data documentation, Ionic will try to reorder the DOM nodes when calling event.detail.complete. This clashes with React's render lifecycle which is why the position appears to be reset. In this case, you should pass false to event.detail.complete to prevent Ionic from reordering the DOM nodes.


Alternatively, you could simplify this code even more by calling setItems(event.detail.complete(items)); which will have Ionic handle reordering the array for you. Passing in the items array will also disable Ionic's automatic DOM reorder behavior.

@liamdebeasi liamdebeasi closed this as not planned Won't fix, can't repro, duplicate, stale Nov 9, 2023
@liamdebeasi liamdebeasi removed their assignment Nov 9, 2023
@liamdebeasi
Copy link
Contributor

liamdebeasi commented Nov 9, 2023

One other option I forgot to mention is you can use key to assign a stable identity to each element in your loop. Something like this should work too (and let you keep your existing doReorder implementation):

{items.map((thing, index) => {
  return (
    <IonItem key={thing}>
      <IonLabel>{thing}</IonLabel>
      <IonReorder />
    </IonItem>
  );
})}

edit: I updated the docs to make this clearer: ionic-team/ionic-docs#3239

Copy link

ionitron-bot bot commented Dec 9, 2023

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Dec 9, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

2 participants