Sphinxxxx/vanilla-picker

Does not work with input[type='button'] and mostly broken with button elements

Closed this issue · 4 comments

jabcreations commented

Vanilla-Picker is fantastic however it does not work with input elements at all and while it will hectically display when associated with a button element it immediately closes after any attempt of interaction.

My first suspicion was that HTML/XML added to the DOM was using a pseudo-element however it is now (pseudo-elements can not be applied to self-closing elements such as br and input).

My interest is to replace the default behavior of input[type='color'] with Vanilla Picker starting with the use of event.preventDefault(); however this is currently not possible. In the interim it appears that I'll have to utilize anchor elements and have them manipulate hidden input[type='color'] elements. As much as I'd love to go poking around through the code I simply can't at this point otherwise I would have naturally suggested a starting point of some kind.

Sphinxxxx commented

The picker should work with buttons - try changing a#basic or a#custom to <button> elements in the demo.

The problem with <input> elements is that the picker works by inserting itself as a child element of the "parent", and input elements don't allow child elements.

Jolly-Pirate commented

Curiously <button class="btn btn-secondary btn-sm" id="picker">Color</button> brings up the color picker but I can't interact with the sliders, as soon as I click them it closes the picker. Switching to <div class="btn btn-secondary btn-sm" id="picker">Color</div> or <a href> works. This happens on Firefox (52.9.0 ESR), not sure about recent versions. In Chrome 86 it works fine with a button element..

jabcreations commented

Curiously <button class="btn btn-secondary btn-sm" id="picker">Color</button> brings up the color picker but I can't interact with the sliders, as soon as I click them it closes the picker. Switching to <div class="btn btn-secondary btn-sm" id="picker">Color</div> or <a href> works. This happens on Firefox (52.9.0 ESR), not sure about recent versions. In Chrome 86 it works fine with a button element..

You should download "Waterfox Classic" which you can still run all extensions and still get security updates.
https://www.waterfox.net/download/#classic

Make sure you don't have a hidden element in the way (right-click and press Q).

  • 🎉1
Jolly-Pirate commented

I'll give Waterfox a try, never heard of it. And no, there's no hidden elements in the way.

P.S. Waterfox is awesome!!!

  • 🎉1