Radio Button group created using Designer doesn't trigger the changeValueEv

General
1

Here is my Polymer HTML

<vaadin-vertical-layout style="width: 100%; height: 100%;margin-left:30px;">
 <label class="search-label">Search</label>
 <vaadin-vertical-layout>
  <vaadin-horizontal-layout>
   <vaadin-radio-group value="productID" id="vaadinRadioGroup">
    <vaadin-radio-button name="productID" checked value="productID" id="vaadinRadioButton" tabindex="-1">
      Product ID 
    </vaadin-radio-button>
    <vaadin-radio-button name="sellerID" value="sellerID" id="vaadinRadioButton1" tabindex="0" checked>
      Seller &amp; Product ID 
    </vaadin-radio-button>
    <vaadin-radio-button name="ean" value="ean" id="vaadinRadioButton2" tabindex="0" checked>
      EAN 
    </vaadin-radio-button>
   </vaadin-radio-group>
  </vaadin-horizontal-layout>
  <vaadin-vertical-layout id="sellerIdSearch" class="searchParams">
   <vaadin-text-field label="Seller ID" placeholder="" id="sellerID" class="search-text-field-size"></vaadin-text-field>
   <vaadin-horizontal-layout>
    <vaadin-text-field label="Product ID" placeholder="" id="productID" class="search-text-field-size"></vaadin-text-field>
    <vaadin-button theme="primary" class="search-button">
      Search 
    </vaadin-button>
   </vaadin-horizontal-layout>
  </vaadin-vertical-layout>
  <vaadin-vertical-layout style="width: 100%; height: 100%;" id="productIdSearch" class="searchParams">
   <vaadin-horizontal-layout>
    <vaadin-text-field label="Product ID" placeholder="" id="productID" class="search-text-field-size"></vaadin-text-field>
    <vaadin-button theme="primary" class="search-button">
      Search 
    </vaadin-button>
   </vaadin-horizontal-layout>
  </vaadin-vertical-layout>
 </vaadin-vertical-layout>
</vaadin-vertical-layout>

The corresponding Java companion code is as below

@Route("product-detail-view-search")
@Tag("product-detail-view-search")
@JsModule("./src/productdetailview/product-detail-view-search.js")
@CssImport("./styles/product-detail-view-search.css")
public class ProductDetailViewSearch extends PolymerTemplate<ProductDetailViewSearchModel> {


    @Id("vaadinRadioGroup")
    private RadioButtonGroup<String> vaadinRadioGroup;
    @Id("sellerID")
    private TextField sellerID;
    @Id("productID")
    private TextField productID;
    @Id("productID")
    private TextField productID;
    @Id("sellerIdSearch")
    private VerticalLayout sellerIdSearch;
    @Id("productIdSearch")
    private VerticalLayout productIdSearch;

    /**
     * Creates a new ProductDetailViewSearch.
     */
    public ProductDetailViewSearch(){

        sellerIdSearch.addClassName("hide-search-params");

        vaadinRadioGroup.addValueChangeListener(radioButtonEvent -> {
            System.out.println("The event is triggered.......")
        });
    }

    /**
     * This model binds properties between ProductDetailViewSearch and product-detail-view-search
     */
    public interface ProductDetailViewSearchModel extends TemplateModel {
        // Add setters and getters for template properties here.
    }

}

The change in the radio button value does not trigger the changeValueEvent. Anything I am missing here??