fix(QField): Set focused status on fields with autoselect from SSR (quasarframework#5796)

Author: pdanpdan

ui/src/components/dialog-plugin/DialogPlugin.js

@@ -161,14 +161,14 @@ export default Vue.extend({
       if (this.cancel) {
         child.push(h(QBtn, {
           props: this.cancelProps,
-          attrs: { 'data-autofocus': this.focus === 'cancel' && !this.hasForm },
+          attrs: { autofocus: this.focus === 'cancel' && !this.hasForm },
           on: cache(this, 'cancel', { click: this.onCancel })
         }))
       }
       if (this.ok) {
         child.push(h(QBtn, {
           props: this.okProps,
-          attrs: { 'data-autofocus': this.focus === 'ok' && !this.hasForm },
+          attrs: { autofocus: this.focus === 'ok' && !this.hasForm },
           on: cache(this, 'ok', { click: this.onOk })
         }))
       }

ui/src/components/dialog/QDialog.js

@@ -134,7 +134,7 @@ export default Vue.extend({
         return
       }
 
-      node = node.querySelector('[autofocus], [data-autofocus]') || node
+      node = node.querySelector('[autofocus]') || node
       node.focus()
     },
 

ui/src/components/field/QField.js

@@ -219,7 +219,13 @@ export default Vue.extend({
       const el = document.activeElement
       let target = this.$refs.target
       // IE can have null document.activeElement
-      if (target !== void 0 && (el === null || el.id !== this.targetUid)) {
+      if (el !== null && el.id === this.targetUid) {
+        if (this.editable === true && this.focused === false) {
+          this.focused = true
+          this.$emit('focus', { type: 'focusin', target: el })
+        }
+      }
+      else if (target !== void 0) {
         target.hasAttribute('tabindex') === true || (target = target.querySelector('[tabindex]'))
         target !== null && target !== el && target.focus()
       }
@@ -315,7 +321,7 @@ export default Vue.extend({
             staticClass: 'q-field__native row',
             attrs: {
               ...this.$attrs,
-              'data-autofocus': this.autofocus
+              autofocus: this.autofocus
             }
           }, this.$scopedSlots.control(this.controlSlotScope))
         )

ui/src/components/form/QForm.js

@@ -129,7 +129,7 @@ export default Vue.extend({
     },
 
     focus () {
-      const target = this.$el.querySelector('[autofocus], [data-autofocus]') ||
+      const target = this.$el.querySelector('[autofocus]') ||
         [].find.call(this.$el.querySelectorAll('[tabindex]'), el => el.tabIndex > -1)
 
       target !== null && target !== void 0 && target.focus()

ui/src/components/input/QInput.js

@@ -92,14 +92,18 @@ export default Vue.extend({
 
   methods: {
     focus () {
-      const el = document.activeElement
-      if (
-        this.$refs.input !== void 0 &&
-        this.$refs.input !== el &&
-        // IE can have null document.activeElement
-        (el === null || el.id !== this.targetUid)
-      ) {
-        this.$refs.input.focus()
+      const
+        el = document.activeElement,
+        target = this.$refs.input
+      // IE can have null document.activeElement
+      if (el !== null && el.id === this.targetUid) {
+        if (this.editable === true && this.focused === false) {
+          this.focused = true
+          this.$emit('focus', { type: 'focusin', target: el })
+        }
+      }
+      else if (target !== void 0) {
+        target.focus()
       }
     },
 
@@ -234,7 +238,7 @@ export default Vue.extend({
 
       const attrs = {
         tabindex: 0,
-        'data-autofocus': this.autofocus,
+        autofocus: this.autofocus,
         rows: this.type === 'textarea' ? 6 : void 0,
         'aria-label': this.label,
         ...this.$attrs,

ui/src/components/menu/QMenu.js

@@ -100,7 +100,7 @@ export default Vue.extend({
         : void 0
 
       if (node !== void 0 && node.contains(document.activeElement) !== true) {
-        node = node.querySelector('[autofocus], [data-autofocus]') || node
+        node = node.querySelector('[autofocus]') || node
         node.focus()
       }
     },

ui/src/components/select/QSelect.js

@@ -815,7 +815,7 @@ export default Vue.extend({
           type: 'search',
           ...this.$attrs,
           tabindex: this.tabindex,
-          'data-autofocus': fromDialog === true ? false : this.autofocus,
+          autofocus: fromDialog === true ? false : this.autofocus,
           id: this.targetUid,
           disabled: this.disable === true,
           readonly: this.readonly === true