feat(QDialog/QForm): improve selection of autofocused element; refocus (

#14737) * feat(QDialog/QForm): improve selection of autofocused element; refocus same element on click outside * chore: documents shake param in json
quasarframework · Oct 28, 2022 · 18fe5fe · 18fe5fe
1 parent b01c6f0
commit 18fe5fe
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 8 deletions.
diff --git a/ui/src/components/dialog/QDialog.js b/ui/src/components/dialog/QDialog.js
@@ -239,13 +239,22 @@ export default createComponent({
           return
         }
 
-        node = node.querySelector(selector || '[autofocus], [data-autofocus]') || node
+        node = (selector !== '' ? node.querySelector(selector) : null)
+          || node.querySelector('[autofocus][tabindex], [data-autofocus][tabindex]')
+          || node.querySelector('[autofocus] [tabindex], [data-autofocus] [tabindex]')
+          || node.querySelector('[autofocus], [data-autofocus]')
+          || node
         node.focus({ preventScroll: true })
       })
     }
 
-    function shake () {
-      focus()
+    function shake (refocusTarget) {
+      if (refocusTarget && typeof refocusTarget.focus === 'function') {
+        refocusTarget.focus()
+      }
+      else {
+        focus()
+      }
       emit('shake')
 
       const node = innerRef.value
@@ -326,7 +335,7 @@ export default createComponent({
         hide(e)
       }
       else if (props.noShake !== true) {
-        shake()
+        shake(e.relatedTarget)
       }
     }
 
@@ -369,7 +378,8 @@ export default createComponent({
               class: 'q-dialog__backdrop fixed-full',
               style: transitionStyle.value,
               'aria-hidden': 'true',
-              onMousedown: onBackdropClick
+              tabindex: -1,
+              onFocusin: onBackdropClick
             })
             : null
         )),

diff --git a/ui/src/components/dialog/QDialog.json b/ui/src/components/dialog/QDialog.json
@@ -126,7 +126,18 @@
     },
 
     "shake": {
-      "desc": "Shakes dialog"
+      "desc": "Shakes dialog",
+      "shake": {
+      "desc": "Shakes dialog",
+      "params": {
+        "focusTarget": {
+          "type": "Element",
+          "desc": "Optional Element to be focused after shake",
+          "examples": [ "document.getElementById('example')" ],
+          "addedIn": "v2.11"
+        }
+      }
+    }
     }
   },
 

diff --git a/ui/src/components/form/QForm.js b/ui/src/components/form/QForm.js
@@ -138,7 +138,9 @@ export default createComponent({
       addFocusFn(() => {
         if (rootRef.value === null) { return }
 
-        const target = rootRef.value.querySelector('[autofocus], [data-autofocus]')
+        const target = rootRef.value.querySelector('[autofocus][tabindex], [data-autofocus][tabindex]')
+          || rootRef.value.querySelector('[autofocus] [tabindex], [data-autofocus] [tabindex]')
+          || rootRef.value.querySelector('[autofocus], [data-autofocus]')
           || Array.prototype.find.call(rootRef.value.querySelectorAll('[tabindex]'), el => el.tabIndex > -1)
 
         target !== null && target !== void 0 && target.focus({ preventScroll: true })

diff --git a/ui/src/components/menu/QMenu.js b/ui/src/components/menu/QMenu.js
@@ -180,7 +180,10 @@ export default createComponent({
         let node = innerRef.value
 
         if (node && node.contains(document.activeElement) !== true) {
-          node = node.querySelector('[autofocus], [data-autofocus]') || node
+          node = node.querySelector('[autofocus][tabindex], [data-autofocus][tabindex]')
+            || node.querySelector('[autofocus] [tabindex], [data-autofocus] [tabindex]')
+            || node.querySelector('[autofocus], [data-autofocus]')
+            || node
           node.focus({ preventScroll: true })
         }
       })