[SOLVED] Cant select from an a select/dropdown menu


#1

Hey team,

I am using The Algoria Places Autocomplete to do places autocompletion… It works quite well, As I type, I get suggestions but I can’t select it… in chrome, when in full app screen, I can choose very well but as long as i inspect elements to see how it will look on a mobile screen, I cant choose anything, the moment I try, It disappears…

here is my card

<template>
 ...    
<div class="card-content">
        <div class="list media-list">
       <ul>
          <li class="item-content item-input">
            <input type="search" id="address" class="text-color-black" placeholder="Where Are You Located?"/>
         </li>
      </ul>
        </div>
    </div>
      </div>
     ...
</template>

my js:

<script>
return {
  
  data: function () {
      // Must return an object
      return {
       lat: null,
       lng: null,
      
              ....
      }
    },
methods: { 
    placesAutocomplete: function() {

        var self = this;
        var app = self.$app;

        var placesAutocomplete = places({
          appId: 'APP_ID',
          apiKey: 'API_KEY',
          container: "#address",
        });

        placesAutocomplete.on('change', function(e) {
         
                   self.$setState({
                     lat: e.suggestion.latlng.lat
                   });

                   self.$setState({
                     lng: e.suggestion.latlng.lng
                   });

        });

        placesAutocomplete.on('clear', function() {

          self.$setState({
           lat: null
           });

         self.$setState({
           lng: null
         });
        });
      }
  },
      on: {
      pageInit: function(e, page) {

        var self = this;
        var app = self.$app;
                                       
        var loadExternalScript = self.$root.externalScriptLoader(); //promise to load lib

            loadExternalScript.urls(['https://cdnjs.cloudflare.com/ajax/libs/places.js/1.13.0/places.js'])
               .then(() => {
                self.placesAutocomplete();
            });
       },
    },
....
}
</script>

Here is a sample…


#2

Hi, try by disabling fast clicks:

var app = new Framework7({
  touch: {
    // Disable fast clicks
    fastClicks: false,
  }
});

or

<a href="#">Fast Click</a>
<a href="#" class="no-fastclick">Usual Click</a>

https://framework7.io/docs/fast-clicks.html


#3

@pvtallulah, thanks ,actually, I added a no-fastclick class on it but if failed to work.

It’s like the place suggestions dropdown menu sits on top of page content… I have to hide the rest of the content (buttons and that none chosen div content on input keyup event to be able see it well otherwise, it comes like a transparent glass, it sits on top of the content,I can see it and the content, that’s why I chose to hide… So, that’s the main problem


#4

Ok, can you make a http://jsfiddle.net with the error, so i can look at it.
here you can use this as base:

https://jsfiddle.net/nolimits4web/o2ejupu1/

Thanks,


#5

OK bro… Thanks for the kindness, let me get home and do it…


#6

Hiya! @pvtallulah, I have created a jsfiddle here… Funny thing is, I can actually run through the suggestions on the fiddle…but it never updates my data properties, if you click on that button after selection, it will return an empty alert dialog…meaning no value is selected… Also, when you can see the transparency in there…on my phone, the buttons hide on keyup event but fail in the fiddle, so you will see the whole thing at work, I dont know which F7 version is in the fiddle though… $setState looks like it came after v3.0.0…on my phone I can go through the suggestions… I have also realised that chrome simulates the touch event with the circle mouse pointer, I can see a hand-pointer in the fiddle, meaning that It is listening to click event, not touch… But look through and we see… thanks


#7

Hi max,
It took me a while, but i think that now its working. I test it on AVD, NOT no a real device.

the code that make it works is this:

          // fix clicks
          var el = document.getElementsByClassName('ap-dropdown-menu');
          for (var i = 0; i< el.length; i++) {
            if (!el[i].classList.contains('no-fastclick')) el[i].classList.add('no-fastclick')
          }

just paste it after

placesAutocomplete.on('clear', function () {...})

i uploaded the code to a repo, in case you need to see something.

i would suggest to use webpack or browserify. in that way you dont have to download the scripts from the web. Or paste it locally.

algolia: npm install places.js --save

result:


#8

@pvtallulah… Oh man! OMG, this works in my browser which only means it will work on mobile! I can’t believe it! Thanks very much bro!!! I have spent days trying to figure this out but failing! Great thanks, really grateful…blessings #geek