Skip to content

Instantly share code, notes, and snippets.

@bazuka5801
Last active November 11, 2021 14:45
Show Gist options
  • Save bazuka5801/79acde3cb17001b76cd33d4f33ce8f6e to your computer and use it in GitHub Desktop.
Save bazuka5801/79acde3cb17001b76cd33d4f33ce8f6e to your computer and use it in GitHub Desktop.
When we use capacitor in quasar, and select any input, keyboard showing, but selected input field scrolling down and we can't see what we input. We get keyboard show bug. This code snipper - fixing that bug.
// Bug example video: https://youtu.be/3tQJakYez1Q
// Expected result: https://youtu.be/HEXWEVXjen8
import { Keyboard } from '@capacitor/keyboard';
// Define outside of view
let activeElement = null;
data: () => ({
/*
* If we are using keyboard we can hide footer to get more available space for user
* For vue: using example <q-footer v-if="footerVisible"> .... </q-footer>
*/
footerVisible: true
})
// Analog: deviceready
mounted() {
Keyboard.addListener('keyboardWillShow', info => {
// Hide footer
this.footerVisible = false
});
Keyboard.addListener('keyboardWillHide', () => {
// Show footer
this.footerVisible = true
});
Keyboard.addListener('keyboardDidShow', info => {
// Remember selected element
activeElement = document.activeElement
// Scroll to active element
document.activeElement.scrollIntoView()
});
Keyboard.addListener('keyboardDidHide', () => {
// Scroll to remember element or actuve element on page
(activeElement || document.activeElement).scrollIntoView()
});
}
@aloky
Copy link

aloky commented Nov 11, 2021

Еще бы добавить smoothscroll-polyfill чтобы была анимация в safari

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment