React-select: Feature request: close icon on the right

Created on 17 Oct 2016 · 3Comments · Source: JedWatson/react-select

Hi,
you did an awesome job with this project, thx for sharing :)
Would it be possible to do a small change that would allow specifying token's close icon position via props (where one would be able to specify non-default value right for prop named something like closeIconPosition).
It would look like this (I just switched positions of renderRemoveIcon() and renderLabel() in Value.js and moved the icon's border from right to left):

I know it's possible to "override" token with my own component, but this seems like an overkill and I would guess others would find this useful, esp. given that earlier, jQuery UI plugins' versions of these tokens, AFAICR all had close icon on the right :)
Thanks for looking into this.

Source

mbonaci

👍5

Most helpful comment

This can be quickly achieved just using CSS.

    .Select-value-icon {
      border: 0;
      border-left: 1px solid #c2e0ff;
      float: right;
    }

kyleknighted on 19 Nov 2016

👍4

All 3 comments

+1, I think this is a much more common "layout". For example, I was just writing a blog post in WordPress today and noticed "x" for their tags input is to the right of the tag value.

otisg on 17 Oct 2016

This can be quickly achieved just using CSS.

    .Select-value-icon {
      border: 0;
      border-left: 1px solid #c2e0ff;
      float: right;
    }

kyleknighted on 19 Nov 2016

👍4

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues / pull requests.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our limited efforts to maintain the latest version.

If you feel this issue / pull request is still relevant and you'd like us to review it, please leave a comment and we'll do our best to get back to you.