fix(QDialog): iOS QDialog with keyboard, fix QSelect refocus after close

ref quasarframework#4264, close quasarframework#5351
pdanpdan · Oct 23, 2019 · 82f3ca7 · 82f3ca7
1 parent 4cee9c3
commit 82f3ca7
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 22 deletions.
diff --git a/ui/src/components/dialog/QDialog.js b/ui/src/components/dialog/QDialog.js
@@ -8,7 +8,7 @@ import PreventScrollMixin from '../../mixins/prevent-scroll.js'
 import { childHasFocus } from '../../utils/dom.js'
 import EscapeKey from '../../utils/escape-key.js'
 import slot from '../../utils/slot.js'
-import { create, stop } from '../../utils/event.js'
+import { create, stop, stopAndPrevent } from '../../utils/event.js'
 
 let maximizedModals = 0
 
@@ -65,7 +65,8 @@ export default Vue.extend({
 
   data () {
     return {
-      transitionState: this.showing
+      transitionState: this.showing,
+      iosKeyboard: false
     }
   },
 
@@ -97,7 +98,8 @@ export default Vue.extend({
         `q-dialog__inner--${this.position} ${positionClass[this.position]}` +
         (this.fullWidth === true ? ' q-dialog__inner--fullwidth' : '') +
         (this.fullHeight === true ? ' q-dialog__inner--fullheight' : '') +
-        (this.square === true ? ' q-dialog__inner--square' : '')
+        (this.square === true ? ' q-dialog__inner--square' : '') +
+        (this.iosKeyboard === true ? ' q-dialog__inner--ios-kbd' : '')
     },
 
     transitionShowComputed () {
@@ -191,14 +193,6 @@ export default Vue.extend({
       }
 
       this.__setTimeout(() => {
-        if (this.$q.platform.is.ios === true && document.activeElement) {
-          const { top } = document.activeElement.getBoundingClientRect()
-          if (top < 0) {
-            document.scrollingElement.scrollTop += top - window.innerHeight / 2
-          }
-          document.activeElement.scrollIntoView()
-        }
-
         this.$emit('show', evt)
       }, 300)
     },
@@ -209,6 +203,7 @@ export default Vue.extend({
 
       // check null for IE
       if (this.__refocusTarget !== void 0 && this.__refocusTarget !== null) {
+        console.log(this.__refocusTarget)
         this.__refocusTarget.focus()
       }
 
@@ -246,9 +241,9 @@ export default Vue.extend({
     },
 
     __preventFocusout (state) {
-      if (this.$q.platform.is.desktop === true) {
+      if (this.$q.platform.is.desktop === true || this.$q.platform.is.ios === true) {
         const action = `${state === true ? 'add' : 'remove'}EventListener`
-        document.body[action]('focusin', this.__onFocusChange)
+        document.body[action]('focusin', this.__onFocusChange, true)
       }
     },
 
@@ -275,6 +270,22 @@ export default Vue.extend({
       ) {
         this.focus()
       }
+
+      if (this.$q.platform.is.ios === true) {
+        const isField = ['input', 'textarea'].indexOf(e.target.nodeName.toLowerCase()) > -1
+
+        if (isField === true || e.path.some(el => el.hasAttribute !== void 0 && el.hasAttribute('contenteditable')) === true) {
+          this.iosKeyboard = true
+          if (isField === true) {
+            setTimeout(() => {
+              e.target !== void 0 && e.target.scrollIntoViewIfNeeded(false)
+            }, 300)
+          }
+        }
+        else {
+          this.iosKeyboard = false
+        }
+      }
     },
 
     __renderPortal (h) {
@@ -302,6 +313,7 @@ export default Vue.extend({
           h('div', {
             staticClass: 'q-dialog__backdrop fixed-full',
             on: {
+              touchmove: stopAndPrevent, // prevent iOS page scroll
               click: this.__onBackdropClick
             }
           })

diff --git a/ui/src/components/dialog/QDialog.sass b/ui/src/components/dialog/QDialog.sass
@@ -79,6 +79,18 @@ body.platform-ios, body.platform-android:not(.native-mobile)
   .q-dialog__inner--minimized > div
     max-height: calc(100vh - 108px)
 
+body.platform-ios
+  .q-dialog__backdrop
+    top: -50vh
+    bottom: -50vh
+
+  .q-dialog__inner--ios-kbd > div
+    margin-bottom: 37vh
+    max-height: 50vh
+
+  &.native-mobile .q-dialog__inner--ios-kbd > div
+    max-height: 47vh
+
 body.q-ios-padding .q-dialog__inner
   padding-top: $ios-statusbar-height !important
   padding-top: env(safe-area-inset-top) !important

diff --git a/ui/src/components/dialog/QDialog.styl b/ui/src/components/dialog/QDialog.styl
@@ -79,6 +79,18 @@ body.platform-ios, body.platform-android:not(.native-mobile)
   .q-dialog__inner--minimized > div
     max-height calc(100vh - 108px)
 
+body.platform-ios
+  .q-dialog__backdrop
+    top -50vh
+    bottom -50vh
+
+  .q-dialog__inner--ios-kbd > div
+    margin-bottom 37vh
+    max-height 50vh
+
+  &.native-mobile .q-dialog__inner--ios-kbd > div
+    max-height 47vh
+
 body.q-ios-padding .q-dialog__inner
   padding-top $ios-statusbar-height !important
   padding-top env(safe-area-inset-top) !important

diff --git a/ui/src/components/select/QSelect.js b/ui/src/components/select/QSelect.js
@@ -333,6 +333,7 @@ export default Vue.extend({
           true
         )
 
+        this.$refs.target.focus()
         this.hidePopup()
 
         if (isDeepEqual(this.__getOptionValue(this.value), optValue) !== true) {
@@ -1045,9 +1046,9 @@ export default Vue.extend({
       )
 
       return h(QDialog, {
+        ref: 'dialog',
         props: {
           value: this.dialog,
-          noRefocus: true,
           position: this.useInput === true ? 'top' : void 0,
           transitionShow: this.transitionShowComputed,
           transitionHide: this.transitionHide
@@ -1067,6 +1068,7 @@ export default Vue.extend({
     },
 
     __onDialogBeforeHide () {
+      this.$refs.dialog.__refocusTarget = this.$el.querySelector('.q-field__native > [tabindex]:last-child')
       this.focused = false
     },
 
@@ -1094,11 +1096,6 @@ export default Vue.extend({
 
       if (this.menu === true) {
         this.menu = false
-
-        // allow $refs.target to move to the field (when dialog)
-        this.$nextTick(() => {
-          this.$refs.target !== void 0 && this.$refs.target.focus()
-        })
       }
 
       if (this.focused === false) {

diff --git a/ui/src/mixins/prevent-scroll.js b/ui/src/mixins/prevent-scroll.js
@@ -50,9 +50,7 @@ function shouldPreventScroll (e) {
 
 function onAppleScroll (e) {
   if (e.target === document) {
-    // required, otherwise iOS blocks further scrolling
-    // until the mobile scrollbar dissapears
-    document.scrollingElement.scrollTop = document.scrollingElement.scrollTop // eslint-disable-line
+    document.scrollingElement.scrollTop = 0
   }
 }
 
@@ -84,6 +82,7 @@ function apply (action) {
 
   if (action === 'remove') {
     Platform.is.ios === true && window.removeEventListener('scroll', onAppleScroll, listenOpts.passiveCapture)
+    body.classList.remove('q-body--prevent-scroll')
 
     body.classList.remove('q-body--prevent-scroll')
     body.classList.remove('q-body--force-scrollbar')