https://kotlinlang.org logo
#compose
Title
# compose
t

Travis Griggs

10/04/2023, 3:23 PM
Is there pattern/mechanism to coordinate layout between two composition trees? I have a series of labels in my UI that I want to "edit in place" "modally". My thought was to have a root component at the top of the tree that is a skrim over most of the UI, but overlays the label with a TextEdit. To make that work though, I'd need to layout the TextEdit in the "global" skrim to match wherever the target label is on the screen.
c

Casey Brooks

10/04/2023, 4:08 PM
What about just using a
Popup
? It floats over the main content, but keeps itself anchored to it’s parent. I don’t think you’d need a full parallel UI tree, just a single
Box
containing both the label and the Popup with the
TextField
t

Travis Griggs

10/04/2023, 5:00 PM
Can a PopUp do IME? I was using a Dialog (rather than a root composition of my own), so I swapped in PopUp for Dialog (my understanding is that under the hood they are linked anyway), but the keyboard doesn't open anymore when I do that. Either way, if I want to support the illusion of "this label that you indicated you want to rename just turned into an input field right there with all of the context you're otherwise familiar with around it", i have to be able to position the new field in such a way exactly where the label is/was. So I still have this question of "how to "line up" two compositions that are in "cousin" trees"
d

dorche

10/06/2023, 12:20 AM
It might be way easier to abuse the enabled state and it's colours (for example) of a textfield so that it looks like a label
t

Travis Griggs

10/06/2023, 12:46 AM
I've toyed with that recently actually. What's not clear to me is how you can get a "modal" behavior. The keyboard comes up when you take focus. You can use the "DONE" as the "accept this text and push it as the accepted value" transation, but there's no "cancel this, never mind" unless you add a button that does that. which is fine, but then all the other controls are accessible too, so now you have to sense when either you get a click on your cancel button and close the keyboard, OR sense when someone else closes the keyboard you opened via focus and revert to the "label" state.
d

dorche

10/08/2023, 10:48 AM
yeah it's a tradeoff but you could anchor a bar on top of your keyboard for example and put accept and cancel there. You might or might not need a focus change listener to do the reverting to a label style but the idea is the same - losing focus should always revert to the label style but if the user has pressed accept before that then you'd have a new value for your label text.