Inline create input:color and click()

Question

It appear chrome has a bug with <input type="color">

This code works : (with a file input)

var input = document.createElement('input');
    input.type = 'file';
    input.click();

But this code not : (with a color input)

var input = document.createElement('input');
    input.type = 'color';
    input.click();

Why ? :-(

To test the code, you can open the console browser and paste the code. Thanks for your help.

Answer 1

Try this

var input = document.createElement('input');
  
input.setAttribute("type", "color");
document.body.appendChild(input);

input.addEventListener("click", onColorBoxClick); 

function onColorBoxClick(){
console.log('onclick');
}

Answer 2

you just create it in a variable and must append it to body. so at the end must write this:

document.body.appendChild(input);

Answer 3

Tested on latest chrome edge an firefox

Only firefox is able to open the modal from the console Chrome and Edge do nothing

So this is some kind of bug/feature

Answer 4

Soluced !

For color input it need to add the input into the dom. In my context (angular) I had need to add a second code line for fix the insert into dom delay like this :

var input = document.createElement('input');
    input.type = 'color';
    input.style.opacity = 0;

document.body.appendChild(input);

$timeout(function() {
    input.click();
}, 100);

Answer 5

That is a security risk to do this, so i think it will not available in all browsers, supposedly IE does allow it, but Mozilla and Opera do not.

Check this answer:

In JavaScript can I make a "click" event fire programmatically for a file input element?