allowEmpty only works with type "text" not with type "color"

[MaggusK]

maybe there is a reason for this behaviour, but did't find out.

jQuery("#myInput").spectrum({ allowEmpty: true }); shows the empty-button only if input looks like <input type="text" id="myInput"/> and not if it looks like <input type="color" id="myInput"/>

using: //cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js //cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css

[johnalarcon]

You can enable allowEmpty on the color input type with 2 simple edits. Note that I didn't test this exhaustively; just proved it out in Firefox.

---

Step 1: Open spectrum.js, find line 240, and change it from this:

allowEmpty = opts.allowEmpty && !isInputTypeColor;

...to this...

allowEmpty = opts.allowEmpty;

---

Step 2: Open spectrum.css, find the .sp-clear-enabled .sp-clear rule that begins at line 113, and add a width property that matches the height property. The end result being:

.sp-clear-enabled .sp-clear {
    display: block;
    position:absolute;
    top:0px;
    right:0;
    bottom:0;
    left:84%;
    height: 28px;
    width:28px;   /* This line makes the "X" button square. */
}

[MaggusK]

Nice! Well, so it seems to be build in intentionally. But why?? Souldn't it get fixed like described by johnalarcon?

[johnalarcon]

I don't think the color input has a valid value to represent "transparent"...and that would be a good reason to remove support for it. Just a guess... @bgrins probably knows for sure.

For my application, I've set up listeners on the colorpickers which then transfer the color choices to various elements on the page in real-time. I'm only using the allowEmpty option on one colorpicker and it seems to be working great – the other 7 pickers on the page aren't affected.

Now, if only I could figure out how to get tabindex to work properly. 😅