Select with maxTagPlaceholder render content in tag instead of just render

[orelHAnyvision]

Reproduction link

Steps to reproduce

use Select component with maxTagPlaceholder prop and render something

What is expected?

whatever you render will render and override the default behavior

What is actually happening?

whatever you render is rendered inside a built in tag without option to override it

Environment	Info
antd	5.16.2
React	18
System	macOS Sonoma 14.3.1
Browser	Chrome

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• react-hkorld (Open reproduction)

[afc163]

I don't really get the problem. What is the different between expected behaviors and reality?

[github-actions]

Hello @orelHAnyvision. Please provide a online reproduction by forking codesandbox of [email protected] or [email protected], or provide a minimal GitHub repository. Issues labeled by Need Reproduce will be closed if no activities in 3 days.

你好 @orelHAnyvision，我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击这里创建一个 [email protected] 或 [email protected] 的 codesandbox，或者提供一个最小化的 GitHub 仓库。3 天内未跟进此 issue 将会被自动关闭。

什么是最小化重现，为什么这是必需的？

[orelHAnyvision]

@afc163
Sorry maybe I didn't describe it well enough.
I would expect this code to render the tags and when it reach to max it will render just

test

 <Select
        {...sharedProps}
        {...selectProps}
        maxTagPlaceholder={(omittedValues) => <div>test</div>}
      />

what happens is that <div>test</div> is rendered inside a Tag which I didn't define and I can't control

[afc163]

Still confused, the screenshot is broken.

[orelHAnyvision]

@afc163

you can see that what I use for maxTagPlaceholder is just <div>test</div> and its rendered inside a tag

[afc163]

That is a intented behaviour, what is your expectation.

[orelHAnyvision]

@afc163
My expectation would be to display what we render in maxTagPlaceholder without wrapping it with something.
The problem with the current behavior is that if I want to modify the tagRender prop and render a tag with a preferred color and I want the design to be consistent I'm not able to do it with the current implementation.

<Select
...
 tagRender={(props) => (
        <Tag color='red' style={{ fontSize: 12 }} bordered={false} {...props}>
          {props.label}
        </Tag>
      )}
 maxTagPlaceholder={(omittedValues) => <div>more</div>}

there is no way for me to set the 'more' with color='red', bordered={false} and so

[afc163]

So the real problem is that tagRender is not working on the max tag in https://stackblitz.com/edit/react-hkorld-vqpmy6?file=demo.tsx , right?

Expected ✅	Now ❌

[afc163]

The same issue: #32072

[orelHAnyvision]

@afc163
well, yes and no.
Same issue for this specific case when we want it to be just like the tagRender.
Not same because I could say that I want to render other element which is not related to the tagRender prop

[orelHAnyvision]

@afc163
btw, I didn't see any solution for it here #32072 ?

[afc163]

Not yet

[orelHAnyvision]

@afc163
I believe that quicker solution would be just render what we use.
maxTagPlaceholder={(omittedValues) => <div>more</div>}
will just render <div>more</div>. I guess its just condition in the source code to check whether maxTagPlaceholder provided to just render whats inside it without any wrapper.
This issue it from 2021....

[afc163]

I believe that quicker solution would be just render what we use.

We can't simply change this, it would be a break change for existed usage.

[orelHAnyvision]

@afc163
maybe we could add it with another prop(boolean) to verify it

[afc163]

After react-component/select#1044 and #48798 , tagRender will work on max tag. You can tell selected item and max tag with isMaxTag in tagRender: https://github.com/react-component/select/pull/1044/files#diff-df9117fd81d702ef2b519d89ae1f9304a648fa6bf1f06701b86a2ea6c31bda73R133