diff --git a/app/assets/javascripts/select-kit/components/select-kit.js b/app/assets/javascripts/select-kit/components/select-kit.js index e0307c2c5df..175559c333b 100644 --- a/app/assets/javascripts/select-kit/components/select-kit.js +++ b/app/assets/javascripts/select-kit/components/select-kit.js @@ -832,6 +832,8 @@ export default Component.extend( placementStrategy = inModal ? "fixed" : "absolute"; } + const verticalOffset = this.multiSelect ? 0 : 2; + /* global Popper:true */ this.popper = Popper.createPopper(anchor, popper, { eventsEnabled: false, @@ -841,7 +843,7 @@ export default Component.extend( { name: "offset", options: { - offset: [0, 2] + offset: [0, verticalOffset] } }, { @@ -853,7 +855,7 @@ export default Component.extend( ".select-kit-wrapper" ); if (wrapper) { - let height = this.element.offsetHeight; + let height = this.element.offsetHeight + verticalOffset; const body = this.element.querySelector(".select-kit-body"); if (body) { @@ -873,7 +875,8 @@ export default Component.extend( this.element.classList.add("is-under"); } - wrapper.style.width = `${this.element.offsetWidth}px`; + // - 1 accounts for any rounding error + wrapper.style.width = `${this.element.offsetWidth - 1}px`; wrapper.style.height = `${height}px`; } } diff --git a/app/assets/stylesheets/common/select-kit/multi-select.scss b/app/assets/stylesheets/common/select-kit/multi-select.scss index e1ee384a8e7..65d9d290d5c 100644 --- a/app/assets/stylesheets/common/select-kit/multi-select.scss +++ b/app/assets/stylesheets/common/select-kit/multi-select.scss @@ -53,6 +53,7 @@ .multi-select-header { border-radius: 0; box-shadow: none; + outline: none; } .select-kit-body { diff --git a/app/assets/stylesheets/common/select-kit/select-kit.scss b/app/assets/stylesheets/common/select-kit/select-kit.scss index 627325e9c1a..65a21259718 100644 --- a/app/assets/stylesheets/common/select-kit/select-kit.scss +++ b/app/assets/stylesheets/common/select-kit/select-kit.scss @@ -34,10 +34,6 @@ box-sizing: border-box; width: 100%; } - - .select-kit-header { - outline: 1px solid $tertiary; - } } &.is-loading { diff --git a/app/assets/stylesheets/common/select-kit/single-select.scss b/app/assets/stylesheets/common/select-kit/single-select.scss index 4868756a9d5..f77def218ce 100644 --- a/app/assets/stylesheets/common/select-kit/single-select.scss +++ b/app/assets/stylesheets/common/select-kit/single-select.scss @@ -8,4 +8,10 @@ border-bottom: 1px solid $primary-low; } } + + &.is-expanded { + .select-kit-header { + outline: 1px solid $tertiary; + } + } }