Setting a TextField's <input> element's "type" attribute to "number"

Flow
1

Hello everyone,

I have been experimenting with Vaadin 10 for several days now, but I’m still pretty new to Vaadin Flow (and quite unfamiliar with the client side of things).

In our application we have a form containing a TextField that requires the user to input a number. Validation and binding works flawlessly ; now I would like to set the HTML 5 <input>'s “type” attribute to “number” in order to facilitate input (particularily on mobile phones), and I cannot figure how.

  • Calling textfield.getElement().setAttribute("type", "number") sets the attribute on a parent <vaadin-text-field> element, and not on the inner <input> element ;

  • It seems impossible to access the TextField’s Element’s children (textfield.getElement().getChildCount() always returns zero) ;

  • Setting the “type” attribute works fine when using the [Element API]
    (https://vaadin.com/docs/v10/flow/element-api/tutorial-properties-attributes.html) exclusively (by calling ElementFactory.createInput() and manipulating the result), but then we lose the ability to bind data since there’s no Component object.

So I’d like to ask the following questions :

  1. Am I missing something ? Setting an <input> element’s “type” property would seem to me like a somewhat basic and frequent need…

  2. And if I’m not, and that is not possible as of yet, is there something planned that would allow it in the near future ?

  3. And if there’s not, what would be the simplest way for me to achieve it ?
    Looking at how other properties (like “autocorrect”) are set, I glanced at the client side ([vaadin-text-field.html]
    (http://https://github.com/vaadin/vaadin-text-field/blob/master/src/vaadin-text-field.html)) and saw an <input> element where several properties are defined (but not “type”). Would it be possible to create a component that somehow extends the existing TextField by adding only this property ?

Thanks for your help.

2

The real solution would be an implementation of https://github.com/vaadin/vaadin-text-field/issues/204

Without that, you can do something like https://github.com/Artur-/vaadin-examples/blob/master/example-textfield-type/src/main/java/org/vaadin/artur/MainView.java#L39

3

Ah I didn’t find the issue page, thank you for the link. Altough I understand the complexities arising from the variety of possible types, I hope this issue will be solved in some way in the future. Even simply allowing the user to set the attribute (while ignoring unsupported types and/or leaving it to the user to handle the consequences regarding validation) would be better than nothing, IMHO.

But your JavaScript solution works perfectly, and thank you very much for your example ! I would probably never have found that. We’ll use that until a real implementation of issue #204 is available.

Thanks again, cheers.