Jetpack composeでBasicTextFieldを使う時に気をつけること

はじめに

今回はJetpack composeでBasicTextFieldを使っていて自分がハマってしまった問題を紹介していこうと思います

本文

まず、今回自分がハマってしまった問題というのはBasicTextFieldを使っているときに入力した後に入力内容をBSで削除していき再度入力した際に下記のエラーによりクラッシュしてしまうというものでした。

java.lang.IllegalStateException: LayoutCoordinate operations are only valid when isAttached is true

原因の部分は下記になります

decorationBox = { innerTextField ->
            if (text.isEmpty()) {
                Text(text = placeholderText, color = Theme.colors.gray500)
            } else {
                innerTextField()
        }

原因としてはinnerTextFieldを表示しないタイミングがあることでした
innerTextFieldは一回は必ず呼ばれなければならない上に一回のみ呼び出すことが可能になっています
それを入力が空の時にif文で表示しないようにしてしまっていたのが問題でした。
なので、コードを下記のようにすることでエラーが解消されました

decorationBox = { innerTextField ->
            Row(
                horizontalArrangement = Arrangement.End
            ) {
                innerTextField()
                if (text.isEmpty()) {
                    Text(text = placeholderText, color = Theme.colors.gray500, textAlign = placeholderTextAlign)
                }
        }

最後に

今回は自分が実装していてハマってしまった部分を紹介していきました
普段はplaceholderに渡しているので備忘録として残しておきたいと思います
どなたかのお役に立てれば幸いです