From bff6039dca6b14e94655edba6e3402f89f36abd9 Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Wed, 16 Jan 2019 16:28:13 -0800
Subject: [PATCH] Always left-align the dropdown position to the trigger

---
 ui/app/components/multi-select-dropdown.js    | 21 ++++++++++++++++---
 .../components/multi-select-dropdown.hbs      |  6 +++++-
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/ui/app/components/multi-select-dropdown.js b/ui/app/components/multi-select-dropdown.js
index a995ac195..8fd4a7988 100644
--- a/ui/app/components/multi-select-dropdown.js
+++ b/ui/app/components/multi-select-dropdown.js
@@ -1,5 +1,6 @@
 import Component from '@ember/component';
 import { computed } from '@ember/object';
+import { run } from '@ember/runloop';
 
 const TAB = 9;
 const ESC = 27;
@@ -18,6 +19,22 @@ export default Component.extend({
   isOpen: false,
   dropdown: null,
 
+  capture(dropdown) {
+    // It's not a good idea to grab a dropdown reference like this, but it's necessary
+    // in order to invoke dropdown.actions.close in traverseList as well as
+    // dropdown.actions.reposition when the label or selection length changes.
+    this.set('dropdown', dropdown);
+  },
+
+  didReceiveAttrs() {
+    const dropdown = this.get('dropdown');
+    if (this.get('isOpen') && dropdown) {
+      run.scheduleOnce('afterRender', () => {
+        dropdown.actions.reposition();
+      });
+    }
+  },
+
   actions: {
     toggle({ key }) {
       const newSelection = this.get('selection').slice();
@@ -30,9 +47,7 @@ export default Component.extend({
     },
 
     openOnArrowDown(dropdown, e) {
-      // It's not a good idea to grab a dropdown reference like this, but it's necessary
-      // in order to invoke dropdown.actions.close in traverseList
-      this.set('dropdown', dropdown);
+      this.capture(dropdown);
 
       if (!this.get('isOpen') && e.keyCode === ARROW_DOWN) {
         dropdown.actions.open(e);
diff --git a/ui/app/templates/components/multi-select-dropdown.hbs b/ui/app/templates/components/multi-select-dropdown.hbs
index 07fa759dd..7179d5bfa 100644
--- a/ui/app/templates/components/multi-select-dropdown.hbs
+++ b/ui/app/templates/components/multi-select-dropdown.hbs
@@ -1,5 +1,9 @@
 {{#basic-dropdown
-  onOpen=(action (mut isOpen) true)
+  horizontalPosition="left"
+  onOpen=(action (queue
+    (action (mut isOpen) true)
+    (action capture)
+  ))
   onClose=(action (mut isOpen) false)
   as |dd|}}
   {{#dd.trigger data-test-dropdown-trigger class="dropdown-trigger" onKeyDown=(action "openOnArrowDown")}}