One Off the Slack: How Do Disable Child Composables?

Marco Romano asked:

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)

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

Casey Brooks responded:

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

Another solution would be to simply pass the is-disabled value down the composable tree and use them in the relevant child composables.

Yet another solution was proposed by 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)

Google’s Chris Sinco echoed that sentiment:

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

Marco was concerned about non-touch input (e.g., accessibility, keyboards) and whether or not those too would be blocked by the scrim. Chris Sinco was uncertain, and no further comments were made. So, this may needt to be investigated if you with the scrim solution.

---

Read the original thread in the kotlinlang Slack workspace. Not a member? Join that Slack workspace here!