Scrollwheel may surprisingly change number input fields (on Firefox)

[bernhardreiter]

When using the scrollwheel, if the mouse pointer moves over a number input field,
further scrolling will not move the page, but changes the number.

Expected behaviour: should continue scrolling the page.

Reproduced with 0.5.3-dev on firefox 52.5.0.
Chromium 57.0.2987.98 behaves as expected.

[bernhardreiter]

The only input type type="number" are in OrgCard.vue for asn and sector_id.

[bernhardreiter]

Searching for known reports or solutions:
https://stackoverflow.com/questions/9712295/disable-scrolling-on-input-type-number
recommends to change mousewheel events in case of focus on a number input field.

https://bugzilla.mozilla.org/show_bug.cgi?id=1327816

Conclusion: It is a problem specific to firefox, but there is no published timeline for a fix.

Technical ideas

• use the text type, add the validation via vue
• use the text type with v-model.number , still allows entering complete numbers and will fail in commit later. As commit messages have to be transported to the user in a later version of fody anyway, this seems a step forward.
• mess with the mouse wheel events

Specs

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

[bernhardreiter]

Added evidence to the upstream problem report https://bugzilla.mozilla.org/show_bug.cgi?id=1327816

Implementation progress

• Using v-model.number with attribute pattern="[1-9][0-9]*" does not seem to prevent when entering abc directly. It does prevent entering 123abc though.
• https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events with a custom validation function will solve the issue but is a lot more code.
• keeping the type="number" and changing the event behaviour would be more declaritive, and may prevent that scrolling stops when the mouse is over the focussed input field.

[bernhardreiter]

number still allows for entries like 1.1 which will lead to a non-working commit and because of #56 and #29 the usability in this situation is suboptimal.

Thus the solution I prefer is to use a custom validation function that only allows the field to be empty
or an integer. To be implemented as Vue components (maybe there is already one somewhere).

[bernhardreiter]

Work resumed. Observation: When reproducing the problem, it only happens if the input field is has the focus (e.g. after being clicked in), otherwise the scroll will just go over the field.

Implementation notes

There is no obvious vue component availablee that would help.

[bernhardreiter]

implementation completed with d9f689b see 6a51c2f...d9f689b
and tested with Firefox 52.6.0 Debian Desktop and Chromium 57.0.2987.98 (Debian Desktop).

This was harder as expected because

• there are usability problems if you enter a bad character
  and lose the last input chars completely, so I had to extend it by keeping track of the last valid value.
• Another small code path was introduced by accepting an empty string ('') to allow an undefined value similiar to the regular <input>.
• Chromium and Firefox behave differently in the comparision sanitizedValue !== Number(value) which needed to be analysed and lead to a change, after an intermediate revision fully worked on Firefox.

[bernhardreiter]

Two improvements have been made up to a70ed30