feat: add getPopupOffset prop for dynamic dropdown positioning

[Moses-main]

This PR adds a new getPopupOffset prop to enable dynamic dropdown positioning, which is needed for proper cursor position tracking in multi-line textareas.

Problem

When using AutoComplete with a multi-line TextArea, the dropdown stays at the top-left corner instead of following the cursor to the current line.

Solution

Add getPopupOffset prop that receives the input element and returns a [x, y] offset array for positioning the dropdown relative to the cursor.

Changes

• BaseSelect/index.tsx: Add getPopupOffset prop to interface and pass to SelectTrigger
• SelectTrigger.tsx: Implement dynamic offset calculation in builtinPlacements

Usage

const getPopupOffset = (inputElement: HTMLElement) => {
  if (inputElement instanceof HTMLTextAreaElement) {
    const lineHeight = 20;
    const currentLine = inputElement.value.substring(0, inputElement.selectionStart).split('\n').length - 1;
    return [0, currentLine * lineHeight + 4];
  }
  return null;
};

<Select getPopupOffset={getPopupOffset} />

Related Issue

• Autocomplete dropdown not moving to next line when there is a textarea with multiple lines ant-design/ant-design#52000

Summary by CodeRabbit

新功能

• 为下拉菜单新增自定义弹出位置偏移功能，支持根据输入元素动态调整弹窗位置，提供更灵活的布局控制。

[vercel]

Someone is attempting to deploy a commit to the React Component Team on Vercel.

A member of the Team first needs to authorize it.

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request enhances the BaseSelect component by providing a mechanism for dynamic dropdown positioning. The primary goal is to resolve an issue where dropdowns in multi-line textareas do not follow the cursor, improving the user experience for components like AutoComplete. This is achieved through a new prop that allows consumers to define custom offset logic.

Highlights

• New getPopupOffset prop: Introduced a new getPopupOffset prop to BaseSelectProps and SelectTriggerProps to allow for dynamic positioning of dropdowns.
• Dynamic dropdown positioning: Implemented logic within SelectTrigger.tsx to utilize the getPopupOffset callback for calculating dynamic popup offsets, addressing issues with dropdowns in multi-line textareas.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog

• src/BaseSelect/index.tsx
  • Added getPopupOffset property to the BaseSelectProps interface with JSDoc comments.
  • Destructured getPopupOffset from component props.
  • Passed getPopupOffset to the SelectTrigger component.
• src/SelectTrigger.tsx
  • Added getPopupOffset property to the SelectTriggerProps interface with JSDoc comments.
  • Destructured getPopupOffset from component props.
  • Modified the mergedBuiltinPlacements memoization to incorporate dynamic offset calculation using the getPopupOffset callback, allowing custom offsets to override default placement offsets.

Activity

• No activity has been recorded on this pull request yet.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between fe73bbf and 80721ff.

📒 Files selected for processing (2)

• src/BaseSelect/index.tsx
• src/SelectTrigger.tsx

---

总体概述

向 BaseSelectProps 和 SelectTriggerProps 添加了新的可选属性 getPopupOffset，用于根据输入元素动态计算弹出框偏移量。该属性在 SelectTrigger 中被集成到 mergedBuiltinPlacements 逻辑中，支持动态位置调整。

变更内容

组件 / 文件	更改摘要
弹出框偏移配置 src/BaseSelect/index.tsx, src/SelectTrigger.tsx	添加 getPopupOffset 属性以支持动态弹出框偏移计算；在 SelectTrigger 中，该属性被应用于 mergedBuiltinPlacements 的每个位置，允许根据输入元素动态计算或使用默认偏移。

预估代码审查工作量

🎯 3 (中等) | ⏱️ ~20 分钟

推荐审阅者

• zombieJ

诗歌

🐰 弹窗舞动新招数，

动态偏移显妙处，

输入元素说位置，

灵活定位无烦恼，

萌兔欢庆新功能！✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR标题准确地概括了主要变更，即引入新的getPopupOffset属性以实现动态下拉菜单定位，与raw_summary中的两个文件变更内容完全相符。
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[gemini-code-assist]

Code Review

This pull request introduces a new getPopupOffset prop to enable dynamic positioning of the dropdown, addressing issues with multi-line textareas by correctly propagating the prop from BaseSelect to SelectTrigger and implementing the offset logic within builtinPlacements. A security review found no vulnerabilities.

[gemini-code-assist]

The offset property in AlignType is optional. If placement.offset is undefined (e.g., if a custom builtinPlacements prop is provided without an offset for a specific placement), then placement.offset as [number, number] would return undefined. This could lead to unexpected behavior or runtime errors in the underlying Trigger component, which likely expects a [number, number] tuple if an offset is provided. Consider using the nullish coalescing operator (??) to provide a default offset like [0, 0] if placement.offset is undefined.

Suggested change

	return placement.offset as [number, number];
	return placement.offset ?? [0, 0];

[yoyo837]

Add some test case please.