Improve vaadin-number-field

[samiheikki]

Connects to #296

This change is 

[tomivirkki]

If you use the stepper controls for increasing/decreasing the value, we probably don't want the field to unnecessarily get focused. Focusing the input opens the virtual keyboard on mobile which might be undesired. @jouni wdyt?

[jouni]

Yes, I agree with Tomi.

[samiheikki]

Removed input focus when using the stepper controls.

[samiheikki]

As I've been implementing this I have noticed that trying to validate the <input type="number"> value is surprisingly difficult.

input.value is not the same as the actual letters/numbers I'm typing to the input field (as shown in the demo) https://jsfiddle.net/samiheikki/q7dx8Lfw/12/ Try running it in Chrome & Safari

And thus I don't know what actually is typed in the number field when I'm relying on the browser's validated value of the number field.

So instead of using <input type="number"> & custom validation I'm seeing 2 alternative options.

<input type="text"> with our custom validation.

• input.value works as we expect it to.
• Easy to validate numbers and special characters like ,, ., -, e
• Hurts a11y

<input type="number"> with no custom validation.

• We can use input.value and that will always give us the correct numeric value
• Some browsers allow letters (but they are not added to the input.value)
• Works more like native <input type="number">

I'd be in favor of option 2. BTW I haven't implemented either of these yet.

@tomivirkki LMKWYT. I can discuss more about this.

[tomivirkki]

2. sounds like the better option

[tomivirkki]

@samiheikki UX of the last number field on the demo page (with steps) is pretty unexpected when using keyboard (both desktop and mobile). Can something be done about it?

[samiheikki]

@tomivirkki That could be achieved by adding !this.__userInput to this if clause: https://github.com/vaadin/vaadin-text-field/blob/finalize-feature/vaadin-number-field/src/vaadin-number-field.html#L202

But then it won't validate the step when input value changes. So not sure which is more correct behaviour.