Thread
#compose
    v

    Vinay Gaba

    1 year ago
    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?
    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.
    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
    If it helps, here is the branch where I was upgrading it to beta - https://github.com/airbnb/Showkase/pull/130
    e

    eygraber

    1 year ago
    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
    v

    Vinay Gaba

    1 year ago
    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

    Tash

    1 year ago
    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.
    There is the other variant of
    TopAppBar
    that takes in
    content
    that might work as an alternative
    v

    Vinay Gaba

    1 year ago
    @Tash Thank you so much for jumping on this and taking a look 🙏🏼 My first reaction was that its probably related to an issue where the state isn’t being propagated - https://kotlinlang.slack.com/archives/CJLTWPH7S/p1614563750245900 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 😄
    Tash

    Tash

    1 year ago
    No problem. Oh yeah, if they call each other internally, it could present the same problem 🤦🏼. I don’t mind debugging more later today if you don’t happen to find the root cause by then.
    v

    Vinay Gaba

    1 year ago
    Thanks! you are the best 😄
    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

    Tash

    1 year ago
    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 🤔
    v

    Vinay Gaba

    1 year ago
    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

    Tash

    1 year ago
    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)
    v

    Vinay Gaba

    1 year ago
    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

    Tash

    1 year ago
    Nice, that should work! Wonder if its worth filing an issue for
    TopAppBar
    if the issue is reproducible in a minimal repro
    v

    Vinay Gaba

    1 year ago
    💯 Was planning on trying to repro it over the weekend and filing an issue