Quasar: [BUG] FastClick conflict with Vue2-google-maps

Created on 1 Aug 2018 · 2Comments · Source: quasarframework/quasar

Hey guys,

I'm having a problem with gmap-autocomplete, where I cannot click on any of the dropdown entries. This error is only apparent on iOS.
I've looked into the issue and found that the reason is because the framework (client-entry.js) uses FastClick; specifically at this point:

  document.addEventListener('DOMContentLoaded', () => {
    FastClick.attach(document.body)
  }, false)

I've read that by disabling FastClick on any divs within the gmap-autocomplete container, specifically, div classes beginning with 'pac-*', can solve this issue.
At this point I can't find a verified solution to this but I will update this entry when I am able to find a working solution.

Cheers.

[Edit]
One possible solution is to only attach FastClick to DOM elements which should respond quickly.
https://github.com/matthew-andrews/selective-fastclick

[Edit2]
This solution fixes the bug specifically for google maps autocomplete by using Fastclick on all DOM elements EXCEPT any that are 'pac-item' (individual autocomplete items).
https://github.com/ftlabs/fastclick/pull/347#issuecomment-187906439

Source

nicholaszuccarelli

Most helpful comment

Found a solution which doesn't require editing the source code!
Create a new plugin called "fastclick" (or whatever you want to call it), and add the following code into the file:

// import something here
import { Platform } from 'quasar'
import FastClick from 'fastclick'

// leave the export, even if you don't use it
export default ({ app, router, Vue }) => {
  const needsFastClick = Platform.is.cordova && Platform.is.ios
  if (needsFastClick) {
    document.addEventListener('DOMContentLoaded', () => {
      const needsClick = FastClick.prototype.needsClick
      FastClick.prototype.needsClick = function (target) {
        if ((target.className || '').indexOf('pac-item') > -1) {
          return true
        }
        else if ((target.parentNode.className || '').indexOf('pac-item') > -1) {
          return true
        }
        else {
          return needsClick.apply(this, arguments)
        }
      }
      FastClick.attach(document.body)
    }, false)
  }
}

Fixes the issue with FastClick on iOS! :)

nicholaszuccarelli on 1 Aug 2018

👍2

All 2 comments

Found a solution which doesn't require editing the source code!
Create a new plugin called "fastclick" (or whatever you want to call it), and add the following code into the file:

// import something here
import { Platform } from 'quasar'
import FastClick from 'fastclick'

// leave the export, even if you don't use it
export default ({ app, router, Vue }) => {
  const needsFastClick = Platform.is.cordova && Platform.is.ios
  if (needsFastClick) {
    document.addEventListener('DOMContentLoaded', () => {
      const needsClick = FastClick.prototype.needsClick
      FastClick.prototype.needsClick = function (target) {
        if ((target.className || '').indexOf('pac-item') > -1) {
          return true
        }
        else if ((target.parentNode.className || '').indexOf('pac-item') > -1) {
          return true
        }
        else {
          return needsClick.apply(this, arguments)
        }
      }
      FastClick.attach(document.body)
    }, false)
  }
}

Fixes the issue with FastClick on iOS! :)

nicholaszuccarelli on 1 Aug 2018

👍2

Wish iOS would not require FastClick in the first place. But anyway, your approach is good.