Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
MaggusK opened this issue Jan 28, 2020 · 3 comments
Open

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

MaggusK opened this issue Jan 28, 2020 · 3 comments

Comments

@MaggusK
Copy link

MaggusK commented Jan 28, 2020

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
Copy link

johnalarcon commented Jan 19, 2021

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
Copy link
Author

MaggusK commented Jan 20, 2021

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

@johnalarcon
Copy link

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. 😅

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants