Html tags: autocomplete and others

Dash Python
1

is it possible to add certain “passthough” html tags to be added to the final html rendered by dcc components?

at least for the dcc.Input one, there are certain tags that has meaning, for example ‘autocomplete’

example message in chrome:
[DOM] Input elements should have autocomplete attributes (suggested: “current-password”): (More info: https://goo.gl/9p2vKq)

i understand it’s an impossible task to cover all html tags in the react component, but a simple passthrough attribute added to the components can solve this.

something like: dcc.Input(…,htmlPassthough='autocomplete=current-password, randomAttr=“blabla” ')
and just have the renderer just append those attributes as is to the final html

just a thought on something that could make things much simpler for dash users…

2

I would actually prefer to include all of the tags. This is a static list, part of a HTML spec, so I don’t think that it’s impossible.

Right now, we scrape MDN (code here: dash-html-components/scripts/extract-attributes.js at master · plotly/dash-html-components · GitHub, output here: dash-html-components/scripts/data/attributes.json at master · plotly/dash-html-components · GitHub). This should include all attributes but if any are missing, we can consider it a bug :bug::wink:

For autocomplete, it looks like it is included but camelCased: autoComplete

3

good to know for html components :slight_smile:

Is this true for core components as well?
such as dcc.Input ?

i tried using it in dcc.Input, and i get the following error:

Allowed arguments: autocomplete, autofocus, className, id, inputmode, list, max, maxlength, min, minlength, multiple, name, pa
ttern, placeholder, readonly, required, selectionDirection, selectionEnd, selectionStart, size, spellcheck, step, style, type,
 value

the autocomplete available has a different meaning - i checked the source on github

4

All of these attributes are just passed through to the underlying <input/>: dash-core-components/src/components/Input.react.js at bdb22329b6a62e392ae7707da0369354cf908678 · plotly/dash-core-components · GitHub

The docstring that we provide (dash-core-components/src/components/Input.react.js at bdb22329b6a62e392ae7707da0369354cf908678 · plotly/dash-core-components · GitHub) is taken directly from the MDN docs (<input>: The Input (Form Input) element - HTML: HyperText Markup Language | MDN)

5

i started with that ‘autocomplete’ but i can’t see it in the result html

am i missing something? or is it only available from a specific version ?

Example: (valued are passed as parameters - so can be ignored)

....
auto_complete = 'current-password' if input_type=='password' else 'text'
print ('auto_complete:',auto_complete)
return  html.Div([
             html.Span(label,className='input-group-addon',id=name+'formControlLabel_'+ctx),
             dcc.Input(id=name+'formControl_'+ctx, placeholder=placeholder, type=input_type,value=default_value,className='form-control',autocomplete=auto_complete)
        ],className='input-group input-group-lg',id=name+'formControlContainer_'+ctx)
    ],className='col-3')

the result is

<div id="passwdformControlContainer_FSREL" class="input-group input-group-lg">
   <span id="passwdformControlLabel_FSREL" class="input-group-addon">Password</span>
   <input type="password" value="" id="passwdformControl_FSREL" class="form-control" placeholder="password">

</div>

and i get the following warning in the browser console:
[DOM] Input elements should have autocomplete attributes (suggested: “current-password”): (More info: https://goo.gl/9p2vKq) <input type=​"password" value id=​"passwdformControl_FSREL" class=​"form-control" placeholder=​"password">​

>>> import dash_core_components as dcc
>>> dcc.__version__
'0.22.0'