Add custom attributes to dcc/html components

Dash Python
1

Edit: TLDR: How can I add data-* attributes to dcc components? (Thanks to @jcuypers below I realised I am not misusing data-*!)

I’m looking to essentially make a page ‘read only’, and currently I’m manually marking each ‘input’ (dropdown etc) as ‘disabled’. I’ve written a simple helper that loops through all children of ‘layout’ and if they have a ‘disabled’ attribute, set it as True.

However I need, sometimes to skip marking it as disabled. It would be great if I could add a custom ‘skipDisabled’ attribute to any element, look for that, and then don’t set disabled=True.

Is there any way to achieve this? The closest I’ve come is setting “data-dont-disable” on ‘html’ components (but dcc doesnt like data-*).

2

Hi,

Define “DCC doesn’t like” pls.

Nobody stops you from having a parent container with non DCC content and data-*

I guess you have found the original post / examples regarding this?
https://community.plotly.com/t/can-data-attributes-be-created-in-dash/7222

Reg,
J.

3

Apologies, I should have used accurate language! “It doesn’t support”:

TypeError: The dcc.Input component (version 2.9.3) with the ID “the_component_id” received an unexpected keyword argument: data-dont-disable
Allowed arguments: autoComplete, autoFocus,…etc

Yeah I’m actually using data-* labels elsewhere, which is why I knew about them in this work-around, but it’s a bit more cumbersome as I have to ‘wrap’ dcc components in a html.

You actually made me realise I’m not misusing data-*, thanks! Post updated to clarify my question.

4

HI @Inci

You could try adding “don’t-disable” to the className prop.