Select-kit problem in RTL

nildarar · September 10, 2020, 5:39am

The list opened in Select-Kit is not displayed correctly in RTL.

Current layout:

+--------+
| target |
+-------------+
|             |
|   popper    |
|             |
+-------------+

Expected layout:

     +--------+
     | target |
+-------------+
|             |
|   popper    |
|             |
+-------------+

I checked the code and saw that the settings are only for LTR.

github.com

discourse/discourse/blob/52672b9eabccb1184d85dc7f08062d5a7c18cb73/app/assets/javascripts/select-kit/addon/components/select-kit.js#L272


  icon: null,
  icons: null,
  maximum: null,
  maximumLabel: null,
  minimum: null,
  minimumLabel: null,
  autoInsertNoneItem: true,
  clearOnClick: false,
  closeOnChange: true,
  limitMatches: null,
  placement: "bottom-start",
  placementStrategy: null,
  filterComponent: "select-kit/select-kit-filter",
  selectedNameComponent: "selected-name",
  castInteger: false,
  preventsClickPropagation: false,
  focusAfterOnChange: true,
  triggerOnChangeOnTab: true,
},

autoFilterable: computed("content.[]", "selectKit.filter", function () {

And used here:

github.com

discourse/discourse/blob/52672b9eabccb1184d85dc7f08062d5a7c18cb73/app/assets/javascripts/select-kit/addon/components/select-kit.js#L779


if (!placementStrategy) {
  placementStrategy = inModal ? "fixed" : "absolute";
}

const verticalOffset = this.multiSelect ? 0 : 3;

/* global Popper:true */
this.popper = Popper.createPopper(anchor, popper, {
  eventsEnabled: false,
  strategy: placementStrategy,
  placement: this.selectKit.options.placement,
  modifiers: [
    {
      name: "offset",
      options: {
        offset: [0, verticalOffset],
      },
    },
    {
      name: "applySmallScreenOffset",
      enabled: window.innerWidth <= 450,

I tried to solve the problem by adding some CSS codes, but unfortunately, this causes more problems. I think if we use placement: "bottom-end" when the page is RTL, the problem will be solved.

Also, this has caused the opened poppers to be displayed off-screen on some mobile phones. If you need, I can send you some screenshots of the problem in a pm.