Nothing happens when setColor()

[phuze]

Your question

Nothing appears to be happening when I use pickr.setColor().

What I expect to happen, is the color presentation box (the button?) to change, along with the value inside of the pop-up selector (the input box).

In my case, it just remains as the default value.

const pickr = Pickr.create({
    el: '.color-picker',
    theme: 'classic',
    default: '#000000',
    swatches: ['#FF0000'],
    lockOpacity: true,
    components: {
        preview: true,
        opacity: false,
        hue: true,
        interaction: {
            hex: true,
            rgba: true,
            hsla: false,
            hsva: false,
            cmyk: true,
            input: true,
            clear: true,
            save: true
        }
    }
})

pickr.setColor('#BADA55')

I've tried using pickr.applyColor(), which has also had no impact. I can confirm however, that the color is changing, at least behind the scenes.

console.log('color', pickr.getColor().toHEXA().toString())
// returns #000000

pickr.setColor('#BADA55')
console.log('color', pickr.getColor().toHEXA().toString())
// return #BADA55

Your environment:

Version: 1.8.1 Used bundle: modern Used theme: classic Browser-version: Edge 92.0.902.67 Operating-system: Windows 10

[simonwep]

You'll have to wait for the init event since you'll have to wait for pickr to be mounted:

pickr.on('init', () => {
   pickr.setColor('#BADA55');
})