bug: disabling and sorting not working well with nested ion-reorder-group
See original GitHub issueBug Report
Ionic version:
[ ] 4.x [x] 5.x
Current behavior:
Nested ion-reorder-group
is not working. I have a list of cards and in the list of cards I have a list of items. Now the user has the option to reorder the cards and the elements.
Naturally I created two reorder groups. One in the for the cards and one inside for the items.
However there now are a few problems:
- Reorder elements from the item gets added to the cards reorder group. SO the cards reorder group gets triggered by the items
- Disabled cards reorder group still gets its event triggered by the items (items reorder group is enabled)
- Disabling item reorder group does not work when cards reorder group is enabled
Expected behavior:
Correctly add the ion-reorder
elements only to its closest parent ion-reorder-group
Steps to reproduce:
Related code:
Issue Analytics
- State:
- Created 3 years ago
- Comments:5 (1 by maintainers)
Top Results From Across the Web
Ionic4 - Nested reorder groups problem - Ionic Framework
The nested reorder list shall work correctly, after its 1st level reorder object is reordered. My clunky workaround. By trial and error, I ......
Read more >ionic5 issue Click is not working inside ion-recoder list
It only works for me if I set disabled="true" . It seems like the ion-reorder-group stops propagation to do the reordering. – HasBert....
Read more >bug: ion-reorder prevents click event when ion ... - GitHub
Ionic version: [x] 5.x ; Current behavior: If ion-reorder-group is disabled, all elements affected by ion-reorder that also have a click event ...
Read more >The Dangers of Stopping Event Propagation - CSS-Tricks
This bug happens because the Bootstrap code responsible for closing the dropdown menu is listening for click events on the document. But since ......
Read more >Flattening nested arrays - Amazon Athena
To flatten a nested array's elements into a single array of values, use the flatten function. This query returns a row for each...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@liamdebeasi
I think the issue lies in this method (at least for the event):
https://github.com/ionic-team/ionic-framework/blob/de58238333d55334621445cdba4b67b8ba4958a1/core/src/components/reorder-group/reorder-group.tsx#L316
We should stop the while when we find a reorder-group which is not this reorder group. This should do the trick:
Regarding the
disabled
state. I guess this is a matter of setting correct css attributes. Just need to add this to theion-reorder
cssSee: https://stackblitz.com/edit/ionic-5-angular-10-start-template-woqd8q?file=src%2Fapp%2Ftab1%2Ftab1.page.scss
@liamdebeasi Yes this kinda works. However, the showcase here is pretty simplified.
In my use case I sort the list by a sort property. This means when the user reorders the elements I update this field after he reordered.
Now since the parent reorder event is also called by the childs reordering my parent sort order is also updated.
I can “fix” this by checking the target element of the reorder event (added an id to the
reorder-group
) and only call my logic when the ids match.The problem which still persist is that I cannot just disable the child
ion-reorder-group
. Since the parention-reorder-group
is still enabled theion-reorder
handles do not get hidden (as seen in the stackblitz example).This could also be “fixed” by me with an
*ngIf
.Nevertheless I still think this is a bug.
ion-reorder
elements should only belong to its closest parention-reorder-group