Add option to show stepper buttons in number fields only when focused

[TatuLund]

Describe your motivation

When using number fields with mobile devices, there could be confusion with what field is focused and use of the stepper buttons. Hence it would be preferable that stepper buttons appear only when field is focused, and disappear when blurred. This is also related to native popup soft keyboard behavior.

This should be configurable option, e.g. attribute value. Naturally Java API needed too, for example something like follows could replace the boolean version of the function:

field.setStepButtonsVisible(StepButtonsVisible.AUTO); // Visible when focused
field.setStepButtonsVisible(StepButtonsVisible.HIDDEN); // Hide fully
field.setStepButtonsVisible(StepButtonsVisible.VISIBLE); // Always visible

Describe the solution you'd like

It is possible to create workaround by following JavaScript

        IntegerField field = new IntegerField("Integer");
        field.setStepButtonsVisible(false);
        field.getElement().executeJs(
                """
                        const field = this;
                        var buttonPressed = false;
                        field.addEventListener('focus', (e) => { 
                          if (!this.getAttribute('step-buttons-visible')) {
                            buttonPressed = false;
                            this.setAttribute('step-buttons-visible','');
                          }
                        });
                        const container = this.shadowRoot.querySelector('vaadin-input-container');
                        for (let i=0;i<container.children.length;i++) {
                            if (container.children[i].getAttribute('part')
                                    && container.children[i].getAttribute('part').endsWith('button')) {
                                container.children[i].addEventListener('click', (e) => {
                                   buttonPressed = true;
                                });
                            }
                        };
                        field.addEventListener('blur', (e) => {
                          setTimeout(() => {  
                            if (!buttonPressed) {
                              field.removeAttribute('step-buttons-visible');
                            }
                          }, 200);
                        });
                                """);

Describe alternatives you've considered

No response

Additional context

No response