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! 👩‍💻

--

--

--

Coding enthusiast! love Android #kotlinAlltheWay, want to explore all opportunity around it! CodingMantra: #cleanCoder #TDD #SOLID #designpatterns

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Atlassian for Startups — Part 2

How to sync your MySQL data to Elasticsearch

5 Advance SQL functions you must know

CS 371g Summer 2020 Final Entry: Robyn Fajardo

A layman’s guide to install and setup Apache Spark

No one is a bad coder!

Deploying Data Science Web Apps with Streamlit: Text Display

Creating New Keystores for WSO2 products

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Chetan Gupta

Chetan Gupta

Coding enthusiast! love Android #kotlinAlltheWay, want to explore all opportunity around it! CodingMantra: #cleanCoder #TDD #SOLID #designpatterns

More from Medium

Kotlin: Extensions to functions

Kotlin Collections & Operations

Mastering refactoring

Factory Design Pattern in Kotlin