Vaadin TextField that will only default to numeric keyboard on iOS - ios

Question

Do you know of a way to setup a TextField so that the numerical keyboard is shown instead of the regular one (cfr. a type attribute "number" in the input element)? Users are finding it annoying to always have to switch to the numeric keyboard for certain fields (these have to be filled out several hundred times per day!). Most related posts pertain to restricting the input to numbers which is not a problem.
Thanks,
William

Answer 1

For Vaadin:
Simply using Number Field
Number Field: Mobile browser shows dedicated input controls. Decrease and increase buttons for the value can be shown optionally.
NumberField dollarField = new NumberField("Dollars");
See the documentation example.
For Native iOS:
Simply set the keyboard type to NumberPad:
self.someTextField.keyboardType = UIKeyboardType.NumberPad
See the documentation for all the keyboard types.

Answer 2

There is a closed github issue about this here, but I'm not sure how the there mentioned slotting should work now. If this is now already possible without the workaround below, please feel free to let me know.
As far as I can tell, adding the attribute type="number" to the <vaadin-text-field> does not work, because this attribute should be on the actual <input> element within.
There is a workaround to do this: https://github.com/Artur-/vaadin-examples/blob/master/example-textfield-type/src/main/java/org/vaadin/artur/MainView.java#L42
TextField textfield = new TextField("Number Input");
textField.getElement().getNode().runWhenAttached(ui -> {
ui.getPage().executeJavaScript("$0.focusElement.type=$1", textField, "number");
});

Answer 3

In lieu of built-in components / add-ons, I found a lightweight solution in one of the samples from the archetype-application-example GitHub project.
In summary (only using relevant parts):
NumberTypeField.java:
package com.example;
import com.vaadin.data.util.converter.StringToIntegerConverter;
import com.vaadin.ui.TextField;
/**
* A field for entering numbers. On touch devices, a numeric keyboard is shown
* instead of the normal one.
*/
public class NumberTypeField extends TextField {
public NumberTypeField() {
// Mark the field as numeric.
// This affects the virtual keyboard shown on mobile devices.
AttributeExtension ae = new AttributeExtension();
ae.extend(this);
ae.setAttribute("type", "number");
}
public NumberTypeField(String caption) {
this();
setCaption(caption);
}
}
AttributeExtension.java:
package com.example;
import com.vaadin.annotations.JavaScript;
import com.vaadin.server.AbstractJavaScriptExtension;
import com.vaadin.ui.TextField;
/**
* A JavaScript extension for adding arbitrary HTML attributes for components.
*/
#JavaScript("attribute_extension_connector.js")
public class AttributeExtension extends AbstractJavaScriptExtension {
private static final long serialVersionUID = 1L;
public void extend(TextField target) {
super.extend(target);
}
#Override
protected AttributeExtensionState getState() {
return (AttributeExtensionState) super.getState();
}
public void setAttribute(String attribute, String value) {
getState().attributes.put(attribute, value);
}
AttributeExtensionState.java:
package com.example;
import com.vaadin.shared.JavaScriptExtensionState;
import java.util.HashMap;
/**
* Shared state class for {#link AttributeExtension} communication from server
* to client.
*/
public class AttributeExtensionState extends JavaScriptExtensionState {
private static final long serialVersionUID = 1L;
public HashMap<String, String> attributes = new HashMap<String, String>();
}
attribute_extension_connector.js (put in same source folder, e.g., com.example):
window.com_example_AttributeExtension = function() {
this.onStateChange = function() {
var element = this.getElement(this.getParentId());
if (element) {
var attributes = this.getState().attributes;
for (var attr in attributes) {
if (attributes.hasOwnProperty(attr)) {
element.setAttribute(attr, attributes[attr]);
}
}
}
}
}