select2 arrow with RTL direction [BUG]

[maaaom]

Describe the bug

When I have select2 with adminLTE-RTL the arrow of dropdown overlapping the text in dropdown list.

Steps To Reproduce

Steps to reproduce the behavior:

<div class="form-group">
                                    <label class="font-weight-bolder">{{__('App.sort_by')}}</label>
                                    <x-adminlte-select2 name="sort">
                                        <option>{{__('App.ASC')}}</option>
                                        <option>{{__('App.DESC')}}</option>
                                    </x-adminlte-select2>
                                </div>

Expected behavior

the arrow should be in deferent side of the box.

Screenshots

[dfsmania]

@maaaom Have you tried the dir config option of the select2 plugin?

Update:

I just did some research and verified that in this package the select2 component uses the select2-bootstrap4-theme and it has a known issue with RTL.

Also, by default this package is not prepared for RTL, so I'm not sure what is the adminLTE-RTL you mentioned initially. Can you explain how did you integrated some RTL version with this package?

However, you may also try the basic select for this:

<x-adminlte-select name="sort" dir="rtl">
    <option>{{__('App.ASC')}}</option>
    <option>{{__('App.DESC')}}</option>
</x-adminlte-select>

[dfsmania]

Closed, no feedback!