Skip to content

fix: 修复任务选项下拉菜单被裁切的问题 - #356

Merged
MistEO merged 1 commit into
MistEO:mainfrom
1204244136:codex/fix-option-dropdown-clipping
Sep 22, 2026
Merged

MistEO merged 1 commit into
MistEO:mainfrom
1204244136:codex/fix-option-dropdown-clipping

Conversation

@1204244136

@1204244136 1204244136 commented Sep 21, 2026 •

Copy link
Copy Markdown
Contributor

任务选项下拉菜单超出任务卡片边界时,会被父容器的 overflow 裁切,导致部分选项无法显示。将普通下拉菜单和搜索下拉菜单通过 Portal 渲染到 document.body,使用固定定位,并根据视口空间调整方向、宽度和可滚动高度。

  • 滚动祖先任务面板时关闭菜单,菜单内部滚动保持展开。
  • Tab / Shift+Tab 关闭菜单时将焦点接回触发按钮,保持原控件导航顺序。
  • 搜索初始化仅在打开菜单时执行,避免父组件重渲染清空输入。

验证:

  • pnpm build 通过。
  • pnpm test 通过(现有 6 项测试)。
  • pnpm tauri build --no-bundle Windows release 构建通过。
  • 构建产物替换至下游 MDA,用户实测通过。
  • git diff --check 通过。

Sourcery 总结

将任务选项下拉菜单改为基于 Portal 的视口自适应浮层,避免菜单被容器裁切并保持稳定的交互行为。

Bug 修复:

  • 修复任务选项下拉菜单被父容器裁切,确保普通下拉菜单和搜索下拉菜单在任务卡片边界外仍可完整显示。

功能改进:

  • 改进下拉菜单的视口自适应定位,包括上下翻转、水平避让、宽度调整和可滚动高度限制。
  • 改进菜单关闭和键盘导航行为,在祖先容器滚动、Tab 导航或 Escape 操作后正确恢复焦点。
  • 调整搜索下拉菜单的初始化时机,避免父组件重渲染时清空用户输入。
Original summary in English

Summary by Sourcery

将任务选项下拉菜单改为基于 Portal 的视口自适应浮层,避免菜单被容器裁切并保持稳定的交互行为。

Bug Fixes:

  • 修复任务选项下拉菜单被父容器裁切,确保普通下拉菜单和搜索下拉菜单在任务卡片边界外仍可完整显示。

Enhancements:

  • 改进下拉菜单的视口自适应定位,包括上下翻转、水平避让、宽度调整和可滚动高度限制。
  • 改进菜单关闭和键盘导航行为,在祖先容器滚动、Tab 导航或 Escape 操作后正确恢复焦点。
  • 调整搜索下拉菜单的初始化时机,避免父组件重渲染时清空用户输入。

@sourcery-ai sourcery-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

你好——我发现了 1 个问题

AI 代理提示词
请处理此次代码审查中的评论:

## 单独评论

### 评论 1
<location path="src/components/OptionEditor.tsx" line_range="1089-1092" />
<code_context>
   };

   const handleListboxKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === 'Tab') {
+      // 在默认 Tab 导航前回到原 DOM 位置,兼容 Shift+Tab。
+      closeAndFocusTrigger();
+      return;
+    }
+    if (options.length === 0) return;
</code_context>
<issue_to_address>
**问题 (bug_risk):** Tab 和 Shift+Tab 处理程序会将焦点移至触发器,但不会调用 preventDefault,因此浏览器的默认 Tab 导航随后仍会执行,并将焦点移至下一个或上一个可聚焦元素,而不是让焦点停留在触发器上。

**触发条件:** 任一下拉菜单打开时按下 Tab 或 Shift+Tab。

**建议修复:** 在关闭下拉菜单并将焦点移至触发器之前调用 `event.preventDefault()`,或者明确实现预期的下一个/上一个焦点转换。
</issue_to_address>

Sourcery 对开源项目免费——如果您喜欢我们的审查,请考虑分享它们 ✨
Original comment in English

Hey - I've found 1 issue

Prompt for AI Agents
Please address the comments from this code review:

## Individual Comments

### Comment 1
<location path="src/components/OptionEditor.tsx" line_range="1089-1092" />
<code_context>
   };

   const handleListboxKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === 'Tab') {
+      // 在默认 Tab 导航前回到原 DOM 位置,兼容 Shift+Tab。
+      closeAndFocusTrigger();
+      return;
+    }
+    if (options.length === 0) return;
</code_context>
<issue_to_address>
**issue (bug_risk):** The Tab and Shift+Tab handlers focus the trigger but do not call preventDefault, so the browser's default Tab navigation runs afterward and moves focus to the next or previous focusable element instead of leaving focus on the trigger.

**Triggers:** When Tab or Shift+Tab is pressed while either dropdown is open.

**Suggested fix:** Call `event.preventDefault()` before closing and focusing the trigger, or explicitly implement the intended next/previous focus transition.
</issue_to_address>

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

Comment thread src/components/OptionEditor.tsx
@MistEO

MistEO commented Sep 21, 2026

Copy link
Copy Markdown
Owner

来个图瞅瞅?

@1204244136

Copy link
Copy Markdown
Contributor Author

改前vs改后
image
image

@HarcoChen

Copy link
Copy Markdown
Contributor

来了来了
MaaEnd/MaaEnd#5923

@MistEO
MistEO merged commit a7fdd0b into MistEO:main Sep 22, 2026
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants