FormidableLabs / FormidableLabs/react-swipeable

`preventScrollOnSwipe` does not work while focused on input

オープン
#335 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
主要言語
TypeScript
スター
2.1k
フォーク
149
PR マージ指標
30日以内にマージされた PR はありません

説明

**Describe the bug**
When an input field is focused on ios Safari, preventScroll flag does not work as intended, IE, the page still scrolls.

**Steps or Sandbox to reproduce**
This has to be reproduced inside an ios simulator like xCode or on your mobile device directly
- Wrap a div with scroll handlers:
```js
const handlers = useSwipeable({
onSwiping: ({ deltaY }) => {
if (deltaY > 100) {
document.getElementById('AddModal').close();
}
},
delta: { left: 100, right: 100, down: 100 },
preventScrollOnSwipe: true,
});
```
- Place an input inside of this container
- Place a `ref` on this input
- when the component mounts, focus the input:
```js
useEffect(() => {
inputRef.current.focus();
}, []);
```
-While focused on the input, attempt to scroll down
- observe the bug: the page will scroll when it shouldnt. You can verify this by removing focus from the input and then attempting to swipe again, and it will trigger the handler and prevent scrolling

**Expected behavior**
It should prevent scrolling behavior if I swipe while focused on an input

** Device/Browser **
Safari iOS 17.0

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

useSwipeable の実装から始め、入力フィールドにフォーカスがあるときに preventScrollOnSwipe がどのように適用されるかを追跡します。iOS Safari 17.0 で提供されたケースを再現し、その後、フォーカスされた入力フィールド上でスワイプしてもページがスクロールしなくなり、既存のハンドラーの動作が維持されていることを確認します。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
react, typescript
領域
frontend, mobile-dev
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
45/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。