Fallback with fallback-input-type=color and transparent color causes non-fatal warning

[robinmacharg]

If I have a non-inline swatch with a fallback button type of color and a transparent custom colour (i.e. "" or #12345600) I see a warning whenever I select the transparent color:

The specified value "#00000000" does not conform to the required format.  The format is "#rrggbb" where rr, gg, bb are two-digit hexadecimal numbers.`

I think this is due to the in-browser picker only supporting #rrggbb values and the use of an <input type="color"/> tag in the VSwatches.vue file (link). i.e. VSwatches uses a native picker that's wired up to the invalid hex code (or empty string). This lack of capability in the native picker is mentioned in the w3c html repo here and while that issue is closed I don't believe it's been resolved. Other color pickers allow the input of colors with non-opaque alpha values (see, e.g. https://vuetifyjs.com/en/components/color-pickers/). While these loose the eyedropper due to being pure JS and not browser supplied controls they do allow the input of semi-opaque colors. Wondering how much work it would be to either offer the developer a choice or picker, or handle full transparency as a special case? I do like the convenience of a swatch with a red / through it.

[saintplay]

Hi
I believe the current issue would be this one:
whatwg/html#3400

Wondering how much work it would be to either offer the developer a choice or picker, or handle full transparency as a special case?

I think offering a fallback for using a custom color picker is the most feasible option, however if you ever need that, why just don't use the other library color picker? (they also have support for swatches)

[robinmacharg]

I think offering a fallback for using a custom color picker is the most feasible option, however if you ever need that, why just don't use the other library color picker? (they also have support for swatches)

Partly loyalty 😀, partly really liking the functionality and default look of vue-swatches, and partly not necessarily wanting another component in my app. My workaround is to have a separate toggle to enable the picker, with disabled being implicitly clear. WFM, and thanks for the response!

[mdrejhon]

Relevant: whatwg/html#3400 (comment)