Color change after initial render

[davideferre]

There’s no way to update the default color after the component is rendered. It can be done using the did-update method from ember-render-modifiers add-on.

[davideferre]

@astronomersiva @richard-viney I’m trying to update the picker color through the .setColor method called from didUpdateAttrs but I get a “t.match” error. Any suggestions?

[richard-viney]

Do you have a fork/branch somewhere?

You should be able to call this._pickr.setColor(<string>), or alternatively setHSVA(). Full docs are here: https://github.com/Simonwep/pickr#methods

When I decided to drop this add-on in favour of an in-house solution we added automatic updating for this sort of thing, so there shouldn't be any problem with the concept of what you're trying to achieve here.

[davideferre]

@richard-viney sure, you can find it there.

I've added:

didUpdateAttrs() {
    this._super(...arguments);
    let _value = this.get('value');
    this._pickr.setColor(this.formatColor(_value));
  }

But I get TypeError: t.match is not a function running this test:

test('it re-renders', async function(assert) {
    this.set('colorValue', '#ffffff');
    await render(hbs`{{color-picker value=colorValue default=colorValue}}`);
    await sleep(1000);

    assert.equal(
      getComputedStyle(this.element.querySelector('.pcr-button')).color,
      'rgb(255, 255, 255)'
    );

    this.set('colorValue', '#ff0000');
    await sleep(1000);
    assert.equal(
      getComputedStyle(this.element.querySelector('.pcr-button')).color,
      'rgb(255, 0, 0)'
    );
  });

[richard-viney]

There's some weird stuff happening in that component, e.g. the value: computed() property that appears to override the value arg being passed in.

You're getting that error because the code is passing an HSVA colour into a function that's expecting a string. You may have more luck using {{did-update ... @value}}, which would require bumping @ember/render-modifiers to the dependencies and requiring Ember >= 3.8.

Running into things like this was why I decided to roll my own component wrapper around Pickr that uses the new Octane idioms. It's very lightweight given that I didn't need most of the features of Pickr anyway, so adding this project as a dependency didn't really make sense. Still, your situation may be different, and it would certainly be good to upgrade this project to the more modern practices.

[davideferre]

Ok thank you for your interest. In the next day I will try to install directly pickr package and I’ll try to see what I have to do for building my own component. Maybe is the best way to have octane compatibility at the moment. Thank you so much @richard-viney !