From a45f763fad59ef2bbbe438a657b0e4ee34e1935a Mon Sep 17 00:00:00 2001
From: Daniel Lando <daniel.sorridi@gmail.com>
Date: Mon, 1 Mar 2021 15:50:59 +0100
Subject: [PATCH] fix(ui): allow manual entry on config values with states
 (#781)

---
 lib/ZwaveClient.js         |  1 +
 src/components/ValueId.vue | 35 ++++++++++++++++++++++++++++++++++-
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/lib/ZwaveClient.js b/lib/ZwaveClient.js
index 889ec79e3f3..43ed67d2eed 100644
--- a/lib/ZwaveClient.js
+++ b/lib/ZwaveClient.js
@@ -986,6 +986,7 @@ function updateValueMetadata (zwaveNode, zwaveValue, zwaveValueMeta) {
 
   if (zwaveValueMeta.states) {
     valueId.list = true
+    valueId.allowManualEntry = zwaveValueMeta.allowManualEntry
     valueId.states = []
     for (const k in zwaveValueMeta.states) {
       valueId.states.push({
diff --git a/src/components/ValueId.vue b/src/components/ValueId.vue
index 1ad6f9f551b..1285d608e2e 100644
--- a/src/components/ValueId.vue
+++ b/src/components/ValueId.vue
@@ -103,7 +103,7 @@
       </v-text-field>
 
       <v-select
-        v-if="value.list"
+        v-if="value.list && !value.allowManualEntry"
         :items="items"
         :style="{
           'max-width': $vuetify.breakpoint.smAndDown
@@ -120,6 +120,35 @@
         @click:append-outer="updateValue(value)"
       ></v-select>
 
+      <v-combobox
+        v-if="value.list && value.allowManualEntry"
+        :items="items"
+        :style="{
+          'max-width': $vuetify.breakpoint.smAndDown
+            ? '280px'
+            : $vuetify.breakpoint.smOnly
+            ? '400px'
+            : 'auto'
+        }"
+        :hint="help"
+        persistent-hint
+        chips
+        item-text="text"
+        item-value="value"
+        :append-outer-icon="!disable_send || value.writeable ? 'send' : null"
+        v-model="value.newValue"
+        :readonly="!value.writeable"
+        @click:append-outer="updateValue(value)"
+      >
+        <template v-slot:selection="{ attrs, item, selected }">
+          <v-chip v-bind="attrs" :input-value="selected">
+            <span>
+              {{ selectedItem ? selectedItem.text : 'Custom: ' + item }}
+            </span>
+          </v-chip>
+        </template>
+      </v-combobox>
+
       <div v-if="value.type == 'boolean' && value.writeable && value.readable">
         <v-btn-toggle class="mt-4" v-model="value.newValue" rounded>
           <v-btn
@@ -196,6 +225,10 @@ export default {
     }
   },
   computed: {
+    selectedItem () {
+      if (!this.items) return null
+      else return this.items.find(v => v.value === this.value.newValue)
+    },
     items () {
       const items = this.value.states || []
       const defaultValue = this.value.default