callstack / callstack/react-native-paper

🚀 Feature Request: Preserve Anchor Alignment in Upward-Opening `Menu` with Dynamic Content

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

把新 issue 发到你的邮箱

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