support Direction: RTL

[ronzeidman]

Version(if relevant): 5.1.2

Environment(if relevant): All

Code(if relevant):

html { direction: rtl; }

Expected:

Everything to work about the same

Actual:

There is a side-scroller that in the end shows the drop-down always open.

You can test it with your examples (happens in all - angular, vue, react) just inspect and change the html direction to rtl

[plantain-00]

I'm not sure what is correct when direction is rtl, but I'm willing to take PR about this.

[ronzeidman]

Currently using the following workaround (doesn't support material css):

.direction-rtl {
    direction: rtl;
    .select2-container {
        .select2-selection--single {
            .select2-selection__rendered {
                padding-right: 8px;
                padding-left: 20px;
            }
        }
        .select2-selection--multiple {
            .select2-selection__rendered {
                padding-left: 0;
                padding-right: 8px;
            }
        }
        .select2-search--inline {
            float: right;
        }
    }
    .select2-dropdown {
        left: unset;
        right: -100000px;
    }
    .select2-container--open .select2-dropdown {
        left: unset;
        right: 0;
    }
    .select2-close-mask {
        left: unset;
        right: 0;
    }
    .select2-container--default {
        .select2-selection--single {
            .select2-selection__clear {
                float: left;
            }
            .select2-selection__arrow {
                right: unset;
                left: 1px;
                b {
                    margin-left: 0;
                    margin-right: -4px;
                }
            }
        }
        &.select2-container--open {
            .select2-selection--single {
                .select2-selection__arrow {
                    b {
                        border-width: 0 0 5px 4px;
                    }
                }
            }
        }
        .select2-selection--multiple {
            .select2-selection__rendered {
                padding: 0 0 0 5px;
            }
            .select2-selection__placeholder {
                float: right;
            }
            .select2-selection__clear {
                float: left;
                margin-right: 0;
                margin-left: 10px;
            }
            .select2-selection__choice {
                float: right;
                margin-right: 0;
                margin-left: 5px;
            }
        }
        .select2-results__option {
            .select2-results__option {
                padding-left: 0;
                padding-right: 1em;
                .select2-results__group {
                    padding-right: 0;
                }
                .select2-results__option {
                    margin-left: 0;
                    padding-left: 0;
                    margin-right: -1em;
                    padding-right: 2em;
                    .select2-results__option {
                        margin-left: 0;
                        padding-left: 0;
                        margin-right: -2em;
                        padding-right: 3em;
                        .select2-results__option {
                            margin-left: 0;
                            padding-left: 0;
                            margin-right: -3em;
                            padding-right: 4em;
                            .select2-results__option {
                                margin-left: 0;
                                padding-left: 0;
                                margin-right: -4em;
                                padding-right: 5em;
                                .select2-results__option {
                                    margin-left: 0;
                                    padding-left: 0;
                                    margin-right: -5em;
                                    padding-right: 6em;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}