From 7b15b87cf56bafdb70a234b4ff6135e016e2c75f Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Fri, 28 Dec 2018 19:46:31 +0100
Subject: [PATCH] FIX: better left/right positioning in select-kit components
 (#6824)

---
 .../select-kit/mixins/dom-helpers.js.es6      | 36 +++++++++++++------
 1 file changed, 25 insertions(+), 11 deletions(-)

diff --git a/app/assets/javascripts/select-kit/mixins/dom-helpers.js.es6 b/app/assets/javascripts/select-kit/mixins/dom-helpers.js.es6
index 7d2c2473c75..ccbdfc8a7ce 100644
--- a/app/assets/javascripts/select-kit/mixins/dom-helpers.js.es6
+++ b/app/assets/javascripts/select-kit/mixins/dom-helpers.js.es6
@@ -192,29 +192,43 @@ export default Ember.Mixin.create({
         : windowWidth;
       const bodyWidth = this._computedStyle(this.$body()[0], "width");
 
-      let marginToEdge;
+      let spaceToLeftEdge;
       if (this.$scrollableParent().length) {
-        marginToEdge =
+        spaceToLeftEdge =
           this.$().offset().left - this.$scrollableParent().offset().left;
       } else {
-        marginToEdge = this.get("element").getBoundingClientRect().left;
+        spaceToLeftEdge = this.get("element").getBoundingClientRect().left;
       }
 
-      const enoughMarginToOppositeEdge =
-        parentWidth - marginToEdge - bodyWidth + this.get("horizontalOffset") >
-        0;
-      if (enoughMarginToOppositeEdge) {
+      let isLeftAligned = true;
+      const spaceToRightEdge = parentWidth - spaceToLeftEdge;
+      const elementWidth = this.get("element").getBoundingClientRect().width;
+      if (spaceToRightEdge > spaceToLeftEdge + elementWidth) {
+        isLeftAligned = false;
+      }
+
+      if (isLeftAligned) {
         this.$()
           .addClass("is-left-aligned")
           .removeClass("is-right-aligned");
-        options.left = this.get("horizontalOffset");
-        options.right = "unset";
+
+        if (this._isRTL()) {
+          options.right = this.get("horizontalOffset");
+        } else {
+          options.left =
+            -bodyWidth + elementWidth - this.get("horizontalOffset");
+        }
       } else {
         this.$()
           .addClass("is-right-aligned")
           .removeClass("is-left-aligned");
-        options.left = "unset";
-        options.right = this.get("horizontalOffset");
+
+        if (this._isRTL()) {
+          options.right =
+            -bodyWidth + elementWidth - this.get("horizontalOffset");
+        } else {
+          options.left = this.get("horizontalOffset");
+        }
       }
     }