Is there an “easy” way to set all of a composable’s inner composables as `disabled` ? Maybe somethi...

# compose

[julioromano]

Is there an “easy” way to set all of a composable’s inner composables as disabled ?

Maybe something with CompositionLocals?

(what I’m trying to achieve is to have an entire screen to be disabled under certain conditions)

[Casey Brooks]

The easy way is just to wrap the screen content in an if statement. You shouldn’t need to make it more complicated than that.

[julioromano]

But I still want the screen’s UI to be shown albeit in a disabled state.

[Casey Brooks]

Ah, you’re meaning the enabled/disabled state of all form controls? Yeah that makes sense. But from looking at the source, all those controls just use a simple boolean flag and no Locals to control enabled/disabled state. There probably isn’t a good option here, other than manually wrapping those controls into custom functions that do read from a custom Local

[Chris Johnson]

I would talk with your designer and maybe suggest a scrim over top of the UI that's disabled. I'd say it's bad UX to allow a user to be able to click things without any indication that they're disabled. Then if your content is disabled you show the scrim overtop of it (Which would consume touch events so you don't have to worry about disabled states)

[Chris Sinco [G]]

Drawing scrims (at whatever opacity you want) is also simple with drawRect within a drawWithContent/drawBefore modifier that you can conditionally add to “disable” all content in a Composable. Effectively block all input. But I would suggest as above talking with your designer to make the UI clearly look disabled

[julioromano]

Do you think using a scrim like proposed will completely prevent input or perhaps using accessibility frameworks users might still be able to select and click items beneath the scrim?

[Chris Sinco [G]]

I don’t think so but @Zach Klippenstein (he/him) [MOD] might have a better idea

[Zach Klippenstein (he/him) [MOD]]

I don’t unfortunately, but this is an increasingly common request so please star this bug: https://issuetracker.google.com/214231672

[julioromano]

@Chris Sinco [G] re: https://kotlinlang.slack.com/archives/CJLTWPH7S/p1648172384389969?thread_ts=1648131615.066659&cid=CJLTWPH7S

I’ve tried using the drawWithContent modifier as you suggested, I got a semi transparent scrim to draw above my content, but it does not block any input. Is this expected?

Code:

Box(
  modifier = Modifier.then(
    if (isLocked) {
      Modifier
        .drawWithContent {
          drawContent()
          drawRect(color = Color.Gray, alpha = 0.1f)
        }
    } else Modifier
  )
) {...}

[Chris Sinco [G]]

Not sure - I think the issue submitted above would actually solve the problem fully