Open WoodenPC opened 1 year ago
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!
@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
@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'
}
})
}}
/>
Yes, it works as expected, congrats for the solution!
@Rall3n Thank you for help. Is there a chance that that fix will be included in react-select code by default ?
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![image](https://github.com/JedWatson/react-select/assets/25397745/a5619811-5609-4f93-85df-cad00b06ce49)