From 39d2d60fc8cc9b68dd355ade8846f5e75f1aaf07 Mon Sep 17 00:00:00 2001
From: Dan Popescu <pdan.popescu@gmail.com>
Date: Sat, 5 Jun 2021 12:37:50 +0300
Subject: [PATCH] feat(QSelect): dialog - add close icon; add class and style;
 open when typing in field; fix focus on field #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   |  65 ++-
 ui/dev/src/pages/form/select-part-8.vue       | 496 ++++++++++--------
 ui/src/components/select/QSelect.js           |  70 ++-
 ui/src/components/select/QSelect.json         |  32 ++
 ui/src/components/select/QSelect.sass         |   6 +
 ui/src/components/select/QSelect.styl         |   6 +
 8 files changed, 567 insertions(+), 227 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 ee2554123d5e..f10583d88b12 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..d483e2038f20 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,6 +554,20 @@ 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'
     }
   },
 
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/select/QSelect.js b/ui/src/components/select/QSelect.js
index cfbfc73ed75e..d5e25fdd36b0 100755
--- a/ui/src/components/select/QSelect.js
+++ b/ui/src/components/select/QSelect.js
@@ -15,9 +15,10 @@ 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/private/key-composition.js'
-import { mergeSlot } from '../../utils/private/slot.js'
+import { slot, mergeSlot } from '../../utils/private/slot.js'
 import cache from '../../utils/private/cache.js'
 
+import { iconAsButton } from '../../mixins/attrs.js'
 import { FormFieldMixin } from '../../mixins/form.js'
 import VirtualScroll from '../../mixins/virtual-scroll.js'
 import CompositionMixin from '../../mixins/composition.js'
@@ -81,6 +82,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,
 
@@ -357,6 +363,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 &&
@@ -416,6 +434,19 @@ export default Vue.extend({
       return on
     },
 
+    closeButtonEvents () {
+      const click = ev => {
+        stopAndPrevent(ev)
+        this.hidePopup()
+      }
+      return {
+        click,
+        keyup: ev => {
+          ev.keyCode === 13 && click(ev)
+        }
+      }
+    },
+
     virtualScrollItemSizeComputed () {
       return this.virtualScrollItemSize === void 0
         ? (this.optionsDense === true ? 24 : 48)
@@ -1093,6 +1124,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: iconAsButton,
+          on: this.closeButtonEvents
+        })
+      ], this, 'prepend')
+    },
+
     __getInnerAppend (h) {
       return this.loading !== true && this.innerLoadingIndicator !== true && this.hideDropdownIcon !== true
         ? [
@@ -1140,13 +1190,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.qComposing === 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
@@ -1344,7 +1402,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) {
@@ -1376,6 +1433,7 @@ export default Vue.extend({
           scopedSlots: {
             ...this.$scopedSlots,
             rawControl: () => this.__getControl(h, true),
+            prepend: () => this.__prependDialogCloseIcon(h),
             before: void 0,
             after: void 0
           }
@@ -1404,6 +1462,8 @@ export default Vue.extend({
           value: this.dialog,
           dark: this.isOptionsDark,
           position: this.useInput === true ? 'top' : void 0,
+          contentClass: this.dialogContentClass,
+          contentStyle: this.dialogContentStyle,
           transitionShow: this.transitionShowComputed,
           transitionHide: this.transitionHide
         },
diff --git a/ui/src/components/select/QSelect.json b/ui/src/components/select/QSelect.json
index 230f4efa98cc..871913f60dc5 100644
--- a/ui/src/components/select/QSelect.json
+++ b/ui/src/components/select/QSelect.json
@@ -191,6 +191,38 @@
       "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 a003977a59f2..8087a4fb1cf2 100644
--- a/ui/src/components/select/QSelect.sass
+++ b/ui/src/components/select/QSelect.sass
@@ -48,6 +48,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 a003977a59f2..8087a4fb1cf2 100644
--- a/ui/src/components/select/QSelect.styl
+++ b/ui/src/components/select/QSelect.styl
@@ -48,6 +48,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