I've got a `clickable` modifier on an `OutlinedTex...

# compose

[Colton Idle]

I've got a clickable modifier on an OutlinedTextField . Unfortunately the clickable ripple is a square shape vs filling in the rounded shape of the OutlinedTextField.

If I use clip(MaterialTheme.shapes.small) then it looks perfect BUT the floating label will be cut off. Any other route I can take to make sure only the clickable ripple is clipped?

[Colton Idle]

@Chris Sinco [G] sorry for the ping, but do you have any ideas here by chance? The ripple taking up more room than it needs drives my designer insane, but also cutting off the floating label is also quite annoying.

[Chris Sinco [G]]

I was looking into this yesterday but paused 😅

[Chris Sinco [G]]

My initial investigation was wondering where your clickable Modifier was declared since when I put it on the OutlinedTextField, it seems the ripple only showed up when clicking on the small padding towards the outside of the field, which seemed odd as I imagined the ripple would show up when you click the input field itself to set focus.

[Chris Sinco [G]]

Anyway, looking at how the OutlinedTextField is layered, it seems challenging to try and apply a clipped ripple on top of it, without redoing it from scratch with BasicTextField and custom layers on top of the decorationBox. Do you have a GIF/video of what you have working currently?

[Colton Idle]

This is my current result. Essentially what I'm building is a thing that looks like all of our regular outlined fields, except for the fact that this one is used to pick time from a time picker. After the user picks a time from the time picker then it fills in as the text here. THe other interesting bit is that we have two of these fields right next to each other.

i.e.
| Choose your time | Choose your date |

[Colton Idle]

And so when two of these are in a row there is limited space to show a hint, and so the hint goes onto two lines. and you can see it just gets clipped completely.

[Colton Idle]

My current impl:

Box(
                    modifier =
                    // Use shape small as that's what OutlinedTextField uses internally
                    Modifier
                        .padding(48.dp)
                        .clip(MaterialTheme.shapes.small)
                        .clickable {
                        }) {
                    OutlinedTextField(
                        "<mailto:[e-mail]|[e-mail]>",
                        {},
                        label = { Text("Some long-ish description. Some long-ish description. Some long-ish description") },
                        enabled = false
                    )
                }

[Colton Idle]

So my expected result would just be to only have the ripple take up the outline perfrectly, but a runner up approach would be the same thing you see in the screenshot above (which the screenshot show the end state of the ripple) and so the runner up would be that but without the text being clipped. Appreciate any workaround you might come up with.

[Chris Sinco [G]]

Oh so the user is not actually inputting text in the field but using a different control that then populates the field? Will the user ever be able to set focus and type in the field?

[Colton Idle]

We've gotten a request from our designer that while the time picker is up, that the field in the background is "focussed" (i.e. highlighted in the default material purple) so the user has an extra hint in knowing which field exactly they are modifying, but its not a hard requirement.

[Chris Sinco [G]]

I see. Yeah the “focused” state could be highlighted text, a different border treatment or something else entirely I guess

[Colton Idle]

My app is essentially building a google form like thing, and so we have our own themed text inputs, and then a bunch of fields that we call "FakeOutlinedInputField" which is basically just OurOutlinedInputField under the hood, but with a very limited set of args.

[Colton Idle]

The idea being that if we ever change from OutlinedInputField to just InputField, then we just make our change in one place and all of the forms will still look great.

[Colton Idle]

Again, this is supppper minor, but I was just curious if there was some pattern for making an InputField just behave like a button essentially. I suppose I can look to see what the new material exposed dropdown menu does. As I think that probably works how we want this to work.

[Colton Idle]

Funny enough, we are basically building google forms, but we have no drop downs. lol Everything that opens just opens in a modal bottom sheet (which comes with it's own set of issues) (Save me @jossiwolf 😂 )

[Chris Sinco [G]]

Gotcha, yeah ExposedDropdown would be a good place to start