From 671af2690e82be8cf7f7c52e4557f442b2a8a8e8 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Fri, 20 Oct 2017 07:01:04 -0700
Subject: [PATCH] [FIX] Improves select positioning with direction=rtl in a
 modal

---
 .../components/select-box-kit.js.es6          | 41 ++++++++++---------
 1 file changed, 21 insertions(+), 20 deletions(-)

diff --git a/app/assets/javascripts/select-box-kit/components/select-box-kit.js.es6 b/app/assets/javascripts/select-box-kit/components/select-box-kit.js.es6
index e353c7ccee3..9f3c1ebaf89 100644
--- a/app/assets/javascripts/select-box-kit/components/select-box-kit.js.es6
+++ b/app/assets/javascripts/select-box-kit/components/select-box-kit.js.es6
@@ -407,35 +407,35 @@ export default Ember.Component.extend(UtilsMixin, DomHelpersMixin, KeyboardMixin
     const width = this.$().outerWidth(false);
     const height = this.$header().outerHeight(false);
 
-    if (this.get("scrollableParent").length === 0) {
-      return;
-    }
+    if (this.get("scrollableParent").length === 0) { return; }
 
     const $placeholder = $(`<div class='select-box-kit-fixed-placeholder-${this.elementId}'></div>`);
 
     this._previousScrollParentOverflow = this.get("scrollableParent").css("overflow");
+    this.get("scrollableParent").css({ overflow: "hidden" });
+
     this._previousCSSContext = {
       minWidth: this.$().css("min-width"),
       maxWidth: this.$().css("max-width")
     };
-    this.get("scrollableParent").css({ overflow: "hidden" });
 
-    this.$()
-      .before($placeholder.css({
-        display: "inline-block",
-        width,
-        height,
-        "vertical-align": "middle"
-      }))
-      .css({
-        direction: $("html").css("direction"),
-        position: "fixed",
-        "margin-top": -this.get("scrollableParent").scrollTop(),
-        "margin-left": -width,
-        width,
-        minWidth: "unset",
-        maxWidth: "unset"
-      });
+    const componentStyles = {
+      position: "fixed",
+      "margin-top": -this.get("scrollableParent").scrollTop(),
+      width,
+      minWidth: "unset",
+      maxWidth: "unset"
+    };
+
+    if ($("html").css("direction") === "rtl") {
+      componentStyles.marginRight = -width;
+    } else {
+      componentStyles.marginLeft = -width;
+    }
+
+    $placeholder.css({ display: "inline-block", width, height, "vertical-align": "middle" });
+
+    this.$().before($placeholder).css(componentStyles);
   },
 
   _removeFixedPosition() {
@@ -451,6 +451,7 @@ export default Ember.Component.extend(UtilsMixin, DomHelpersMixin, KeyboardMixin
         top: "auto",
         left: "auto",
         "margin-left": "auto",
+        "margin-right": "auto",
         "margin-top": "auto",
         position: "relative"
       }