NumberInput Enhancements

[J2ane]

🔹 Summary Propose improvements for the NumberInput component to enhance usability and styling.

🔹 Motivation The current NumberInput component has some usability and visual issues:

1. Focusing the input box changes its style unexpectedly (e.g., a black border appears).
2. Changing the value does not automatically blur the input, requiring manual blur handling.
3. There is no alternative styling options for the input box.
4. The input field cannot automatically restrict input to only numbers and the minus sign, requiring developers to write their own regular expressions.

Improving these aspects will make the component more intuitive and visually consistent.

🔹 Proposed Changes

1. Remove style changes on focus

   • The input box should not change its border color or style when focused.
   • Example: current version draws a black border on focus (see Fig.1).

2. Auto-blur on value change

   • When the user modifies the value (either by typing and pressing Enter, or by using the increment/decrement buttons), the input field should automatically lose focus.
   • Current behavior requires manually adding blur logic (see Fig.2, Fig.3 shows the desired appearance).

3. Add alternative styling options

   • Provide additional predefined styles for the NumberInput component (e.g., as shown in Fig.4).

4. Allow only numbers and the minus sign

• The NumberInput should only allow entering digits and the - character, and this should be handled internally by the component.

• It should not require the developer to provide a custom regular expression, nor should it depend on any third-party regex library.

🔹 Additional Context

• Fig.1:

• Fig.2:

• Fig.3:

• Fig.4: