For not Searchable small width select where is problem with value and items when isRtl = true

[WoodenPC]

Hi, in rtl direction items and value inside select displayed incorrectly when isSearchable= false

How to reproduce: go to https://codesandbox.io/s/react-select-v5-sandbox-forked-slmmsj?file=/example.js select some item in sandbox

[Gi0vi04]

Maybe you just need to add the style prop with textAling: "left".

For me work like this:

<Select
      className="basic-single"
      classNamePrefix="select"
      name="color"
      options={colourOptions}
      isSearchable={false}
      isRtl
      styles={{
        control: (baseStyles, state) => ({
          ...baseStyles,
          textAlign: "left"
        })
      }}
    />

Let me know if that works!

[WoodenPC]

@Gi0vi04 Hi, i tried your solution ![image](https://github.com/JedWatson/react-select/assets/25397745/2676d8ba-ccf9-4045-ae84-26b37af4502 we still have a problem with overflow in that case. Also try to make some of labels longer and you will see that current value displayer incorrectly

[Rall3n]

@WoodenPC @Gi0vi04 The problem stems from our styling in regards to the isSearchable prop.

The input is visually hidden if isSearchable has the value false. Included in the style definition for the visually hidden input is the property left: -100px. This somehow causes the grid layout to shift in rtl mode. Changing this specific property should be enough to fix the issue.

<Select
  {...}
  styles={{
    // input does not exist when `isSearchable={false}`
    valueContainer: (baseStyles, state) => ({
      ...baseStyles,
      '& input': {
        left: 'unset'
      }
    })
  }}
/>

[Gi0vi04]

Yes, it works as expected, congrats for the solution!

[WoodenPC]

@Rall3n Thank you for help. Is there a chance that that fix will be included in react-select code by default ?