React-select: Call stack size exceeded with centered text

[JedWatson]

If you have a select input (not multi-select) and horizontally center the value, typing into the search field causes an infinite loop leading to a "Call stack size exceeded" error.

It would definitely be nice to support centering text in single-select mode, so this should be looked into. I suspect the issue is related to the input-autosize; maybe it's worth adding a prop that disabled use of that component if you don't need it.

[giladgray]

:+1: any insight into why this happens? It's definitely related to the input-autosize, I'm seeing the same thing in my own autosized input (not using your library). I suspect it's something related to browser repainting?

[brunogenaro]

Still having this error here... anyone?

[tyson-kubota]

I also ran into this.

One workaround I've found is to add custom style overrides to specify text-align on a per-element basis for the children of Select, instead of on the Select component itself:

.Select-placeholder,
.Select--single > .Select-control .Select-value
  text-align: center

.Select-option
  text-align: center

[manavsehgal]

Still seeing this error with centered text.
flattenChildren.js?0d06:28 Uncaught RangeError: Maximum call stack size exceeded

[giladgray]

for the record, there are several other centering strategies that work fine:

• margin: auto
• flex box justify-content: center

[nandukalidindi]

After copying react-select.css from node_modules into my local styles folder. I applied the above diff to prevent the error.

[jossmac]

Version 1 of react-select is no longer supported.

In the best interest of the community we've decided to spend the time we have available on the latest version.

We apologise for any inconvenience.

Please see:

1. v1 to v2 upgrade guide
2. v1 documentation and examples