[Bug Report] v-combobox input problem

Environment

Vuetify Version: 2.2.30 Vue Version: 2.6.11 Browsers: Chrome 83.0.4103.61 OS: Linux x86_64

Steps to reproduce

The top half of the Codepen illustrates the problem(s):

1. select “Second choice” from the combobox list of choices.
2. start typing, e.g. “abc”

Expected Behavior

On typing, I’d expect that either:

• the value of the input would be what was shown (“Second choiceabc”) or that
• it would just show “abc” once typing started. i.e. either that the edit value would match what was shown, or what was shown would match the edit value.

Actual Behavior

Observe that the input field shows “Second choice” in blue (has focus) and typed input as a suffix in a different color (black) and that the input field shows “Second choiceabc”. The actual edit field value is just “abc” but it is showing “Second choiceabc”.

1. Check console for event notifications. No events on typing, but focus loss etc update the model to “abc” without the “Second choice” prefix that was shown in the edit field.

Reproduction Link

https://codepen.io/appurist/pen/qBOedWP?editors=1111

Other comments

The bottom half of the Codepen example shows my best workaround in the meantime, a combination of separate v-text-field and v-select fields.

Also: if I insert the commented-out line that immediately follows the <v-combobox> tag, with the @keydown handler, or if I similarly assign a @click handler, this always produces a Vue warning: "[Vue warn]: Property or method 'outerHTML' is not defined on the instance but referenced during render. I have tried applying many modifiers on the event handlers, the one that remains in the Codepen example commented out is @keydown.self.stop.prevent="onKeydown"

Note that typing into the first field (v-text-field) in the workaround section of the Codepen causes the model value to immediately update, not so when typing into the combobox in the top half. I think if the model updated like v-text-field, the problem would be gone because the input field would lose the “Second choice” (visual-only) prefix.

There’s also a simpler example here: https://codepen.io/appurist/pen/gOaNvQb?editors=1011

[johnleider]

Combobox doesn’t update the value unless you confirm by pressing enter or explicitly clicking an item.

If this is your concern, I would say it is working as intended. If it’s not, let me know.

[appurist]

@mikecbone Thank you! Yes, it’s the selection slot causing the remaining problem. And yes, with that resolved, in combination with your blur workaround to blur on submit, I think we have a winning behavior. (Might be nice to have an autoclose prop or something like that on v-combobox to default to that behavior.)

I generally avoid adding slot bodies unless necessary for some reason, so I’m not sure why I felt it necessary to add the slots; either I was doing something more complex and needed to modify the behavior slightly, or if I remember correctly, it was away to work around a Vuetify problem I was seeing (that likely was short-lived and has since been resolved). I do remember seeing a fix months ago that I hoped would resolve this problem but “it didn’t” (presumably because I didn’t also remove the slots). It’s also possible it has been entirely user error all along, adding the selection slot when it wasn’t needed. I’m not sure why that breaks the behavior but I thank you for spotting it.

I don’t need the drill-down search functionality, so I still think the hierarchy is inverted, but that’s extra functionality, and not an actual problem, so at this point I consider this resolved.