ionic-team / ionic-team/ionic-framework

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

未关闭
#27,794 5 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
package: core type: feature request
主要语言
TypeScript
星标
52.7k
派生
13.3k
平均合并
1 天 15 小时
30 天内合并 PR
51

描述

### Prerequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### Ionic Framework Version

v6.x

### Current Behavior

[The docs for `ion-item-sliding`](https://ionicframework.com/docs/api/item-sliding#expandable-options) 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](https://ionicframework.com/docs/api/item-options) to call a method when the item is fully swiped.

The [`ion-item-options`](https://ionicframework.com/docs/api/item-options#events) 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](https://ionicframework.com/docs/api/item-option#expandable) 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](https://ionicframework.com/docs/api/item-sliding#expandable-options)
1. Optional: attach an `ionSwipe` listener to the `ion-item-options` and log calls.
1. 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:

- [#13413 - Unable to animate full swipe on ion-item-sliding](https://github.com/ionic-team/ionic-framework/issues/13413)
- [#15304 - ion-item-option will not expand in Ionic 4.0.0-beta.3](https://github.com/ionic-team/ionic-framework/issues/15304)
- [#15427 - Sliding Items: ionSwipe & exapandable not working properly](https://github.com/ionic-team/ionic-framework/issues/15427)

Video of reproduction:

https://github.com/ionic-team/ionic-framework/assets/67335139/7b458b4e-b5e8-4e2c-b9a4-28304fa1f904

贡献指南

打开贡献指南

调研方向

Start with the ion-item-sliding expandable-options documentation and the ion-item-options ionSwipe event documentation, then reproduce the behavior using the linked example and video. Done means an expandable option remains expanded after the extra swipe is released and ionSwipe fires only once the item is fully expanded.

由索引模型根据 Issue 内容生成。

评估

技术栈
typescript
领域
frontend
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
35/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。