Keyboard covers text input on create multisig page (Android)

[asnaith]

Description
When viewing Multix on Android (within Nova wallet using the chrome engine) the inputs do not move up above the keyboard when tapped.

Steps To Reproduce

1. Open Nova Wallet on Android
2. Navigate to Multix
3. Connect wallet
4. Open hamburger menu
5. Tap "New Multisig"
6. Add a signatory and then try to add a second

Expected Behaviour
When the input is tapped and the keyboard presented the view should adjust so that the inputs are still visible whilst the user is typing

Console Error
N/A

Screenshots / Video

screen-20230426-103210.mp4

**Test Host Specifics: **

• OS: Android
• Browser: Chrome engine (Nova Wallet)
• Version 6.10
• Wallet: Nova

Additional context
Works as intended within Nova Wallet on iOS

[bolajahmad]

Can I pick this up if it's still open?

[Tbaut]

Sure. Feel free to discuss what you think could be a good solution here if you want.

[bolajahmad]

I'm reading the code to try and see what the problem is. Do you have further information about the issue, like;

• What file(s) contain(s) the components rendering this form?

[Tbaut]

What you can see in the video above comes from this component https://github.com/ChainSafe/Multix/blob/main/packages/ui/src/components/select/SignatorySelection.tsx#L14

[bolajahmad]

Hi @Tbaut, I took a look into this problem and while it's a UX issue, there is nothing wrong with the code and logic of the related component(s).

The problem is how input fields works on Android web apps. I found some interesting solutions, but I won't recommend because they are hacky.

1. https://ux.stackexchange.com/questions/122951/on-screen-keyboard-covers-input-field
2. https://support.backendless.com/t/android-keyboard-hides-input-field/14780
3. https://stackoverflow.com/questions/54575309/how-to-prevent-mobile-keyboard-from-covering-html-input

If we do follow this, we will have to selectively apply them to specific browsers.

Do you have any recommendations @Tbaut

[Tbaut]

Hey @bolajahmad thank you very much for your research. This issue has been open for so long for this reason: there's indeed no easy solution :|

From your links, I think https://stackoverflow.com/a/54575847/3086912 seems to be the best hack, and the most easy to understand. I think this is something we could implement and apply only to the smaller screens (using the @media (min-width: ${({ theme }) => theme.breakpoints.values.sm}px) for instance).

Feel free to go this route.