materialdesign - Autocomplete: pulldown menu does not close

[ice987987]

Describe the bug
materialdesign - Autocomplete: pulldown menu does not close after hitting "Enter" or clicking on "x"

To Reproduce
Steps to reproduce the behavior:

1. Enter a value which is available in the pulldown list and hit "Enter" -> pulldown menu does not close
2. Enter a value which is not available in the pulldown list and hit "Enter" -> pulldown menu appears
3. Click on "x": pulldown menu appears

Expected behavior
pulldown menu disappear/close if hitting "Enter" pulldown menu disapper/close if clicking "x"

Screenshots & Logfiles

[{"tpl":"tplVis-materialdesign-Autocomplete","data":{"oid":"0_userdata.0.materialdesign.autocompleteObjectID","g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","inputMode":"write","inputType":"text","vibrateOnMobilDevices":"50","inputLayout":"regular","inputAlignment":"left","inputLayoutBorderColor":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.input.border;dark:vis-materialdesign.0.colors.dark.input.border; mode === \"true\" ? dark : light}","inputLayoutBorderColorHover":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.input.border_hover;dark:vis-materialdesign.0.colors.dark.input.border_hover; mode === \"true\" ? dark : light}","inputLayoutBorderColorSelected":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.input.border_selected;dark:vis-materialdesign.0.colors.dark.input.border_selected; mode === \"true\" ? dark : light}","inputTextFontFamily":"{vis-materialdesign.0.fonts.input.text}","inputTextFontSize":"{vis-materialdesign.0.fontSizes.input.text}","inputTextColor":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.input.text;dark:vis-materialdesign.0.colors.dark.input.text; mode === \"true\" ? dark : light}","inputLabelColor":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.input.label;dark:vis-materialdesign.0.colors.dark.input.label; mode === \"true\" ? dark : light}","inputLabelColorSelected":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.input.label_selected;dark:vis-materialdesign.0.colors.dark.input.label_selected; mode === \"true\" ? dark : light}","inputLabelFontFamily":"{vis-materialdesign.0.fonts.input.label}","inputLabelFontSize":"{vis-materialdesign.0.fontSizes.input.label}","inputAppendixColor":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.input.appendix;dark:vis-materialdesign.0.colors.dark.input.appendix; mode === \"true\" ? dark : light}","inputAppendixFontSize":"{vis-materialdesign.0.fontSizes.input.appendix}","inputAppendixFontFamily":"{vis-materialdesign.0.fonts.input.appendix}","clearIconShow":true,"collapseIconColor":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.input.icon_collapse;dark:vis-materialdesign.0.colors.dark.input.icon_collapse; mode === \"true\" ? dark : light}","listDataMethod":"jsonStringObject","countSelectItems":"0","listPosition":"bottom","listPositionOffset":"true","listItemBackgroundColor":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.input.menu.background;dark:vis-materialdesign.0.colors.dark.input.menu.background; mode === \"true\" ? dark : light}","listItemBackgroundHoverColor":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.input.menu.hover;dark:vis-materialdesign.0.colors.dark.input.menu.hover; mode === \"true\" ? dark : light}","listItemBackgroundSelectedColor":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.input.menu.selected;dark:vis-materialdesign.0.colors.dark.input.menu.selected; mode === \"true\" ? dark : light}","listItemRippleEffectColor":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.input.menu.effect;dark:vis-materialdesign.0.colors.dark.input.menu.effect; mode === \"true\" ? dark : light}","showSelectedIcon":"prepend-inner","listIconColor":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.input.menu.icon;dark:vis-materialdesign.0.colors.dark.input.menu.icon; mode === \"true\" ? dark : light}","listItemFontSize":"{vis-materialdesign.0.fontSizes.input.dropdown.text}","listItemFont":"{vis-materialdesign.0.fonts.input.dropdown.text}","listItemFontColor":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.input.menu.text;dark:vis-materialdesign.0.colors.dark.input.menu.text; mode === \"true\" ? dark : light}","listItemSubFontSize":"{vis-materialdesign.0.fontSizes.input.dropdown.subText}","listItemSubFont":"{vis-materialdesign.0.fonts.input.dropdown.subText}","listItemSubFontColor":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.input.menu.subText;dark:vis-materialdesign.0.colors.dark.input.menu.subText; mode === \"true\" ? dark : light}","showValue":false,"listItemValueFontSize":"{vis-materialdesign.0.fontSizes.input.dropdown.value}","listItemValueFont":"{vis-materialdesign.0.fonts.input.dropdown.value}","listItemValueFontColor":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.input.menu.value;dark:vis-materialdesign.0.colors.dark.input.menu.value; mode === \"true\" ? dark : light}","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"jsonStringObject":"{0_userdata.0.materialdesign.autocompleteDaten}","g_menuItems_§0":false,"g_counter":true,"showInputCounter":false,"inputCounterColor":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.input.counter;dark:vis-materialdesign.0.colors.dark.input.counter; mode === \"true\" ? dark : light}","inputCounterFontSize":"{vis-materialdesign.0.fontSizes.input.counter}","inputCounterFontFamily":"{vis-materialdesign.0.fonts.input.counter}","g_inputSubText":false,"showInputMessageAlways":"true","inputMessageFontFamily":"{vis-materialdesign.0.fonts.input.message}","inputMessageFontSize":"{vis-materialdesign.0.fontSizes.input.message}","inputMessageColor":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.input.message;dark:vis-materialdesign.0.colors.dark.input.message; mode === \"true\" ? dark : light}"},"style":{"left":"35px","top":"57px","width":"244px","height":"38px"},"widgetSet":"materialdesign"}]

Versions:

• Adapter version: Material Design Widgets v0.4.2
• JS-Controller version: 3.1.6
• Node version: v12.20.0
• Operating system: linux
• vis: v1.3.4

[Scrounger]

Vis Adapter 1.3.6 wird benötigt!

Ich kann den Fehler nicht reproduzieren

[ice987987]

ich habe nun vis v1.3.6 und Material Design Widgets v0.4.2 installiert. Da habe ich das gleiche Problem, getestet auf Win Chrome, iOS Safari und Apple ioBroker app (alles neueste Versionen):

Wenn einen Wert eingegeben wird, egal ob dieser in der Auswahl vorkommt oder nicht ("JSON-String" unter Daten des Menüs mit oder ohne Binding zu Datenpunkt, z.B. [{"text":"aaa","value":"aaa"},{"text":"bbb","value":"bbb"},{"text":"ccc","value":"ccc"}] ) und anschliessend "Enter" gedrückt wird, erscheint das Auswahlmenü. Das Menü verschwindet nur, wenn ein Wert aus dem Menü angeklickt wird.

[Scrounger]

Ok jetzt hab ich es verstanden. Das ist leider von der API so vorgegeben, siehe https://vuetifyjs.com/en/components/combobox/

Wenn du eine Änderung haben möchtest dann musst du dort ein Issue anlegen und hoffen das die des entsprechend einbauen. Bitte dann hiermit verlinken.

[ice987987]

Um einen issue unter https://issues.vuetifyjs.com/ zu eröffnen benötige ich folgende Infos:

• Vuetify Version
• Vue Version

auf welche Versionen kann ich referenzieren?

Es ist korrekt: https://codepen.io/ice987/pen/abmjjeq gibt's das "Problem" auch.

[Scrounger]

"vue": "^2.6.12",
"vuetify": "^2.3.10",