[BUG] Any way to fix this keyboard issue? (not in an app)

[omar2205]

Describe the bug
I have this cupertino-pane that has an input. On phone, when I click the input, the keyboard shows up and misses the pane.

The problem is, I can't even see what I'm typing.

https://i.imgur.com/lfgRSEg.mp4

To Reproduce
Steps to reproduce the behavior:

1. Have a cupertino-pane with an input
2. Visit on mobile
3. Click the input
4. See the problem

[roman-rr]

Hello @omar2205 thank you for issue!
Have you try to set handleKeyboard: false ? Does it work for you ?

[omar2205]

Yeah, I tried it with no luck. It's not an app, it's a website.

[roman-rr]

@omar2205 Please confirm that only on chrome browser, or safari is also affected ?

[omar2205]

Yep, the same thing with Firefox. I can't test Safari.

[omar2205]

@roman-rr I made this quick demo https://whole-mole-32.deno.dev/
Playground https://dash.deno.com/playground/whole-mole-32

[flangapp]

is there a quick solution?

[flangapp]

Hack solution:

For .pane class change styles:

.cupertino-pane-wrapper .pane {
position: absolute;
width: 100vw;
}

now it works as expected

[roman-rr]

@flangapp thank you. Might fit some cases, but not all. I will check soon keyboard issues.

[justjoshin83]

Hey guys! Just wanted to see if there's been an official resolution for the keyboard issues. My issue is that the keyboard actually covers the pane itself, so I can't see the input. If I need to open a separate issue I will, but I just wanted to check to see if there have been any updates on keyboard-related problems. Thanks!

Here is a video of the issue I'm having: https://drive.google.com/file/d/1AkvNRkxQMsU5b9XEXgk9kb1QftEzkc67/view?usp=sharing

And my cupertino settings are here:

 settings: CupertinoSettings = {       
        buttonDestroy: false,
        fitScreenHeight: false,
        lowerThanBottom: false,
        animationDuration: this.paneAnimationDuration,
        animationType: 'ease-in-out',
        preventClicks: true,
        maxFitHeight: 500,
        bottomClose: false,
        followerElement: '#pane-follower'
    };

[roman-rr]

Thank you @justjoshin83
You show a different issue, compare with others here. Please create new one and I will help you to handle it.
It will faster if you also provide code samples with reproduction.
Quick overview of your bug: Try to focus input after transition end (if you do focus programmatically with .focus() );

[hackal]

I believe that the issue is related to the isFormElement function. I had similar problem (pane flying away when focusing input). Solved it by updating isFormElement to return true for content editable too. Fixed my issue

isFormElement(el) {
        const formElements = [
            'input',
            'select',
            'option',
            'textarea',
            'button',
            'label',
        ];
        if (
            (el &&
                el.tagName &&
                formElements.includes(el.tagName.toLowerCase())) ||
            el.getAttribute('contenteditable') === 'true'
        ) {
            return true;
        }
        return false;
    }

[roman-rr]

Everyone's on this topic, please check v1.3.2 with recent fix and let me know if it's works better.

[omar2205]

Tested this https://whole-mole-32.deno.dev on Chrome Android it looks fixed!

[Lychfindel]

Hi all, I'm having the same issue using v.1.3.2 on safari on iOS.
Moreover I see the same behaviour also on https://whole-mole-32.deno.dev/ (but i don't know if there the package was updated).

[omar2205]

https://whole-mole-32.deno.dev uses the latest version so it should be updated. Can you record it?

[Lychfindel]

https://whole-mole-32.deno.dev uses the latest version so it should be updated. Can you record it?

Here the video using Safari on iOS 16.1.1

IMG_4768.MP4

[omar2205]

This is the same behaviour I get, which I consider fixed as it is better than my video above.

[Lychfindel]

Sorry, probably I didn't get what was the bug since I cannot see any major difference between the two videos.
For me the bug is that when the input get the focus everything is pushed by the keyboard (and in the example you cannot see anymore the green background), I think the expected behaviour should be that the keyboard appears but the pane remains at the same height (so you should still see the green background).
If this is different from the bug of this issue I apologise and I will open a new one!

[omar2205]

If you check out this video https://i.imgur.com/lfgRSEg.mp4, the whole pane is pushed upwards, making the input hidden. When you close it, you can see the background on the bottom.

You may want to open a new issue if you think this behaviour is wrong.

[roman-rr]

Important! All cases related to textarea please describe here #217
But in common should better after latest review.