`preventScrollOnSwipe` does not work while focused on input
まだ誰も着手していません。
評価
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 初心者へのやさしさ
- 45/100
- issue の種類
- バグ
- 明瞭さ
- おおむね明確
- 活発さ
- 停滞
- 技術スタック
- react, typescript
- 領域
- frontend, mobile-dev
調査の方向性
useSwipeable の実装から始め、入力フィールドにフォーカスがあるときに preventScrollOnSwipe がどのように適用されるかを追跡します。iOS Safari 17.0 で提供されたケースを再現し、その後、フォーカスされた入力フィールド上でスワイプしてもページがスクロールしなくなり、既存のハンドラーの動作が維持されていることを確認します。
索引モデルが issue の本文から書いたものです。
説明
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:
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
refon this input - when the component mounts, focus the input:
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
- 主要言語
- TypeScript
- スター
- 2.1k
- フォーク
- 149
- PR マージ指標
- 30日以内にマージされた PR はありません
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
FormidableLabs/react-swipeable のほかの issue
-
難易度 3/5 1〜2日 初心者へのやさしさ 25/100
-
難易度 4/5 3〜5日 初心者へのやさしさ 30/100
-
難易度 3/5 1〜2日 初心者へのやさしさ 30/100
FormidableLabs/react-swipeable#332 · コメント 2 件 ·
-
難易度 5/5 1週間以上 初心者へのやさしさ 25/100
-
Svelte version オープン
難易度 5/5 1週間以上 初心者へのやさしさ 20/100
FormidableLabs/react-swipeable#326 · リアクション 3 件 ·
FormidableLabs/react-swipeable の issue をすべて見る
似ている issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 84/100
bcgov/bc-wallet-mobile#4761 · コメント 1 件 ·
-
external-issue to-triage
難易度 2/5 1〜3時間 初心者へのやさしさ 88/100
-
area-deployment area-integrations triage:bot-seen
難易度 2/5 半日 初心者へのやさしさ 86/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 82/100
-
refactor
難易度 2/5 1〜3時間 初心者へのやさしさ 84/100