ant-design/ant-design

Tag suggestion renderer in Select component with mode="tags"

Open

#51600 opened on Nov 13, 2024

View on GitHub
 (5 comments) (0 reactions) (0 assignees)TypeScript (98,031 stars) (54,612 forks)batch import
Inactivehelp wanted

Description

What problem does this feature solve?

It can be difficult for the user to understand that the suggested value in the dropdown that will turn in to a tag when selected is not a pre-populated value but rather is based on what they typed. While developers have the ability to customize Options, we could use the ability to customize that one Option specifically to help distinguish it.

What does the proposed API look like?

I would like to propose a new prop on the Select component tagOptionRender which would essentially be the same as optionRender (same interface) but specifically for that new tag option.

For example, this would allow the developer to be able to convert something like "new tag" into "Create new tag..." using: tagOptionRender={(value: string)=>`Create ${value}...`}

Contributor guide

Tech stack
typescriptreactcss
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
React basicsant design Select component usage
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
Examine the existing Select component's implementation, particularly the option rendering logic in the source code (likely in components/select). Review the current `optionRender` prop and how options are displayed. Consider adding a new prop `tagOptionRender` that passes the input value. The API should be consistent with existing rendering patterns. Look for any related comments or discussion in the issue for additional context.