Comments (5)
Any solution for this issue to fix.
from autocomplete.
The modification 3b63321 caused this to break severely on iPhone.
When the page is unscrolled:
When I scroll, now the autocomplete box for "Postleitzahl" appears about 100px below and overlaps with the street input:
Undoing this change fixes the issue.
from autocomplete.
@jackkinsella Thank you for reporting the issue. Do you have any page where I can reproduce it? I tested the following page on iPhone 6 as well on Browserstack using 2 newest iPhones, but everything seems to work just fine:
https://kraaden.github.io/autocomplete/
If possible, let me know which iOS version you used.
from autocomplete.
I created a CodePen to demonstrate: https://codepen.io/jackkinsella/pen/jOOxEdq
(It uses your library code except a change where I force IOS mode. You can then inspect with DevTools iPhone simulation)
The autocomplete is in the correct position before any scrolling happens (i.e. the first input is perfect), but after scrolling occurs (i.e. the second input), the autocomplete popup's position seems to be set to a top
value that is larger than the viewable screen's height (i.e. which isn't going to play well with position:fixed
). This happens because of the addition of window.pageYOffset
, which is equal to the amount scrolled.
iOS version? Not sure, sorry (was a colleague's phone). I think it was the one before the X. But the issue can be reproduced in Chrome DevTools.
from autocomplete.
I can also reproduce this bug on iPad (iOs 13.2). Exactly the same bug as jackkinsella describes. It' fine when the page is unscrolled. When scrolled (either by hand or triggered by the appearing of the iOs keyboard) the position of the dropdown in incorrect.
from autocomplete.
Related Issues (20)
- iOS candidate word selection does not trigger autocomplete HOT 3
- Container width is always set as the input width causing UI problems HOT 2
- emptyMsg Shows on Resize When Using Custom Container HOT 3
- autocomplete selection is broken on Firefox for Android HOT 2
- add loading state class to input
- Slow navigation with arrow up/down keys due to redraw of autocomplete div HOT 4
- AJAX example HOT 4
- exports missing autocomplete.css HOT 2
- Is this mantained? HOT 1
- What about multiple selection?
- Allow closing the list by pressing Esc HOT 2
- Recall fetch() after user moves the caret HOT 9
- My custom container deleted HOT 4
- use for textarea
- Requesting feature: changing input.value when moving up-down through the suggestions list by keyboard HOT 1
- Prevent that scrolling page fires heavy updates of max-height HOT 1
- Disable rendering on keyup HOT 1
- onBlur prop HOT 3
- Results disappears on keyboard dismissal on iOS HOT 5
- fetch called after autocomplete selection on Firefox Android HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from autocomplete.