Buggy behaviors in number input

[mohamedhyouns]

Summary

The slider plugin has several issues that make it difficult for users and developers to use.

Steps to reproduce

First Bug (Video)

This bug happens when the slider's step setting is greater than 1. You won’t see this problem in the current setup because the default settings don’t use a step greater than 1. To see the problem, use the DXPR Builder (mobile branch):

1. Switch to the mobile branch.
2. Add a new Divider element.
3. Turn on Custom Width (which uses a step greater than 1).
4. Try entering a number like 200 using the keyboard.

Second Bug

This bug stops you from clearing the input field, which causes problems in automated tests (e.g., using Selenium with clear method).

1. Try clearing the input field.

Third Bug

The slider uses a workaround that sends two events to fix a bug in DXPR Builder. This makes debugging and using the slider as a third-party plugin more difficult.

What is the current bug behavior?

1. First Bug: The slider doesn’t work well when the step is greater than 1, making it hard to type numbers.
   2. Second Bug: You can’t clear the input field, making testing harder.
2. Third Bug: The slider sends two events, making it hard to debug and use with other tools.

What is the expected correct behavior?

1. First Bug: You should be able to type numbers easily, even if the step is greater than 1.
   2. Second Bug: You should be able to clear the input field for testing.
2. Third Bug: The slider should only send one event, making it easier to debug and use with other tools.

Relevant logs and/or screenshots

• N/A

Possible fixes

1. First Bug: Update the slider so you can type numbers even if step is greater than 1.
   2. Second Bug: Change the slider so it allows the input field to be cleared and keep feature of resetting the slider to default value when the input is cleared.
2. Third Bug: Fix the event issue in DXPR Builder instead of using a workaround in the slider. Related issue: DXPR Builder Issue #2947.

[jjroelofs]

1. The number input is not a real form element in this use case, it is just a tool that enhances the slider input with the possibility for more accuracy, that is why it also should not have a name attribute, we don't want to submit it separately to the server.
2. A range element's value cannot be cleared, "empty" is not a valid state for it. That is why allowing the number input to be empty would be a bug.
3. The default value of a range input is to be in the center. When clearing the number input, it slider goes to the center, and the number input assumes the value corresponding to the middle of range slider. This is expected behavior.

[mohamedhyouns]

@jjroelofs #38 (comment)