Exception when trying to update an int value from the client to the model in Java

If a property is defined as Number in client template (.html) and it tries to update its conterpart field in the Java Model that is also declared as a supported type, as an int, I get this exception:

Caused by: java.lang.IllegalArgumentException: The stored model value '1' type 'java.lang.String' cannot be used as a type for a model property with type 'int'
	at com.vaadin.flow.templatemodel.BasicModelType.modelToApplication(BasicModelType.java:64)

Source code used to reproduce the error:

<dom-module id="x-inter">
	<template>
		<input type="radio" name="toggle" id="id1" value= 1  on-change="_getSelected">One
		<input type="radio" name="toggle" id="id2" value= 2  on-change="_getSelected">Two
	</template>
	<script>
		class XInter extends Polymer.Element{
			static get is(){
				return "x-inter";
			}
			static get properties(){
				return {
					selectedIndex: {
						type: Number,
						reflectToAttribute: true,
						notify: true
					}
				};	
			}
			_getSelected(){
				if(this.shadowRoot.querySelector('input[name=toggle]:checked')){
					this.selectedIndex = this.shadowRoot.querySelector('input[name=toggle]:checked').value;
				}
				else
					this.selectedIndex = -1;
				this.dispatchEvent(new CustomEvent('change', {}));
			}
		}
		customElements.define(XInter.is, XInter);
	</script>
</dom-module>

<dom-module id="x-element">
	<template>
		<x-inter selected-index= {{selectedValue}} on-change="_valueChanged"></x-inter>
	</template>
	<script>
		class XElement extends Polymer.Element{
			static get is(){
				return "x-element";
			}
			static get properties(){
				return {
					selectedValue:{
						type: Number,
						notify: true
					}	
				};
			}
		}
		customElements.define(XElement.is, XElement);
	</script>
</dom-module>

@Tag("x-element")
@HtmlImport("x-element.html")
public class XElement extends PolymerTemplate<Model> {

  public XElement() {
    this.getElement().synchronizeProperty("selectedValue", "_valueChanged");
    this.getElement().addPropertyChangeListener("selectedValue", e -> {
      System.out.println(getModel().getSelectedValue());
    });
  }

  public interface Model extends TemplateModel {
    int getSelectedValue();
    void setSelectedValue(int value);
  }
}

[Legioth]

Seems like I was mistaken. Flow does in fact not automatically handle conversion from JS number to int in this case, so this is something that we should fix.

Until it is fixed, you can work around the problem using the suggested workaround of changing the model type to double instead of int.

[tdq]

isNaN is not guarantee that value is number if it returns false. It checks that value can be converted to number or nor, so isNaN(“1”) is false.