Add new behavior to autocomplete component #85
Conversation
| @@ -218,6 +227,7 @@ | |||
| this.activated = false; | |||
| }, | |||
| handleKeyEnter(e) { | |||
| if (this.blurOnSelect) { this.$refs.input.ignoreNextBlur(false); } | |||
There was a problem hiding this comment.
Info since the mouse cursor never click when using the keyboard to make the selection, the input is never unfocused. Thus, we do not need to ignore the next blur event.
| @@ -189,6 +197,7 @@ | |||
| }, | |||
| handleInput(value) { | |||
| this.$emit('input', value); | |||
| if (this.blurOnSelect) { this.$refs.input.ignoreNextBlur(true); } | |||
There was a problem hiding this comment.
Am I crazy or is the meaning of this prop backwards? To me this reads as "If blur on select, then don't blur when a value is selected". Am I missing something or should it be negated?
There was a problem hiding this comment.
Not crazy. I had everything backwards on accident.
| @@ -208,6 +219,7 @@ | |||
| } | |||
| }, | |||
| handleBlur(event) { | |||
| this.activated = false; | |||
| @@ -230,7 +247,8 @@ | |||
| } | |||
| }, | |||
| select(item) { | |||
| this.$emit('input', item[this.valueKey]); | |||
| this.selected = true; | |||
There was a problem hiding this comment.
Does selected mean that you're in the process of selecting an item (but not yet selected)? If so that might be a better form of name to avoid confusing this with a "currently selected value", which is a common data property.
| @@ -216,8 +228,13 @@ | |||
| }, | |||
| close(e) { | |||
| this.activated = false; | |||
| if (!this.selected && !this.blurOnSelect) { | |||
| this.selected = true; | |||
There was a problem hiding this comment.
I set selected=true so that this won't conditional will not run again
There was a problem hiding this comment.
Per the quick chat yesterday, this is really something like "was select handled", so you're saying that the selection was handled at this point (and the field was blurred)? But, I think my confusion comes from assuming that when the autocomplete it closed this prop wouldn't be checked again until it was opened again, and it should go back to its default state (false).
| @@ -18,7 +18,7 @@ | |||
| @keydown.up.native.prevent="highlight(highlightedIndex - 1)" | |||
| @keydown.down.native.prevent="highlight(highlightedIndex + 1)" | |||
| @keydown.enter.native="handleKeyEnter" | |||
| @keydown.native.tab="close" | |||
| @keydown.native.tab="handleKeyEnter" | |||
There was a problem hiding this comment.
Is this an intended functional change, i.e. tab to select the currently highlighted value? And if so shouldn't it also blur the field (as opposed to Enter)? (This also seems like something that could be a configurable prop, though if we're ok with not preserving existing behavior then it wouldn't really be necessary.)
This PR adds fillOnSelected and blurOnSelect props to the autocomplete component.