[BUG] Android, keyboard make cupertino infinity sky)

[bazuka5801]

Describe the bug When I open the keyboard, my Cupertino goes up. And this problem (no background at the bottom) appears on iOS when we turn on the bounce animation to breaks. I've tried adding :after to .cupertino-pane to solve this problem, but i think, it's bicycle stick :)

To Reproduce Steps to reproduce the behavior:

1. Add input to cupertino
2. Click on input

Expected behavior A clear and concise description of what you expected to happen.

Screenshots

Desktop (please complete the following information):

• OS: Android
• Capacitor App
• Version API 29

[roman-rr]

@bazuka5801 thank you, seems to related to #187 also. Will check.

[roman-rr]

@bazuka5801 Please check v1.3.2 with recent fix and let me know if it's works better.

[bazuka5801]

@roman-rr As of today, I have dropped support for android in my project, and now it is too difficult to check this issue for android. I am sure we can close this issue, if something goes wrong in the future, I will let you know.

[danilabais]

Hi,

the bug remained, on Android and iOS (Capasitor). infinity sky only appears when the input is too low to the bottom of the pane. if it is 10 pixels higher, then infinity sky is smaller, if it is even higher, then there is no infinity sky at all. Apparently the indent is somehow incorrectly calculated if the input is low. if you need to write code with this problem - let me know.

I will be glad if you offer a quick solution to this problem

[roman-rr]

@danilabais Please records short video for better view in perspective.

[danilabais]

Behavior similar to ios and android: the lower the input is located to the bottom of the screen, the larger the infinity sky will be

android video: click ios video: click

settings of capasitor keyboard plugin:

"plugins": {
    "Keyboard": {
      "resize": "body",
      "style": "DARK",
      "resizeOnFullScreen": true
    }
  }
  

pane: handleKeyboard: true, // TODO: bug

[danilabais]

Everywhere this bug was closed with crutches.

Here is a quick code for anyone who needs it. Looks to work as it should.

ps: this code will work if the input is at the bottom only because of the scroll. if it is at the bottom and the scroll is also at the bottom, then layout will help here. You need to make sure that the cupertino-pane content is no more than 100vh, and everything that should scroll is already in this block with overflow-y: auto

const fixAndroid = async () => {
    if ((await Device.getInfo()).platform !== 'android') return

    document.addEventListener('click', ({ target }) => {
        const contentEditable = ['TEXTAREA', 'INPUT']
        const offset = 130
        if (!contentEditable.includes(target.tagName)) return
        if (window.innerHeight - target.getBoundingClientRect().bottom < offset) {
            target.scrollIntoView({ block: "center" })
        }
    })
}
fixAndroid()

[roman-rr]

Everywhere this bug was closed with crutches.

Here is a quick code for anyone who needs it. Looks to work as it should.

ps: this code will work if the input is at the bottom only because of the scroll. if it is at the bottom and the scroll is also at the bottom, then layout will help here. You need to make sure that the cupertino-pane content is no more than 100vh, and everything that should scroll is already in this block with overflow-y: auto

import { Device } from '@capacitor/device';

const fixAndroid = async () => {

    if ((await Device.getInfo()).platform !== 'android') return

    document.addEventListener('click', ({ target }) => {
        const contentEditable = ['TEXTAREA', 'INPUT']
        const offset = 100
        if (!contentEditable.includes(target.tagName)) return
        if (window.innerHeight - target.getBoundingClientRect().bottom < offset) {
            target.scrollIntoView()
        }
    })
}
fixAndroid()

Thank you for solution, I will use it for fix.

[roman-rr]

Should be fixed