From af63871d4d2d8cc864510350b7e46f2fcaeff15c Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Thu, 6 Aug 2020 14:52:17 -0400
Subject: [PATCH] FIX: Missing bottom border in select-kit color list settings

---
 .../select-kit/addon/components/selected-color.js         | 8 +++++---
 app/assets/stylesheets/common/select-kit/select-kit.scss  | 1 +
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/select-kit/addon/components/selected-color.js b/app/assets/javascripts/select-kit/addon/components/selected-color.js
index 48e03ed820..e0282b64b5 100644
--- a/app/assets/javascripts/select-kit/addon/components/selected-color.js
+++ b/app/assets/javascripts/select-kit/addon/components/selected-color.js
@@ -5,12 +5,14 @@ import { schedule } from "@ember/runloop";
 export default SelectedNameComponent.extend({
   classNames: ["select-kit-selected-color"],
 
-  didReceiveAttrs() {
+  didInsertElement() {
     this._super(...arguments);
 
     schedule("afterRender", () => {
-      const color = escapeExpression(this.name);
-      this.element.style.borderBottomColor = `#${color}`;
+      const color = escapeExpression(this.name),
+        el = document.querySelector(`[data-value="${color}"]`);
+
+      if (el) el.style.borderBottomColor = `#${color}`;
     });
   }
 });
diff --git a/app/assets/stylesheets/common/select-kit/select-kit.scss b/app/assets/stylesheets/common/select-kit/select-kit.scss
index dde65b3856..4132072d2f 100644
--- a/app/assets/stylesheets/common/select-kit/select-kit.scss
+++ b/app/assets/stylesheets/common/select-kit/select-kit.scss
@@ -71,6 +71,7 @@
       color: inherit;
       display: flex;
       outline: none;
+      border-bottom: 2px solid transparent;
 
       .d-icon + .name {
         margin-left: 0.5em;