diff --git a/js/components/selector.js b/js/components/selector.js index da2e8c18..14362678 100644 --- a/js/components/selector.js +++ b/js/components/selector.js @@ -1,10 +1,41 @@ import { VPopover } from 'v-tooltip' +const SelectorInput = { + name: 'SelectorInput', + props: { + name: String, + value: String, + label: String, + description: String, + selected: Boolean, + handleChange: Function, + handleEnter: Function + }, + + computed: { + id: function () { + return `${this.name}_${this.value}` + } + }, + + methods: { + onChange: function (e) { + this.handleChange(this.value) + }, + + onEnter: function (e) { + this.handleEnter() + } + } +} + + export default { name: 'selector', components: { - VPopover + VPopover, + SelectorInput }, props: { @@ -20,7 +51,8 @@ export default { data: function () { return { value: this.initialChoice || null, - showError: (this.initialErrors && this.initialErrors.length) || false + showError: (this.initialErrors && this.initialErrors.length) || false, + usingKeyboard: false } }, @@ -38,32 +70,29 @@ export default { }, methods: { + change: function (value) { - console.log('change', value) this.value = value this.showError = false - setTimeout(() => this.$refs.popover.hide(), 300) + if (!this.usingKeyboard) { + setTimeout(() => this.$refs.popover.hide(), 300) + } }, - handleClickOption: function (e) { - console.log('click', e) - this.change(e.target.value) - }, - - handleSwitchOption: function (e) { - console.log('switch', e) - this.value = e.target.value + enter: function () { + this.$refs.popover.hide() }, handleEnterOption: function (e) { - console.log('enter', e) - e.stopPropagation() this.change(e.target.value) - return false + this.usingKeyboard = false + this.$refs.popover.hide() }, handleButtonArrowDown: function (e) { + this.usingKeyboard = true this.$refs.popover.show() + this.$refs.choices.find(choice => choice.selected).$refs.input[0].focus() } }, } diff --git a/styles/elements/_block_lists.scss b/styles/elements/_block_lists.scss index cba9edad..54c78cec 100644 --- a/styles/elements/_block_lists.scss +++ b/styles/elements/_block_lists.scss @@ -105,21 +105,26 @@ @include block-list-item; &.block-list__item--selectable { - > label { - margin: 0; - max-width: none; + > div { display: flex; flex-direction: row-reverse; - align-items: center; - justify-content: space-between; - &::before { - flex-shrink: 0; - margin-right: 0; - margin-left: $gap * 2; - } - &:hover { - color: $color-primary; + > label { + margin: 0; + max-width: none; + display: flex; + flex-direction: row-reverse; + align-items: center; + justify-content: space-between; + &::before { + flex-shrink: 0; + margin-right: 0; + margin-left: $gap * 2; + } + + &:hover { + color: $color-primary; + } } } diff --git a/templates/components/selector.html b/templates/components/selector.html index 4b6b9d38..7fff677e 100644 --- a/templates/components/selector.html +++ b/templates/components/selector.html @@ -26,7 +26,7 @@ class='selector__button' type='button' v-html='label' - v-on:keyup.down='handleButtonArrowDown' + v-on:keydown.down.prevent.stop='handleButtonArrowDown' v-tooltip='{ container:false }'> @@ -41,28 +41,45 @@