diff --git a/app/assets/javascripts/select-kit/addon/components/multi-select.js b/app/assets/javascripts/select-kit/addon/components/multi-select.js index 6f6a32eb15d..534f6994dd2 100644 --- a/app/assets/javascripts/select-kit/addon/components/multi-select.js +++ b/app/assets/javascripts/select-kit/addon/components/multi-select.js @@ -137,7 +137,17 @@ export default SelectKitComponent.extend({ }), _onKeydown(event) { - if (event.keyCode === 8) { + if ( + event.code === "Enter" && + event.target.classList.contains("selected-name") + ) { + event.stopPropagation(); + + this.selectKit.deselectByValue(event.target.dataset.value); + return false; + } + + if (event.code === "Backspace") { event.stopPropagation(); const input = this.getFilterInput(); @@ -149,19 +159,14 @@ export default SelectKitComponent.extend({ if (selected.length) { const lastSelected = selected[selected.length - 1]; if (lastSelected) { - if (lastSelected.classList.contains("is-highlighted")) { + if (lastSelected === document.activeElement) { this.deselect(this.selectedContent.lastObject); } else { - lastSelected.classList.add("is-highlighted"); + lastSelected.focus(); } } } } - } else { - const selected = this.element.querySelectorAll( - ".select-kit-header .choice.select-kit-selected-name" - ); - selected.forEach((s) => s.classList.remove("is-highlighted")); } return true; diff --git a/app/assets/javascripts/select-kit/addon/components/select-kit.js b/app/assets/javascripts/select-kit/addon/components/select-kit.js index 56b91d03a89..663776dc069 100644 --- a/app/assets/javascripts/select-kit/addon/components/select-kit.js +++ b/app/assets/javascripts/select-kit/addon/components/select-kit.js @@ -115,6 +115,7 @@ export default Component.extend( change: bind(this, this._onChangeWrapper), select: bind(this, this.select), deselect: bind(this, this.deselect), + deselectByValue: bind(this, this.deselectByValue), append: bind(this, this.append), onOpen: bind(this, this._onOpenWrapper), @@ -544,6 +545,15 @@ export default Component.extend( this.selectKit.change(null, null); }, + deselectByValue(value) { + if (!value) { + return; + } + + const item = this.itemForValue(value, this.selectedContent); + this.deselect(item); + }, + append() { // do nothing on general case }, diff --git a/app/assets/stylesheets/common/select-kit/multi-select.scss b/app/assets/stylesheets/common/select-kit/multi-select.scss index 7a63776d3a9..9656a7ab909 100644 --- a/app/assets/stylesheets/common/select-kit/multi-select.scss +++ b/app/assets/stylesheets/common/select-kit/multi-select.scss @@ -157,10 +157,6 @@ &:hover .d-icon:last-child { color: var(--danger); } - - &.is-highlighted { - box-shadow: 0 0 2px var(--danger), 0 1px 0 rgba(0, 0, 0, 0.05); - } } } }