Repository navigation
dcc.Input type="color" raises error #2772
Description
dcc.Input(type="color")
is implemented and works correctly. However the components description, doc string (except for on ReadOnly section) and type checking is not up to date as it raises:
Invalid argument `type` passed into Input with ID "set-color-input".
Expected one of ["text","number","password","email","range","search","tel","url","hidden"].
Value provided: "color"
Activity
alexcjohnson commentedon Mar 1, 2024
Thanks @luggie (transferred the issue to dash, dcc has been merged in here so the other repo is obsolete)
When you say it's implemented, you mean it works correctly if you disable prop checking? If so, we should be able to just add color as an option here:
dash/components/dash-core-components/src/components/Input.react.js
Lines 221 to 232 in e580ff0
We will want to check on the comment
// Only allowing the input types with wide browser compatibility- perhaps when we first wrote this componentcolorwas poorly supported but now it's close to universal?AnnMarieW commentedon Mar 1, 2024
One issue with adding the
colorprop is that if someone clicks and drags on the color picker, it will fire the callback a bazillion times. Not sure if there is a way to prevent that, or maybe just recommend people use this option in a clientside callback only?alexcjohnson commentedon Mar 1, 2024
dcc.Inputhas adebounceprop, which should help with that.luggie commentedon Mar 2, 2024
yep, that's what I thought
qlandman commentedon Jul 12, 2024
Would it also be possible to also add the
datetype as an alternative for the Dash DatePicker?budescode commentedon Nov 3, 2026
I have opened #4115 for this. It adds color to the allowed type values of dcc.Input, with a test, so dcc.Input(type="color") renders the native colour picker and the chosen colour reaches the callback as #rrggbb.
On the concern about the callback firing on every change while dragging in the picker: debounce=True already covers that, the value is sent when the picker closes.