From 1a09e1e8ab3d26f4020b910aa13b743aaf016426 Mon Sep 17 00:00:00 2001
From: Dan Popescu <pdan.popescu@gmail.com>
Date: Mon, 15 Mar 2021 18:30:16 +0200
Subject: [PATCH] feat(QSelect): dialog - add close icon; add class and style;
 open when typing in field; fix focus on field #6523, #6858

#6523, #6858
---
 docs/src/examples/QSelect/DialogCloseIcon.vue | 115 ++++
 docs/src/pages/vue-components/select.md       |   4 +
 ui/dev/src/pages/form/select-part-5-kbd.vue   |  67 ++-
 ui/dev/src/pages/form/select-part-8.vue       | 496 ++++++++++--------
 ui/src/components/field/QField.js             |   1 +
 ui/src/components/select/QSelect.js           |  99 +++-
 ui/src/components/select/QSelect.json         |  34 +-
 ui/src/components/select/QSelect.sass         |  14 +
 ui/src/components/select/QSelect.styl         |  14 +
 9 files changed, 604 insertions(+), 240 deletions(-)
 create mode 100644 docs/src/examples/QSelect/DialogCloseIcon.vue

diff --git a/docs/src/examples/QSelect/DialogCloseIcon.vue b/docs/src/examples/QSelect/DialogCloseIcon.vue
new file mode 100644
index 000000000000..7504e4895efd
--- /dev/null
+++ b/docs/src/examples/QSelect/DialogCloseIcon.vue
@@ -0,0 +1,115 @@
+<template>
+  <div class="q-pa-md">
+    <div class="q-gutter-md row">
+      <q-select
+        filled
+        v-model="model"
+        label="Default close icon"
+        :options="options"
+        style="width: 250px"
+        behavior="dialog"
+        dialog-close-icon
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              No results
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+
+      <q-select
+        filled
+        v-model="model"
+        use-input
+        input-debounce="0"
+        label="Filter with default close icon"
+        :options="options"
+        @filter="filterFn"
+        style="width: 250px"
+        behavior="dialog"
+        dialog-close-icon
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              No results
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+
+      <q-select
+        filled
+        v-model="model"
+        label="Custom close icon"
+        :options="options"
+        style="width: 250px"
+        behavior="dialog"
+        dialog-close-icon="close"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              No results
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+
+      <q-select
+        filled
+        v-model="model"
+        use-input
+        input-debounce="0"
+        label="Filter with custom close icon"
+        :options="options"
+        @filter="filterFn"
+        style="width: 250px"
+        behavior="dialog"
+        dialog-close-icon="close"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              No results
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+    </div>
+  </div>
+</template>
+
+<script>
+const stringOptions = [
+  'Google', 'Facebook', 'Twitter', 'Apple', 'Oracle'
+]
+
+export default {
+  data () {
+    return {
+      model: null,
+      stringOptions,
+      options: stringOptions
+    }
+  },
+
+  methods: {
+    filterFn (val, update) {
+      if (val === '') {
+        update(() => {
+          this.options = stringOptions
+        })
+        return
+      }
+
+      update(() => {
+        const needle = val.toLowerCase()
+        this.options = stringOptions.filter(v => v.toLowerCase().indexOf(needle) > -1)
+      })
+    }
+  }
+}
+</script>
diff --git a/docs/src/pages/vue-components/select.md b/docs/src/pages/vue-components/select.md
index 9574ddb2e388..046d3ef09b6f 100644
--- a/docs/src/pages/vue-components/select.md
+++ b/docs/src/pages/vue-components/select.md
@@ -64,6 +64,10 @@ Please note that on iOS menu behavior might generate problems, especially when u
 
 <doc-example title="Show options in dialog" file="QSelect/BehaviorDialog" />
 
+### Dialog mode close icon
+
+<doc-example title="Close icon in dialog" file="QSelect/DialogCloseIcon" />
+
 ## The model
 
 ::: danger
diff --git a/ui/dev/src/pages/form/select-part-5-kbd.vue b/ui/dev/src/pages/form/select-part-5-kbd.vue
index 6ecf8a619b76..0d47d802bad4 100644
--- a/ui/dev/src/pages/form/select-part-5-kbd.vue
+++ b/ui/dev/src/pages/form/select-part-5-kbd.vue
@@ -1,7 +1,13 @@
 <template>
   <div class="q-layout-padding">
+    <div class="row items-center bg-black text-white q-pa-sm">
+      <q-checkbox v-model="forceMenu" toggle-indeterminate dark :label="forceMenuLabel" />
+      <q-checkbox v-model="dialogCloseIcon" toggle-indeterminate dark :label="dialogCloseIconLabel" />
+    </div>
+
     <div class="bg-black text-white q-pa-sm q-mb-xl">
-      <q-checkbox v-model="forceMenu" toggle-indeterminate dark :label="forceMenuLabel" /> / ModelS: {{ modelS || 'null' }} / ModelM: {{ modelM || 'null' }}
+      <div>ModelS: {{ modelS || 'null' }}</div>
+      <div>ModelM: {{ modelM || 'null' }}</div>
     </div>
 
     <div class="row q-col-gutter-md">
