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…
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/extract-attributes.js at master · plotly/dash-html-components · GitHub, output here: dash-html-components/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
autocomplete, it looks like it is included but camelCased:
good to know for html components
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,
the autocomplete available has a different meaning - i checked the source on github
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'
dcc.Input(id=name+'formControl_'+ctx, placeholder=placeholder, type=input_type,value=default_value,className='form-control',autocomplete=auto_complete)
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">
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