Vaadin 14, Polymer 3 and Paper-Swatch-Picker

Hi All,

So I’ve decided to keep paper-swatch-picker now I’ve migrated to Vaadin 14. I think I’ve done everything correctly, the paper-swatch-picker shows up in the GUI and works fine. The bit that is not working is listening for the value change (when selecting a color).

It worked fine with Vaadin 13 and Polymer 2. I just used

colorPicker.addValueChangeListener(e -> {});

Now that doesn’t seem to be firing.

My .js looks like this…

import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/paper-swatch-picker/paper-swatch-picker.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
      <paper-swatch-picker color="{{selectedColor}}"></paper-swatch-picker>
    `;
  }
  
  static get is() {
	  return 'my-paper-swatch-picker';
  }
}

customElements.define(SampleElement.is, SampleElement);

and my component looks like this…

@Tag("my-paper-swatch-picker")
@JsModule("./js/paper-swatch-picker.js")
public class ColorPicker extends AbstractSinglePropertyField<ColorPicker, String> {

	ColorPicker(String propertyName, String defaultValue, boolean acceptNullValues) {
		super(propertyName, defaultValue, acceptNullValues);
	}
	
	public ColorPicker(String defaultVal) {
		super("color", defaultVal, false);
	}
}

What am I missing with polymer 3 to get the valueChangeEvent to fire??

Thanks,

Stuart.

Ok, I’ve accidentally solved this :slight_smile:

While trying to style the paper-swatch-picker I noticed that there was an extra wrapper around the html tags. So I removed my .js file and imported the paper-swatch-picker.js file directly…

@Tag("paper-swatch-picker")
@JsModule("@polymer/paper-swatch-picker/paper-swatch-picker.js")
public class ColorPicker extends AbstractSinglePropertyField<ColorPicker, String> {

	ColorPicker(String propertyName, String defaultValue, boolean acceptNullValues) {
		super(propertyName, defaultValue, acceptNullValues);
	}
	
	public ColorPicker(String defaultVal) {
		super("color", defaultVal, false);
	}
}

Although I’m sure I tried that earlier… Its working now :slight_smile:

S.