The autocomplete box was working well until I started x-browser testing. Choosing mobile device in chrome developer tools and selecting Pixel 2 or Iphone X for example, in portrait mode there is an issue where you select the event from the list but the search box does not hold the value selected. It works fine in landscape mode/mobile and desktop view.
Steps to replicate:
- Html and JS code here: https://codepen.io/dwolsey/pen/xxqmvZR
- You can change view to full screen and should be able to search for and select an event, and event description shows in the search box.
- Go to dev tools in your browser, change to mobile device in portrait mode.
- Try search for an event again, a list of options comes up but when you click on an option, the search box does not hold the value.
- Codepen is adding overhead, but this problem was happening on my local machine without any overhead and I can’t seem to find out the problem.
The main thing I have found when experimenting is if I remove this line:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
It works, but of course it does not scale the web page for the mobile device and I need it in there. Please note that codepen puts this meta tag in their preview page by default.
Is this a bug in the autocomplete or am I doing something incorrectly?
Thanks for any help,