Skip to content

feat: expandable option should not snap back immediately on gesture release #27794

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

Open
3 tasks done
darrylnoakes opened this issue Jul 13, 2023 · 5 comments
Open
3 tasks done
Labels
package: core @ionic/core package type: feature request a new feature, enhancement, or improvement

Comments

@darrylnoakes
Copy link

Prerequisites

Ionic Framework Version

v6.x

Current Behavior

The docs for ion-item-sliding state the following:

Options can be expanded to take up the full width of the item if you swipe past a certain point. This can be combined with the ionSwipe event on the item options to call a method when the item is fully swiped.

The ion-item-options docs further state that ionSwipe is "emitted when the item has been fully swiped."

However, I am seeing none of this behavior, at least not as I expect.

On the other hand, the ion-item-option docs states of the expandable attribute that, "if true, the option will expand to take up the available width and cover any other options," which seems to be subtly different, and pretty much what the actual behavior is.


Currently, an item will never stay expanded. After releasing the extra swipe, the expanded item instantly snaps back to normal width.

Also, the ionSwipe event is triggered after very little extra distance has been covered; hardly "fully swiped" by any means.

Expected Behavior

I expect the expanded option to expand to the full width of the item and stay like that.
I expect the ionSwipe event to only be fired once this has happened.

Steps to Reproduce

  1. Create a page with the example code in the docs on expandable options
  2. Optional: attach an ionSwipe listener to the ion-item-options and log calls.
  3. Try to expand the item.

Code Reproduction URL

No response

Ionic Info

Ionic:

   Ionic CLI       : 6.16.3 (C:\Users\Darryl\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework : @ionic/vue 6.7.5

Utility:

   cordova-res : not installed globally
   native-run  : not installed globally

System:

   NodeJS : v18.15.0 (C:\Users\Darryl\AppData\Local\Volta\tools\image\node\18.15.0\node.exe)
   npm    : 9.5.0
   OS     : Windows 10

Actually Windows 11.

Additional Information

Relevant/potentially relevant issues:

Video of reproduction:

Screen_Recording_20230713_103818_Chrome.mp4
@ionitron-bot ionitron-bot bot added the triage label Jul 13, 2023
@liamdebeasi liamdebeasi self-assigned this Jul 14, 2023
@liamdebeasi
Copy link
Contributor

Thanks for the report. Part of the problem here is the description of ionSwipe is really vague. ionSwipe fires when the user has swiped on ion-item-options such that the options are fully revealed. This means that you need to essentially swipe past the boundary of the options to complete the gesture. Note that a partial swipe that still causes the options to be revealed does not cause ionSwipe to fire.

Options can be expanded to take up the full width of the item if you swipe past a certain point. This can be combined with the ionSwipe event on the item options to call a method when the item is fully swiped.

The documentation notes this to mean that you can use the ionSwipe event to know when that expandable option has been fully expanded (i.e. the expandable option is covering all the other options) so you can fire the callback for that option.

However, the behavior where the expanded option snaps back is definitely not correct. Our current thinking is the expanded option should stay expanded on gesture-release, and ionSwipe should expose a method similar to the complete method on ion-refresher that lets the expanded option snap back to its initial state so it's not stuck covering the other options. This gives developers the option to either keep the option expanded or have it reset back to its initial state.

@liamdebeasi liamdebeasi changed the title bug: expandable option in ion-item-sliding does not expand to full width when swiped / ionSwipe event triggered too easily bug: expandable option should not snap back immediately on gesture release Jul 14, 2023
@liamdebeasi liamdebeasi added the package: core @ionic/core package label Jul 14, 2023
@liamdebeasi liamdebeasi changed the title bug: expandable option should not snap back immediately on gesture release feat: expandable option should not snap back immediately on gesture release Jul 14, 2023
@ionitron-bot ionitron-bot bot removed the triage label Jul 14, 2023
@liamdebeasi
Copy link
Contributor

Going to mark this as a feature since we likely need to expose a new method to do this properly.

@liamdebeasi liamdebeasi added the type: feature request a new feature, enhancement, or improvement label Jul 14, 2023
@liamdebeasi liamdebeasi removed their assignment Jul 14, 2023
@darrylnoakes
Copy link
Author

darrylnoakes commented Jul 14, 2023

Options can be expanded to take up the full width of the item...

Could this be clarified in the docs? It currently sounds very much like the full width of the ion-item-sliding, not of the ion-item-options.

liamdebeasi added a commit to ionic-team/ionic-docs that referenced this issue Jul 14, 2023
There was confusion on ionic-team/ionic-framework#27794 about which element is used as the reference for "full width". An expandable option will expand to cover the full width of the parent `ion-item` when swiped, so I made that clear in the docs.
@liamdebeasi
Copy link
Contributor

Options can be expanded to take up the full width of the item

This means that the option can take up the full width of the parent ion-item. I've clarified this in ionic-team/ionic-docs#3044.

@toxaq
Copy link

toxaq commented Mar 17, 2024

Would also be helpful if the ionSwipe event fired on the button that is expanded, not on the containing ion-item-options. It's not clear firstly where the event fires or what it is sending. None of the ion-item-option examples show any events at all.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: core @ionic/core package type: feature request a new feature, enhancement, or improvement
Projects
None yet
Development

No branches or pull requests

3 participants