Your illustration would work for a primarily mobile app. It's very similar to Angular's GMD Select widget, except that would appear over (on Z-axis) the control, not next to it.
If your users expect to enter lots of numerical information regularly, they might be inclined to use the keypad. If this is the case (some research may be in order), I would apply the following:
1) Numerical input: Performed via keypad, advance to next field with Enter or tab (if there's no conflict, you could support both)
2) Increment: Since you have no mathematical operations in this mode, allow increment/decrement with keypad +/- and/or cursor up/dn, with PgUp/PgDn for larger increments. Don't allow the scroll wheel to change values unless the list is open... users could inadvertently change values as they're scrolling down the page.
This is not an either/or solution, you need to consider all your users' possible devices and skill levels. A beginner will probably use the mouse until they develop their skill with the application, at which point they'll want something faster.
I would definitely support more than one method for each interaction... providing multiple paths to success, whether keyboard, mouse or touch, is a good thing.