TextFieldDefaults - `FocusedIndicatorThickness` is...

# compose

[Zoltan Demant]

TextFieldDefaults - FocusedIndicatorThickness is 2.dp and UnfocusedIndicatorThickness is 1.dp
As a result my layout grows/shrinks in size when I move focus around. I can call BasicTextField myself to override this behavior, but Id rather not. Im sure theres a modifier I can throw on the layout so that it keeps its size, or something?

[Stylianos Gakis]

Do it, copy-paste the implementation to your project so you have control over these things.
The earlier you do it the earlier you'll be able to break free of being a victim of the sunk cost fallacy 😅

[Zoltan Demant]

Is this sarcasm? 😅 I thought about it, and maybe its a good idea because then I can use BTF2 now, which also solves a couple of things for me related to VisualTransformations.

On the other hand, M3 does a lot of good things (particularly around accessibility) that I definitely would break or forget. Besides, looking at what Id need to copypasta, its not a 1-1 call into BasicTextField.. all the colors and stuff need to be sorted out too. And do I then need to do this for OutlineTextField as well? this is fine1 this is fine1

[Louis Pullen-Freilich [G]]

This sounds like a bug to me, please file an issue

[Stylianos Gakis]

No it's not sarcasm it's 100% honest feedback. We did the same and I never regretted it 😅

And yes you'd do it for OutlineTextField too. Basically just copy-paste the entire implementation as-is and change the imports.

From that point, go and change that dp number, and whatever else has always bugged you about it.

[Zoltan Demant]

Interesting! Have you felt the need to tweak your code after the fact to align with some changes introduced in M3?

@Louis Pullen-Freilich [G] Same, and while on the subject: going from empty to typing anything also changes the layout size.. seems like theres a mismatch in cursor size and textStyle size. If anyone here can report these things, thank you, otherwise Ill do it when I get the chance!

[Zoltan Demant]

The latter issue with size changes with and without any typed text seems harder to work around, maybe its not an issue on Android and iOS but definitely seeing it on desktop.
If anyone knows any way, please let me know 🙏🏽 I think the TextField size should be static overall, right? So I could potentially measure it and keep that one size forever.

[Zoltan Demant]

@Stylianos Gakis I definitely would like to keep the label floating even when the input is empty, just another case for your argument 😄

[dorche]

I have also experienced the same issue with cursor size - the only workaround I could come up with is to increase the text field height ever so slightly than its expected size (e.g. add like 4.dp more).
Let me know if you end up filing an issue for it, would love to +1 it

[Colton Idle]

if you post the issue here I'll +1 😄

[Zoltan Demant]

@dorche Care to share how youre increasing the height? Im guessing some combo of onPlaced/etc to get height, then adding a few dp to it and preventing the infinite loop?

Issue -> https://issuetracker.google.com/issues/406169267 Thank you all for embarking on this painful journey with me.

[dorche]

Not really, I generally try to avoid onPlaced and other modifiers that do not give you a correct first frame.

I just have a function to calculate a minHeight that I assign to the TextField and that min height has an extra 4sp (tbh not sure why I went with sp)

@Composable
    fun minHeight(): Dp = with(LocalDensity.current) {
        max(
            48.dp, // min touch target
            (verticalPadding * 2) + labelStyle.lineHeight.toDp() + 4.sp.toDp() + textStyle.lineHeight.toDp()
        )
    }

[Zoltan Demant]

Does it happen on other platforms for you? Ive just been toying with desktop, so havent tried Android/iOS yet

[dorche]

I've only tried on Android tbh

[dorche]

When I was digging (this was ages ago) I found these which might be related
https://github.com/JetBrains/compose-multiplatform/issues/1895
https://issues.skia.org/issues/40042695
Although I'm not really sure as I was quite deep down the rabbit hole and wanted to blame something 😂

[Zoltan Demant]

Would providing an empty (non empty) text like " " instead of "" work? Im thinking that the cursor would be in the smaller size all the time that way? Of course, this breaks how the label would animate up to floating position.. but clearly worth it imo 😅

[dorche]

Yeah that might work if it's a personal project where you can get away with that label behaviour but my designers will hate it at work so I had to do the min height instead

[Zoltan Demant]

Thats understandable! I have the fortune of being both the designer and coder (theres really noone else 😅). Ill experiment with your suggestion to see whether it makes a better fit though, so thanks for sharing it!