callstack / callstack/react-native-paper

[Web] Menu anchor inside lists causes aggressive auto-scroll and focus hijacking on mount

未关闭
#4,907 3 条评论 1 个 reaction 已指派 0 人 在 GitHub 查看
bug
主要语言
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

把新 issue 发到你的邮箱

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