callstack / callstack/react-native-paper
🚀 Feature Request: Preserve Anchor Alignment in Upward-Opening `Menu` with Dynamic Content
- 主要语言
- TypeScript
- 星标
- 14.5k
- 派生
- 2.2k
- 平均合并
- 5 天 23 小时
- 30 天内合并 PR
- 12
描述
## Description
When using the `Menu` component from `react-native-paper` as a dropdown in an autocomplete-style UI, there is a UX inconsistency when the menu opens **upwards** from its anchor and its content is **dynamically filtered**.
Currently, when filtering the list while the menu is already open (e.g., user types to refine suggestions):
- The menu shrinks to fit the updated result set,
- But it does **not maintain a fixed position relative to its anchor**,
- Resulting in the menu shifting upward, giving the impression that it is disconnected from its triggering anchor.
This behavior is especially noticeable in autocomplete scenarios, where the menu’s height often changes as the user types.
---
## Proposed Behavior
It would be beneficial if the `Menu` component:
- Could maintain **visual alignment with its anchor**, even when the content height changes,
- Especially when opened **upward** due to limited space below the anchor,
- Adjusted its top boundary instead of bottom when opened upward, preserving anchor binding.
This feature would greatly enhance the usability of the `Menu` in dynamic UIs, such as autocomplete components or filterable lists.
---
## Suggested Enhancements
- Add a prop like `preserveAnchorAlignment` or `stickToAnchor` that keeps the menu visually connected to the anchor during dynamic content changes.
- Internally detect when the menu opens upward, and adjust only the top boundary to maintain anchor alignment when the height changes.
- Optionally expose a more flexible positioning strategy API for menus that change in size after mounting.
---
贡献指南
调研方向
未指定文件或测试。首先定位 Menu 组件的定位逻辑,并检查向上打开的菜单如何响应动态内容变化。完成的标准是:菜单在其筛选内容发生变化时仍与锚点保持视觉对齐,并且定位行为由适当的测试覆盖。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- react-native, typescript
- 领域
- frontend, mobile
- Issue 类型
- 功能
- 难度
- 5/5
- 预计耗时
- 一周以上
- 活跃度
- 停滞
- 描述清晰度
- 需要澄清
- 新手友好度
- 35/100