Nov 20, 2021
Jetpack Compose 🐛 Keyboard Types switch on focus change
Originally posted on :
If you have ever tried to create your own PIN or OTP view you might have faced pain.
Jetpack compose even though is been stabilized for production use, some functional bugs are still expected to exist.
One of the same bugs which I like to discuss in this article is about keyboard type switching from alphanumeric to numeric type whenever focused and could be faced easily while making UI design such as an OTP or PIN view in Compose.
Preview of Bug :
You can see this issue on Google Issue Tracker :
https://issuetracker.google.com/issues/187746439
On publishing of this article status of the bug is to be resolved is unknown, this means you will be stuck with this behavior until the google team picks it up.
It won’t entirely fix the bug but at least put a bandage over it. Heads up! I didn’t come up with the hack, the owner of the idea is
Chris Hattoncheckout his LinkedIn from here.
Chris Suggested :We can sidestep a lot of such issues by making the input part a large, invisible, single text field. The large visual digits merely reflect the content of the single invisible field.
Which Translated to :
The context behind which this suggestion was to have only one TextField instead of 4 which will avoid switching between TextFields thus Keyboard switching.
You can see my implementation Below :
OTP Cell UI Composable
This composable is how a OTP cell looks in the UI, next below is the logic of controller for updating this
OTP Controller Composable
This would result in the Following Behaviour :
Fix Preview :
Vola! its working Wonderfully , Checkout the complete code on the github :
Conclusion 💆🏻♀️
That’s all fokes! Hope this help someone.
P.S. Thanks Chris for logic again!
Hope you find it informative and if you have any feedback or post request or want to subscribe to my mailing list forms are below.
Do consider Clap to show your appreciation, until next time. Happy Hacking! 👩💻
