⚙️ Quasar scroll assist for cordova?/capacitor!

[bazuka5801]

Describe the bug 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.

Actual state of bug with quasar v1 and v2: YouTube

Expected behavior YouTube

I write quick fix for this bug: Gist

But someone talk to me (and my head forgot, year ago I was testing ionic app and get confused this error is fixed), this issue already fixed in ionic.

I found this fix Scroll Assist

💪 And I want to implement it for quasar v1, v2 to fix issue with scroll!

Platform (please complete the following information): Quasar Version: 1 & 2 @quasar/app Version: 2 & 3 Quasar mode:

• [x] Cordova
• [x] Capacitor

Tested on:

• [ ] Cordova
• [x] Capacitor v3

OS: Mac OS Yarn: Latest Browsers: WebKit & Chrome iOS: 12+ Android: ?

[bazuka5801]

I record a video with ionic assist to compare behavior YouTube

[pdanpdan]

Hello, can you please test if this fixes the problem for you?

In package.json replace quasar dependency with: "quasar": "https://github.com/pdanpdan/quasar#quasar-pdan-v1.15.20-beta.2"

Then do a yarn or npm install and start the app again.

Please report if you find something not working.

[bazuka5801]

@pdanpdan Yes, same problem, no scrolling on webkit (capacitor 3 & ios 14.5)

I go deeper and found scroll smooth instead of instant. I installed smoothscroll polyfill (for webkit - ios, chrome on android support it) And I get this result on ios 14.5: https://youtu.be/wDcoWqrnltY

Look nice than Ionic video. (On my video, I don't any scroll, only click on input and free space)

[bazuka5801]

I made some research for capacitor keyboard plugin and found a good solution (in linked video)

[bazuka5801]

🥳 🥳 🥳 I published an extension that fixes this issue. https://github.com/BazuMax/capacitor-smooth-keyboard-popup