@@ -14,6 +20,7 @@
           label="Single"
           :options="options"
           clearable
+          :dialog-close-icon="dialogCloseIconValue"
           :behavior="behavior"
         >
           <template v-slot:no-option>
@@ -23,6 +30,14 @@
               </q-item-section>
             </q-item>
           </template>
+
+          <template v-slot:prepend>
+            <q-icon name="colorize" />
+          </template>
+
+          <template v-slot:append>
+            <q-icon name="lock" />
+          </template>
         </q-select>
 
         <q-select
@@ -35,6 +50,7 @@
           input-debounce="0"
           @filter="filterFn"
           clearable
+          :dialog-close-icon="dialogCloseIconValue"
           :behavior="behavior"
         >
           <template v-slot:no-option>
@@ -44,6 +60,14 @@
               </q-item-section>
             </q-item>
           </template>
+
+          <template v-slot:prepend>
+            <q-icon name="colorize" />
+          </template>
+
+          <template v-slot:append>
+            <q-icon name="lock" />
+          </template>
         </q-select>
 
         <q-select
@@ -57,6 +81,7 @@
           hide-selected
           @filter="filterFn"
           clearable
+          :dialog-close-icon="dialogCloseIconValue"
           :behavior="behavior"
         >
           <template v-slot:no-option>
@@ -79,6 +104,7 @@
           fill-input
           @filter="filterFn"
           clearable
+          :dialog-close-icon="dialogCloseIconValue"
           :behavior="behavior"
         >
           <template v-slot:no-option>
@@ -101,6 +127,7 @@
           fill-input
           @filter="filterFn"
           clearable
+          :dialog-close-icon="dialogCloseIconValue"
           :behavior="behavior"
         >
           <template v-slot:no-option>
@@ -122,6 +149,7 @@
           label="Multiple"
           :options="options"
           clearable
+          :dialog-close-icon="dialogCloseIconValue"
           :behavior="behavior"
         >
           <template v-slot:no-option>
@@ -143,6 +171,7 @@
           input-debounce="0"
           @filter="filterFn"
           clearable
+          :dialog-close-icon="dialogCloseIconValue"
           :behavior="behavior"
         >
           <template v-slot:no-option>
@@ -165,6 +194,7 @@
           hide-selected
           @filter="filterFn"
           clearable
+          :dialog-close-icon="dialogCloseIconValue"
           :behavior="behavior"
         >
           <template v-slot:no-option>
@@ -187,6 +217,7 @@
           fill-input
           @filter="filterFn"
           clearable
+          :dialog-close-icon="dialogCloseIconValue"
           :behavior="behavior"
         >
           <template v-slot:no-option>
@@ -210,6 +241,7 @@
           fill-input
           @filter="filterFn"
           clearable
+          :dialog-close-icon="dialogCloseIconValue"
           :behavior="behavior"
         >
           <template v-slot:no-option>
@@ -232,6 +264,7 @@
           label="Multiple Chips"
           :options="options"
           clearable
+          :dialog-close-icon="dialogCloseIconValue"
           :behavior="behavior"
         >
           <template v-slot:no-option>
@@ -254,6 +287,7 @@
           input-debounce="0"
           @filter="filterFn"
           clearable
+          :dialog-close-icon="dialogCloseIconValue"
           :behavior="behavior"
         >
           <template v-slot:no-option>
@@ -277,6 +311,7 @@
           hide-selected
           @filter="filterFn"
           clearable
+          :dialog-close-icon="dialogCloseIconValue"
           :behavior="behavior"
         >
           <template v-slot:no-option>
@@ -300,6 +335,7 @@
           fill-input
           @filter="filterFn"
           clearable
+          :dialog-close-icon="dialogCloseIconValue"
           :behavior="behavior"
         >
           <template v-slot:no-option>
@@ -324,6 +360,7 @@
           fill-input
           @filter="filterFn"
           clearable
+          :dialog-close-icon="dialogCloseIconValue"
           :behavior="behavior"
         >
           <template v-slot:no-option>
@@ -348,6 +385,7 @@
           input-debounce="0"
           @filter="filterFnObj"
           clearable
+          :dialog-close-icon="dialogCloseIconValue"
           :behavior="behavior"
         >
           <template v-slot:no-option>
@@ -370,6 +408,7 @@
         option-value="value"
         option-label="label"
         clearable
+        :dialog-close-icon="dialogCloseIconValue"
         :behavior="behavior"
       />
 
@@ -383,6 +422,7 @@
         emit-value
         map-options
         clearable
+        :dialog-close-icon="dialogCloseIconValue"
         :behavior="behavior"
       />
 
@@ -396,6 +436,7 @@
         emit-value
         map-options
         clearable
+        :dialog-close-icon="dialogCloseIconValue"
         :behavior="behavior"
       />
 
@@ -407,6 +448,7 @@
         option-value="value"
         option-label="label"
         clearable
+        :dialog-close-icon="dialogCloseIconValue"
         :behavior="behavior"
       />
 
@@ -418,6 +460,7 @@
         :option-value="kOptionValue"
         :option-label="kOptionLabel"
         clearable
+        :dialog-close-icon="dialogCloseIconValue"
         :behavior="behavior"
       />
 
@@ -431,6 +474,7 @@
         emit-value
         map-options
         clearable
+        :dialog-close-icon="dialogCloseIconValue"
         :behavior="behavior"
       />
 
@@ -444,6 +488,7 @@
         emit-value
         map-options
         clearable
+        :dialog-close-icon="dialogCloseIconValue"
         :behavior="behavior"
       />
 
@@ -455,6 +500,7 @@
         :option-value="kOptionValue"
         :option-label="kOptionLabel"
         clearable
+        :dialog-close-icon="dialogCloseIconValue"
         :behavior="behavior"
       />
     </div>
@@ -490,7 +536,8 @@ export default {
       optionsK,
       objOptions,
       objOptionsK,
-      forceMenu: null
+      forceMenu: null,
+      dialogCloseIcon: false
     }
   },
 
@@ -507,7 +554,21 @@ export default {
       }
 
       return this.forceMenu === false ? 'Force dialog' : 'Based on platform'
-    }
+    },
+
+    dialogCloseIconValue () {
+      return this.dialogCloseIcon === null
+        ? 'close'
+        : this.dialogCloseIcon
+    },
+
+    dialogCloseIconLabel () {
+      if (this.dialogCloseIcon === true) {
+        return 'Default dialog close icon'
+      }
+
+      return this.dialogCloseIcon === false ? 'No dialog close icon' : 'Custom dialog close icon'
+    },
   },
 
   methods: {
diff --git a/ui/dev/src/pages/form/select-part-8.vue b/ui/dev/src/pages/form/select-part-8.vue
index 770304a4a229..c284b8f5dd80 100644
--- a/ui/dev/src/pages/form/select-part-8.vue
+++ b/ui/dev/src/pages/form/select-part-8.vue
@@ -9,245 +9,286 @@
       make a new *.vue file here or in another folder under /dev/components.
     -->
     <div class="q-pa-md" style="max-width: 350px">
-    <q-btn round dense flas icon="settings" color="black" text-color="white">
-      <q-menu content-class="q-menu-class">
-        <q-list bordered padding>
-          <q-item-label header>User Controls</q-item-label>
-
-          <q-item clickable v-ripple>
-            <q-item-section>
-              <q-item-label>Device selection (select only one)</q-item-label>
-              <q-item-label caption class="text-bold">Only on mobile device (tested on Android), when an item is selected, the nativ keyboard appears when it is not the expected behaviour because the q-select does not need keyboard interaction.</q-item-label>
-              <q-item-label class="text-red">Unexpected behaviour !</q-item-label>
-              <q-item-label>
-                <q-select
-                   v-model="selectedUserControl"
-                   :options="userControl"
-                   dense options-dense outlined
-                />
-              </q-item-label>
-            </q-item-section>
-          </q-item>
-
-          <q-item clickable v-ripple>
-            <q-item-section>
-              <q-item-label>Color selection (select multiple values)</q-item-label>
-              <q-item-label caption class="text-bold">But with multiple select, when items are selected, the nativ keyboard does not appear.</q-item-label>
-              <q-item-label class="text-green">Expected behaviour !</q-item-label>
-              <q-item-label>
-                <q-select
-                   v-model="selectedUserColors"
-                   :options="userColors"
-                   multiple
-                   dense options-dense outlined
-                   emit-value map-options
-                >
-                  <template v-slot:option="{ itemProps, itemEvents, opt, selected, toggleOption }">
-                    <q-item
-                            v-bind="itemProps"
-                            v-on="itemEvents"
-                            >
-                      <q-item-section>
-                        <q-item-label v-html="opt.label" ></q-item-label>
-                      </q-item-section>
-                      <q-item-section side>
-                        <q-toggle :value="selected" @input="toggleOption(opt)" />
-                      </q-item-section>
-                    </q-item>
-                  </template>
-                </q-select>
-              </q-item-label>
-            </q-item-section>
-          </q-item>
+      <q-btn round dense flas icon="settings" color="black" text-color="white">
+        <q-menu content-class="q-menu-class">
+          <q-list bordered padding>
+            <q-item-label header>User Controls</q-item-label>
 
-          <q-select label="delayed filter" rounded outlined :options="quizList" v-model="quiz" @filter="getQuiz" behavior="menu">
-            <template v-slot:selected>
-              <div class="text-body1 text-black">{{ quiz.label }}</div>
-            </template>
-          </q-select>
+            <q-item clickable v-ripple>
+              <q-item-section>
+                <q-item-label>Device selection (select only one)</q-item-label>
+                <q-item-label caption class="text-bold">Only on mobile device (tested on Android), when an item is selected, the nativ keyboard appears when it is not the expected behaviour because the q-select does not need keyboard interaction.</q-item-label>
+                <q-item-label class="text-red">Unexpected behaviour !</q-item-label>
+                <q-item-label>
+                  <q-select
+                    v-model="selectedUserControl"
+                    :options="userControl"
+                    dense options-dense outlined
+                  />
+                </q-item-label>
+              </q-item-section>
+            </q-item>
 
-          <q-separator spaced />
-          <q-item-label header>General</q-item-label>
-
-          <q-item tag="label" v-ripple>
-            <q-item-section side top>
-              <q-checkbox v-model="check1"></q-checkbox>
-            </q-item-section>
-
-            <q-item-section>
-              <q-item-label>Notifications</q-item-label>
-              <q-item-label caption>
-                Notify me about updates to apps or games that I downloaded
-              </q-item-label>
-            </q-item-section>
-          </q-item>
-
-          <q-item tag="label" v-ripple>
-            <q-item-section side top>
-              <q-checkbox v-model="check2"></q-checkbox>
-            </q-item-section>
-
-            <q-item-section>
-              <q-item-label>Sound</q-item-label>
-              <q-item-label caption>
-                Auto-update apps at anytime. Data charges may apply
-              </q-item-label>
-            </q-item-section>
-          </q-item>
-
-          <q-item tag="label" v-ripple>
-            <q-item-section side top>
-              <q-checkbox v-model="check3"></q-checkbox>
-            </q-item-section>
-
-            <q-item-section>
-              <q-item-label>Auto-add widgets</q-item-label>
-              <q-item-label caption>
-                Automatically add home screen widgets
-              </q-item-label>
-            </q-item-section>
-          </q-item>
-
-          <q-separator spaced />
-          <q-item-label header>Notifications</q-item-label>
-
-          <q-item tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>Battery too low</q-item-label>
-            </q-item-section>
-            <q-item-section side >
-              <q-toggle color="blue" v-model="notif1" val="battery"></q-toggle>
-            </q-item-section>
-          </q-item>
-
-          <q-item tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>Friend request</q-item-label>
-              <q-item-label caption>Allow notification</q-item-label>
-            </q-item-section>
-            <q-item-section side top>
-              <q-toggle color="green" v-model="notif2" val="friend"></q-toggle>
-            </q-item-section>
-          </q-item>
-
-          <q-item tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>Picture uploaded</q-item-label>
-              <q-item-label caption>Allow notification when uploading images</q-item-label>
-            </q-item-section>
-            <q-item-section side top>
-              <q-toggle color="red" v-model="notif3" val="picture"></q-toggle>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-menu>
-    </q-btn>
-  </div>
+            <q-item clickable v-ripple>
+              <q-item-section>
+                <q-item-label>Color selection (select multiple values)</q-item-label>
+                <q-item-label caption class="text-bold">But with multiple select, when items are selected, the nativ keyboard does not appear.</q-item-label>
+                <q-item-label class="text-green">Expected behaviour !</q-item-label>
+                <q-item-label>
+                  <q-select
+                    v-model="selectedUserColors"
+                    :options="userColors"
+                    multiple
+                    dense options-dense outlined
+                    emit-value map-options
+                  >
+                    <template v-slot:option="{ itemProps, itemEvents, opt, selected, toggleOption }">
+                      <q-item
+                        v-bind="itemProps"
+                        v-on="itemEvents"
+                      >
+                        <q-item-section>
+                          <q-item-label v-html="opt.label" ></q-item-label>
+                        </q-item-section>
+                        <q-item-section side>
+                          <q-toggle :value="selected" @input="toggleOption(opt)" />
+                        </q-item-section>
+                      </q-item>
+                    </template>
+                  </q-select>
+                </q-item-label>
+              </q-item-section>
+            </q-item>
+
+            <q-select label="delayed filter" rounded outlined :options="quizList" v-model="quiz" @filter="getQuiz" behavior="menu">
+              <template v-slot:selected>
+                <div class="text-body1 text-black">{{ quiz.label }}</div>
+              </template>
+            </q-select>
+
+            <q-separator spaced />
+            <q-item-label header>General</q-item-label>
+
+            <q-item tag="label" v-ripple>
+              <q-item-section side top>
+                <q-checkbox v-model="check1"></q-checkbox>
+              </q-item-section>
+
+              <q-item-section>
+                <q-item-label>Notifications</q-item-label>
+                <q-item-label caption>
+                  Notify me about updates to apps or games that I downloaded
+                </q-item-label>
+              </q-item-section>
+            </q-item>
+
+            <q-item tag="label" v-ripple>
+              <q-item-section side top>
+                <q-checkbox v-model="check2"></q-checkbox>
+              </q-item-section>
+
+              <q-item-section>
+                <q-item-label>Sound</q-item-label>
+                <q-item-label caption>
+                  Auto-update apps at anytime. Data charges may apply
+                </q-item-label>
+              </q-item-section>
+            </q-item>
+
+            <q-item tag="label" v-ripple>
+              <q-item-section side top>
+                <q-checkbox v-model="check3"></q-checkbox>
+              </q-item-section>
+
+              <q-item-section>
+                <q-item-label>Auto-add widgets</q-item-label>
+                <q-item-label caption>
+                  Automatically add home screen widgets
+                </q-item-label>
+              </q-item-section>
+            </q-item>
 
-  <q-btn class="q-ma-lg" color="primary" label="dialog" @click="dialog = true" />
-  <q-dialog v-model="dialog">
-    <q-card style="width: 80vw">
-      <q-card-section class="q-gutter-lg">
-        <q-select
-          label="simple"
-          v-model="selectedUserControl"
-          :options="userControl"
-          dense options-dense outlined
-        />
-
-        <q-select
-          label="simple - forced menu"
-          behavior="menu"
-          v-model="selectedUserControl"
-          :options="userControl"
-          dense options-dense outlined
-        />
-
-        <q-select
-          label="multiple"
-          v-model="selectedUserColors"
-          :options="userColors"
-          multiple
-          dense options-dense outlined
-          emit-value map-options
-        >
-          <template v-slot:option="{ itemProps, itemEvents, opt, selected, toggleOption }">
-            <q-item v-bind="itemProps" v-on="itemEvents">
+            <q-separator spaced />
+            <q-item-label header>Notifications</q-item-label>
+
+            <q-item tag="label" v-ripple>
               <q-item-section>
-                <q-item-label v-html="opt.label" ></q-item-label>
+                <q-item-label>Battery too low</q-item-label>
               </q-item-section>
-              <q-item-section side>
-                <q-toggle :value="selected" @input="toggleOption(opt)" />
+              <q-item-section side >
+                <q-toggle color="blue" v-model="notif1" val="battery"></q-toggle>
               </q-item-section>
             </q-item>
-          </template>
-        </q-select>
-
-        <q-select
-          label="multiple - forced menu"
-          behavior="menu"
-          v-model="selectedUserColors"
-          :options="userColors"
-          multiple
-          dense options-dense outlined
-          emit-value map-options
-        >
-          <template v-slot:option="{ itemProps, itemEvents, opt, selected, toggleOption }">
-            <q-item v-bind="itemProps" v-on="itemEvents">
+
+            <q-item tag="label" v-ripple>
               <q-item-section>
-                <q-item-label v-html="opt.label" ></q-item-label>
+                <q-item-label>Friend request</q-item-label>
+                <q-item-label caption>Allow notification</q-item-label>
               </q-item-section>
-              <q-item-section side>
-                <q-toggle :value="selected" @input="toggleOption(opt)" />
+              <q-item-section side top>
+                <q-toggle color="green" v-model="notif2" val="friend"></q-toggle>
               </q-item-section>
             </q-item>
-          </template>
-        </q-select>
-
-        <q-select
-          label="simple + use-input; menu"
-          use-input
-          v-model="selectedUserControl"
-          :options="userControl"
-          dense options-dense outlined
-          behavior="menu"
-        />
-
-        <q-select
-          label="multiple + use-input; menu"
-          use-input
-          v-model="selectedUserColors"
-          :options="userColors"
-          multiple
-          dense options-dense outlined
-          emit-value map-options
-          behavior="menu"
-        >
-          <template v-slot:option="{ itemProps, itemEvents, opt, selected, toggleOption }">
-            <q-item v-bind="itemProps" v-on="itemEvents">
+
+            <q-item tag="label" v-ripple>
               <q-item-section>
-                <q-item-label v-html="opt.label" ></q-item-label>
+                <q-item-label>Picture uploaded</q-item-label>
+                <q-item-label caption>Allow notification when uploading images</q-item-label>
               </q-item-section>
-              <q-item-section side>
-                <q-toggle :value="selected" @input="toggleOption(opt)" />
+              <q-item-section side top>
+                <q-toggle color="red" v-model="notif3" val="picture"></q-toggle>
               </q-item-section>
             </q-item>
-          </template>
-        </q-select>
-
-        <q-select label="delayed filter" rounded outlined :options="quizList" v-model="quiz" @filter="getQuiz" behavior="menu">
-          <template v-slot:selected>
-            <div class="text-body1 text-black">{{ quiz.label }}</div>
-          </template>
-        </q-select>
-      </q-card-section>
-    </q-card>
-  </q-dialog>
+          </q-list>
+        </q-menu>
+      </q-btn>
+    </div>
+
+    <q-btn class="q-ma-lg" color="primary" label="dialog" @click="dialog = true" />
+    <q-dialog v-model="dialog">
+      <q-card style="width: 80vw">
+        <q-card-section class="q-gutter-lg">
+          <q-select
+            label="simple"
+            v-model="selectedUserControl"
+            :options="userControl"
+            dense options-dense outlined
+          />
+
+          <q-select
+            label="simple - forced menu"
+            behavior="menu"
+            v-model="selectedUserControl"
+            :options="userControl"
+            dense options-dense outlined
+          />
+
+          <q-select
+            label="multiple"
+            v-model="selectedUserColors"
+            :options="userColors"
+            multiple
+            dense options-dense outlined
+            emit-value map-options
+          >
+            <template v-slot:option="{ itemProps, itemEvents, opt, selected, toggleOption }">
+              <q-item v-bind="itemProps" v-on="itemEvents">
+                <q-item-section>
+                  <q-item-label v-html="opt.label" ></q-item-label>
+                </q-item-section>
+                <q-item-section side>
+                  <q-toggle :value="selected" @input="toggleOption(opt)" />
+                </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
+
+          <q-select
+            label="multiple - forced menu"
+            behavior="menu"
+            v-model="selectedUserColors"
+            :options="userColors"
+            multiple
+            dense options-dense outlined
+            emit-value map-options
+          >
+            <template v-slot:option="{ itemProps, itemEvents, opt, selected, toggleOption }">
+              <q-item v-bind="itemProps" v-on="itemEvents">
+                <q-item-section>
+                  <q-item-label v-html="opt.label" ></q-item-label>
+                </q-item-section>
+                <q-item-section side>
+                  <q-toggle :value="selected" @input="toggleOption(opt)" />
+                </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
+
+          <q-select
+            label="simple + use-input; menu"
+            use-input
+            v-model="selectedUserControl"
+            :options="userControl"
+            dense options-dense outlined
+            behavior="menu"
+          />
+
+          <q-select
+            label="multiple + use-input; menu"
+            use-input
+            v-model="selectedUserColors"
+            :options="userColors"
+            multiple
+            dense options-dense outlined
+            emit-value map-options
+            behavior="menu"
+          >
+            <template v-slot:option="{ itemProps, itemEvents, opt, selected, toggleOption }">
+              <q-item v-bind="itemProps" v-on="itemEvents">
+                <q-item-section>
+                  <q-item-label v-html="opt.label" ></q-item-label>
+                </q-item-section>
+                <q-item-section side>
+                  <q-toggle :value="selected" @input="toggleOption(opt)" />
+                </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
+
+          <q-select label="delayed filter" rounded outlined :options="quizList" v-model="quiz" @filter="getQuiz" behavior="menu">
+            <template v-slot:selected>
+              <div class="text-body1 text-black">{{ quiz.label }}</div>
+            </template>
+          </q-select>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
+
+    <div class="column q-gutter-y-md" style="max-width: 300px">
+      <q-select
+        v-model="selectedUserControl"
+        :options="userControl"
+        outlined
+        popup-content-class="test-select__popup--as-menu"
+        behavior="menu"
+        label="Single - Open as menu with styling"
+      />
+
+      <q-select
+        v-model="selectedUserControl"
+        :options="userControl"
+        outlined
+        dialog-content-class="test-select__dialog--as-dialog"
+        popup-content-class="test-select__popup--as-dialog"
+        behavior="dialog"
+        label="Single - Open as dialog with styling"
+      />
+
+      <q-select
+        v-model="selectedUserControls"
+        :options="userControl"
+        outlined
+        multiple
+        popup-content-class="test-select__popup--as-menu"
+        behavior="menu"
+        label="Multiple - Open as menu with styling"
+      />
+
+      <q-select
+        v-model="selectedUserControls"
+        :options="userControl"
+        outlined
+        multiple
+        dialog-content-class="test-select__dialog--as-dialog"
+        popup-content-class="test-select__popup--as-dialog"
+        behavior="dialog"
+        label="Multiple - Open as dialog with styling"
+      />
+    </div>
   </div>
 </template>
 
 <script>
-/* eslint-disable */
 const quizOptions = [
   { label: 'Google', value: 1 },
   { label: 'Facebook', value: 2 }
@@ -258,6 +299,7 @@ export default {
     return {
       dialog: false,
       selectedUserControl: null,
+      selectedUserControls: null,
       userControl: [' Joypad', 'Keyboard', 'Mouse'],
       selectedUserColors: [],
       userColors: [
@@ -300,4 +342,18 @@ export default {
 </script>
 
 <style lang="sass">
+.test-select
+  &__dialog
+    &--as-dialog
+      .q-dialog__backdrop
+        background: rgba($primary, 0.4)
+
+  &__popup
+    &--as-dialog
+      outline: 3px solid $accent
+      outline-offset: -3px
+
+    &--as-menu
+      box-shadow: 0 0 2px 2px $accent
+
 </style>
diff --git a/ui/src/components/field/QField.js b/ui/src/components/field/QField.js
index a4accfae1dee..252b6a2de33e 100644
--- a/ui/src/components/field/QField.js
+++ b/ui/src/components/field/QField.js
@@ -473,6 +473,7 @@ export default Vue.extend({
     },
 
     __onControlFocusin (e) {
+      clearTimeout(this.focusoutTimer)
       if (this.editable === true && this.focused === false) {
         this.focused = true
         this.$emit('focus', e)
diff --git a/ui/src/components/select/QSelect.js b/ui/src/components/select/QSelect.js
index 91068697f912..7508381cd3b0 100755
--- a/ui/src/components/select/QSelect.js
+++ b/ui/src/components/select/QSelect.js
@@ -15,7 +15,7 @@ import { isDeepEqual } from '../../utils/is.js'
 import { stop, prevent, stopAndPrevent } from '../../utils/event.js'
 import { normalizeToInterval } from '../../utils/format.js'
 import { shouldIgnoreKey, isKeyCode } from '../../utils/key-composition.js'
-import { mergeSlot } from '../../utils/slot.js'
+import { slot, mergeSlot } from '../../utils/slot.js'
 import cache from '../../utils/cache.js'
 
 import { FormFieldMixin } from '../../mixins/form.js'
@@ -79,6 +79,11 @@ export default Vue.extend({
     popupContentClass: String,
     popupContentStyle: [String, Array, Object],
 
+    dialogContentClass: [String, Array, Object],
+    dialogContentStyle: [String, Array, Object],
+
+    dialogCloseIcon: [Boolean, String],
+
     useInput: Boolean,
     useChips: Boolean,
 
@@ -330,6 +335,18 @@ export default Vue.extend({
         : this.$q.iconSet.arrow.dropdown
     },
 
+    computedDialogCloseIcon () {
+      if (this.dialogCloseIcon === true) {
+        return this.$q.lang.rtl === true
+          ? this.$q.iconSet.chevron.right
+          : this.$q.iconSet.chevron.left
+      }
+
+      return typeof this.dialogCloseIcon === 'string' && this.dialogCloseIcon.length > 0
+        ? this.dialogCloseIcon
+        : false
+    },
+
     squaredMenu () {
       return this.optionsCover === false &&
         this.outlined !== true &&
@@ -385,6 +402,16 @@ export default Vue.extend({
       }
     },
 
+    closeButtonEvents () {
+      return {
+        click: e => {
+          stopAndPrevent(e)
+          document.activeElement.blur()
+          this.hidePopup()
+        }
+      }
+    },
+
     virtualScrollItemSizeComputed () {
       return this.virtualScrollItemSize === void 0
         ? (this.dense === true ? 24 : 48)
@@ -467,6 +494,9 @@ export default Vue.extend({
             true
           )
 
+          this.dialogFieldFocused = false
+          document.activeElement.blur()
+
           this.hidePopup()
         }
 
@@ -570,8 +600,12 @@ export default Vue.extend({
       return this.innerOptionsValue.find(v => isDeepEqual(v, val)) !== void 0
     },
 
-    __selectInputText () {
-      if (this.useInput === true && this.$refs.target !== void 0) {
+    __selectInputText (ev) {
+      if (
+        this.useInput === true &&
+        this.$refs.target !== void 0 &&
+        (ev === void 0 || (this.$refs.target === ev.target && ev.target.value === this.selectedString))
+      ) {
         this.$refs.target.select()
       }
     },
@@ -914,15 +948,16 @@ export default Vue.extend({
         child.push(this.__getInput(h, fromDialog, isTarget))
       }
       // there can be only one (when dialog is opened the control in dialog should be target)
-      else if (this.editable === true && isTarget === true) {
+      else if (this.editable === true) {
         child.push(
-          h('div', {
-            ref: 'target',
+          h('input', {
+            ref: isTarget === true ? 'target' : void 0,
             key: 'd_t',
-            staticClass: 'no-outline',
+            staticClass: 'q-field__focus-target',
             attrs: {
-              id: this.targetUid,
-              tabindex: this.tabindex
+              id: isTarget === true ? this.targetUid : void 0,
+              tabindex: this.tabindex,
+              readonly: true
             },
             on: cache(this, 'f-tget', {
               keydown: this.__onTargetKeydown,
@@ -932,7 +967,7 @@ export default Vue.extend({
           })
         )
 
-        if (typeof this.autocomplete === 'string' && this.autocomplete.length > 0) {
+        if (isTarget === true && typeof this.autocomplete === 'string' && this.autocomplete.length > 0) {
           child.push(
             h('input', {
               staticClass: 'q-select__autocomplete-input no-outline',
@@ -1010,6 +1045,25 @@ export default Vue.extend({
       return mergeSlot(options, this, 'after-options')
     },
 
+    __prependDialogCloseIcon (h) {
+      if (
+        this.computedDialogCloseIcon === false ||
+        this.hasDialog !== true ||
+        this.dialog !== true
+      ) {
+        return slot(this, 'prepend')
+      }
+
+      return mergeSlot([
+        h(QIcon, {
+          staticClass: 'q-select__close-icon q-field__focusable-action',
+          props: { tag: 'button', name: this.computedDialogCloseIcon },
+          attrs: { tabindex: 0, type: 'button' },
+          on: this.closeButtonEvents
+        })
+      ], this, 'prepend')
+    },
+
     __getInnerAppend (h) {
       return this.loading !== true && this.innerLoadingIndicator !== true && this.hideDropdownIcon !== true
         ? [
@@ -1033,7 +1087,7 @@ export default Vue.extend({
           // required for Android in order to show ENTER key when in form
           type: 'search',
           ...this.qAttrs,
-          id: this.targetUid,
+          id: isTarget === true ? this.targetUid : void 0,
           maxlength: this.maxlength, // this is converted to prop by QField
           tabindex: this.tabindex,
           autocomplete: this.autocomplete,
@@ -1059,13 +1113,21 @@ export default Vue.extend({
     },
 
     __onInput (e) {
-      clearTimeout(this.inputTimer)
+      if (!e || !e.target || e.target.composing === true) {
+        return
+      }
 
-      if (e && e.target && e.target.composing === true) {
+      const val = typeof e.data === 'string' && e.isComposing === true && e.data.length + 1 === e.target.value.length
+        ? e.data
+        : e.target.value
+
+      if (this.inputValue === val) {
         return
       }
 
-      this.__setInputValue(e.target.value || '')
+      clearTimeout(this.inputTimer)
+
+      this.__setInputValue(val)
       // mark it here as user input so that if updateInputValue is called
       // before filter is called the indicator is reset
       this.userInputValue = true
@@ -1159,6 +1221,7 @@ export default Vue.extend({
                 }
                 else {
                   this.menu = true
+                  this.hasDialog === true && (this.dialog = true)
                 }
               }
 
@@ -1269,7 +1332,6 @@ export default Vue.extend({
       stop(e)
       this.$refs.target !== void 0 && this.$refs.target.focus()
       this.dialogFieldFocused = true
-      window.scrollTo(window.pageXOffset || window.scrollX || document.body.scrollLeft || 0, 0)
     },
 
     __onDialogFieldBlur (e) {
@@ -1301,6 +1363,7 @@ export default Vue.extend({
           scopedSlots: {
             ...this.$scopedSlots,
             rawControl: () => this.__getControl(h, true),
+            prepend: () => this.__prependDialogCloseIcon(h),
             before: void 0,
             after: void 0
           }
@@ -1333,6 +1396,8 @@ export default Vue.extend({
         props: {
           value: this.dialog,
           position: this.useInput === true ? 'top' : void 0,
+          contentClass: this.dialogContentClass,
+          contentStyle: this.dialogContentStyle,
           transitionShow: this.transitionShowComputed,
           transitionHide: this.transitionHide
         },
@@ -1351,7 +1416,9 @@ export default Vue.extend({
     },
 
     __onDialogBeforeHide () {
-      this.$refs.dialog.__refocusTarget = this.$el.querySelector('.q-field__native > [tabindex]:last-child')
+      this.$refs.dialog.__refocusTarget = this.$q.platform.is.desktop === true
+        ? this.$el.querySelector('.q-field__native > [tabindex]:last-child')
+        : void 0
       this.focused = false
     },
 
diff --git a/ui/src/components/select/QSelect.json b/ui/src/components/select/QSelect.json
index f0efc50ed5fd..efe43168a50b 100644
--- a/ui/src/components/select/QSelect.json
+++ b/ui/src/components/select/QSelect.json
@@ -186,11 +186,43 @@
       "desc": "Style definitions to be attributed to the popup content",
       "examples": [
         "background-color: #ff0000",
-        ":content-style=\"{ backgroundColor: '#ff0000' }\""
+        ":popup-content-style=\"{ backgroundColor: '#ff0000' }\""
       ],
       "category": "style"
     },
 
+    "dialog-content-class": {
+      "type": [ "Array", "String", "Object" ],
+      "desc": "Class definitions to be attributed to the dialog external element",
+      "examples": [
+        "my-special-class"
+      ],
+      "category": "style",
+      "addedIn": "v1.15.5"
+    },
+
+    "dialog-content-style": {
+      "type": [ "Array", "String", "Object" ],
+      "desc": "Style definitions to be attributed to the dialog external element",
+      "examples": [
+        "background-color: #ff0000",
+        ":dialog-content-style=\"{ backgroundColor: '#ff0000' }\""
+      ],
+      "category": "style",
+      "addedIn": "v1.15.5"
+    },
+
+    "dialog-close-icon": {
+      "type": [ "Boolean", "String" ],
+      "desc": "Style definitions to be attributed to the dialog external element",
+      "examples": [
+        "dialog-close-icon",
+        "dialog-close-icon=\"close\""
+      ],
+      "category": "behavior|style",
+      "addedIn": "v1.15.5"
+    },
+
     "use-input": {
       "type": "Boolean",
       "desc": "Use an input tag where users can type",
diff --git a/ui/src/components/select/QSelect.sass b/ui/src/components/select/QSelect.sass
index 7f93a47fe269..794790f7377c 100644
--- a/ui/src/components/select/QSelect.sass
+++ b/ui/src/components/select/QSelect.sass
@@ -33,6 +33,14 @@
     &--padding
       padding-left: 4px
 
+  .q-field__focus-target
+    outline: 0 !important
+    width: 0
+    height: 0
+    padding: 0
+    border: 0
+    opacity: 0
+
   &__autocomplete-input
     width: 0
     height: 0
@@ -44,6 +52,12 @@
     cursor: pointer
     transition: transform .28s
 
+  &__close-icon
+    cursor: pointer
+
+    &:not(:last-child)
+      margin-right: 12px
+
   &.q-field--readonly
     .q-field__control, .q-select__dropdown-icon
       cursor: default
diff --git a/ui/src/components/select/QSelect.styl b/ui/src/components/select/QSelect.styl
index 7f93a47fe269..794790f7377c 100644
--- a/ui/src/components/select/QSelect.styl
+++ b/ui/src/components/select/QSelect.styl
@@ -33,6 +33,14 @@
     &--padding
       padding-left: 4px
 
+  .q-field__focus-target
+    outline: 0 !important
+    width: 0
+    height: 0
+    padding: 0
+    border: 0
+    opacity: 0
+
   &__autocomplete-input
     width: 0
     height: 0
@@ -44,6 +52,12 @@
     cursor: pointer
     transition: transform .28s
 
+  &__close-icon
+    cursor: pointer
+
+    &:not(:last-child)
+      margin-right: 12px
+
   &.q-field--readonly
     .q-field__control, .q-select__dropdown-icon
       cursor: default