Scrounger / ioBroker.vis-materialdesign

ioBroker Material Design Widgets are based on Google's material design guidelines. The adapter uses different libraries.
https://forum.iobroker.net/topic/42185/test-adapter-material-design-widgets-v0-5-x
MIT License
59 stars 38 forks source link

materialdesign - Autocomplete: pulldown menu does not close #142

Open ice987987 opened 3 years ago

ice987987 commented 3 years ago

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
materialdesign

[{"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:

Scrounger commented 3 years ago

Vis Adapter 1.3.6 wird benötigt!

Ich kann den Fehler nicht reproduzieren

ice987987 commented 3 years ago

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.

materialdesign1

Scrounger commented 3 years ago

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 commented 3 years ago

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

auf welche Versionen kann ich referenzieren?

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

Scrounger commented 3 years ago
"vue": "^2.6.12",
"vuetify": "^2.3.10",