I cannot activate the change event of the input color element without clicking somewhere else. I'm coding a color picker. When I right click and select the section of my plugin from the context menu, I output a color input. However, after choosing a color, the input does not close. I have to click somewhere. I've been searching for hours, but I can't find a way to turn off the input as soon as the color is selected.

How to close an html5 color picker?

I have also examined the methods in the link above in detail. However, it is not working properly. I also looked at some color picker libraries, but I couldn't find a library where I can select the colors on the page. My goal is to close the color input and change the value when the user selects a color.

  var items = document.querySelector('.zfccolorv1');


    items.addEventListener('change', () => {
     
        document.querySelectorAll('.color-zfc-panel').forEach(es => {
            es.remove()
        });
        var hex = items.value
     
        console.log(hex)
        items.type='color'
        var z = document.createElement('div');
        z.classList.add('color-zfc-panel');
        z.classList.add('color-zfc-panel-a');
        document.body.appendChild(z);
    })

.color-zfc-panel{
    position:fixed;
    bottom: -100%;
    left: -100%;
    background-color: red;
    width: 100%;
    height: 70px;
}
.color-zfc-panel-a{
    bottom: 0;
    left: 0;
}

<input type="color" class="zfccolorv1">

I aim to change the value of the color input in the above snippet without clicking anywhere. I can't get the red box to appear as soon as the color is selected. I've looked through all the previous threads. However, it was written that there was no solution. It doesn't matter what I use. I'm trying to make an application that can give me the color code as soon as I click on the color on the page. Thanks in advance for your help.