I m seeing some weirdness on beta 01 as I m trying to upgrad

Question

I m seeing some weirdness on beta 01 as I m trying to upgrade my library I ve zeroed down the issue to the use of a `TextField` as the `title` slot of a `TopAppBar` I m actually using a `TextField` or a `Text` depending on some state search being active vs not The thread has more details Has anyone noticed something similar

Vinay Gaba · Answer

Notice how the title on the third screen disappeared and when I clicked on the search icon the edit text did not appear Even though it actually allowed me to type in that invisible edit text I could not see any characters that were being input either

Vinay Gaba · Answer

Here is the code for it <https github com airbnb Showkase blob master showkase src main java com airbnb android showkase ui ShowkaseBrowserApp kt L79> You should be able to easily trace the composables as its in the same file

Vinay Gaba · Answer

If it helps here is the branch where I was upgrading it to beta <https github com airbnb Showkase pull 130>

eygraber · Answer

Is `ShowkaseSearchField` actually getting called on line 95 If none of those cases were true nothing would get shown because there is no `else` clause

Vinay Gaba · Answer

Fair question I ve actually confirmed that this is not what is causing it If you look at the gif you will notice that they keyboard actually comes up after I click on the search icon That s because the edit text has focus even though I can t see it It also allows me to type and my state is updated with that value however I can t see what I typed That s why I see that filtering on the list is also working Something tells me it might be some elevation clipping weirdness that is hiding my edit text However the more weird part is that I start seeing it once I minimize my app and open it back

Tash · Answer

Tried to pull the code and run it seeing the a similar issue but in my case the title never changes from `Components` Replaced `TopAppBar` `title` with `ShowkaseSearchField` directly and that shows the text field just fine I wonder if its some state composition issue thats making it reach a weird state

Tash · Answer

There is the other variant of `TopAppBar` that takes in `content` that might work as an alternative

Vinay Gaba · Answer

< Tash> Thank you so much for jumping on this and taking a look pray skin tone 3 My first reaction was that its probably related to an issue where the state isn t being propagated Since then I ve spent some time to verify that the state is actually being updated correctly I think this might be a TopAppBar TextField issue I m going to try using the alternate component but my guess is that it might have the same issue since all these variants call each other internally smile

Tash · Answer

No problem Oh yeah if they call each other internally it could present the same problem face palm skin tone 3 I don t mind debugging more later today if you don t happen to find the root cause by then

Vinay Gaba · Answer

Thanks you are the best smile

Vinay Gaba · Answer

So I copy pasted the code from the top app bar and started commenting out parts to figure out what s causing the issue I can conclusive say that the `Surface` inside the `TopAppBar` is what s causing the issue I m going to create my own implementation of the `TopAppBar` to unblock myself for now

Tash · Answer

Interesting I wonder how `Surface` could cause issues My initial hunch was that it had something to do with the `TopAppBar` title being inset Tried with `TopAppBar` that takes in content and used a plain `mutableStateOf` to flip between text field title <https github com airbnb Showkase pull 133> odd but this seems to work thinking face

Vinay Gaba · Answer

Wow I actually did try the `content` variant of TopAppBar and was able to repro the same issue with it when I added an icon on the right of the title Text Thanks for investigating this further though

Tash · Answer

Yeah its really strange that THAT sequence of compositions make it work Another option is I think you can just replace the entire `TopAppBar` with the text field when `isSearchActive == true` Tried that out too and works about the same might have to make some tweaks

Vinay Gaba · Answer

I ended up just using a simple Row with some styles to make it look like an AppBar and that got the job done <https github com airbnb Showkase pull 130 files diff b30e56106f28f96c55285c2222abafe8741686b67e5e1de440160e5b6aa7a302R84>

Tash · Answer

Nice that should work Wonder if its worth filing an issue for `TopAppBar` if the issue is reproducible in a minimal repro

Vinay Gaba · Answer

100 Was planning on trying to repro it over the weekend and filing an issue