Comments (5)
Hi @atomtigerzoo and @NiklasBr
I've developed a fix to address this issue and it should prevent the autocomplete from closing when user is closing virtual keyboard on IOS devices.
Please note that this solution is a bit of a workaround, as it extends the delay before the autocomplete closes following a blur event from 200ms to 800ms. This means that if a user clicks somewhere else on a webpage, the autocomplete widget will remain visible for a longer period than before (but only on IOS devices).
You can install this fix using the following command:
npm install --save-dev kraaden/autocomplete#2cbac7b8e56bf5e1e64bb19318c9e59f16b919c3
from autocomplete.
On IOS, if you close the keyboard, safari will automatically unfocus/blur the textbox and thus the widget will remove all suggestions. Here are some topics on stackoverflow that discuss this issue:
https://stackoverflow.com/questions/27975462/prevent-blur-event-on-keyboard-close
https://stackoverflow.com/questions/5652322/how-to-prevent-a-js-blur-event-in-ios-webkit-when-the-virtual-keyboard-is-dismis
I'm not aware of any good workaround to prevent this, but if you have any suggestions, you can post them here.
from autocomplete.
I think it would be a good idea to not remove the DOM on blur, or allow implementations to override the onBlur event which removes the content.
from autocomplete.
Sadly this is a real deal-breaker for me. If you type a
on the demo and then hide the keyboard, the suggestions disappear. If you keep the keyboard, you cannot reach the last entries because these are overlayed/blocked by the keyboard.
from autocomplete.
I have addressed the issue of increased delays on iOS devices. The delay should now be consistent at 200ms across different devices. Please update to the latest version by running the following command:
npm install --save-dev kraaden/autocomplete#1fb9967df8f0142678730baba346202c2905746c
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
- 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.