callstack / callstack/react-native-paper
[Web] Menu anchor inside lists causes aggressive auto-scroll and focus hijacking on mount
- 主要语言
- TypeScript
- 星标
- 14.5k
- 派生
- 2.2k
- 平均合并
- 5 天 23 小时
- 30 天内合并 PR
- 12
描述
### Current behaviour
When wrapping list items (inside FlatList, Shopify FlashList or ScrollView) with the Menu component as an anchor, the component aggressively steals DOM focus upon mounting on the Web platform. In asynchronous lists, this causes the browser to forcefully auto-scroll down to the newly rendered items and displays the native blue focus ring.
### Expected behaviour
The Menu anchor should remain entirely passive upon mounting and should not steal DOM focus unless explicitly interacted with by the user. The list's scroll position should remain completely stable.
### How to reproduce?
https://snack.expo.dev/@szado/smiling-yellow-cookie?platform=web
### Preview
https://github.com/user-attachments/assets/02567f5b-15a0-44a4-a633-af85836a2e41
### Your Environment
| software | version
| --------------------- | -------
| react-native | 0.83.6
| react-native-paper | 5.15.1
| expo sdk | 55
贡献指南
调研方向
从 Menu 组件挂载在 FlatList、Shopify FlashList 或 ScrollView 内部时的 Web 锚点行为入手,使用链接的 Expo Snack 复现进行研究。追踪挂载为何会抢占 DOM 焦点,然后验证锚点保持被动、不显示原生焦点环,并且在用户明确交互之前保持列表滚动位置稳定。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- react-native, typescript
- 领域
- frontend
- Issue 类型
- 缺陷
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 活跃度
- 活跃
- 描述清晰度
- 基本清楚
- 新手友好度
- 55/100