Select with maxTagPlaceholder render content in tag instead of just render about ant-design HOT 17 OPEN

Start a new pull request in StackBlitz Codeflow.

• react-hkorld (Open reproduction)

from ant-design.

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

from ant-design.

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 将会被自动关闭。

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

from ant-design.

@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

 <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

from ant-design.

Still confused, the screenshot is broken.

from ant-design.

@afc163

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

from ant-design.

That is a intented behaviour, what is your expectation.

from ant-design.

@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

from ant-design.

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 ❌

from ant-design.

The same issue: #32072

from ant-design.

@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

from ant-design.

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

from ant-design.

Not yet

from ant-design.

@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....

from ant-design.

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.

from ant-design.

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

from ant-design.