Ant-design: Select - add arrowRenderer prop

Created on 7 Dec 2017  ·  1Comment  ·  Source: ant-design/ant-design

What problem does this feature solve?

Congratulations on the launch of v3! I'm very excited to be able to use these components individually without the need for a global CSS import now :)

An issue I have run into by doing this with the Select component. Using the showSearch prop, it enables an arrow that either points up or down depending on whether the dropdown is currently active or not.

The Select component currently relies on having the antd icon-font included in your project to display this arrow, and in the case of using just the Select component rather than the entire antd library, I would prefer not to have to add ~250kb of fonts just to show this arrow.

I am also unable to hide the arrow without using a CSS display: none overwrite.

What does the proposed API look like?

The react-select library has an arrowRenderer prop, that is a function that allows me to provide a function that returns the arrow of my choice, or allows me to provide null to hide the arrow entirely, which is something that is not currently possible in the antd Select.

I believe this is a good solution that covers most use cases surrounding the arrow and would prevent the need to import the icon-font and make this component even more modular and self-contained.


Thanks again for the great library 😃

Inactive good first issue help wanted 💡 Feature Request

Most helpful comment

showArrow:boolean props can solve some of your problems

>All comments

showArrow:boolean props can solve some of your problems

Was this page helpful?
0 / 5 - 0 ratings

Related issues

tianyacsdn picture tianyacsdn  ·  3Comments

Orbyt picture Orbyt  ·  3Comments

mineralres picture mineralres  ·  3Comments

ericdai picture ericdai  ·  3Comments

taikongfeizhu picture taikongfeizhu  ·  3Comments