Number input KTextbox should have an option to hide the default arrow buttons

[LianaHarris360]

Desired behavior

KTextbox of input type number should have a prop to hide the default arrow buttons.

Current behavior

In some areas of Kolibri, where KTextbox with type=number is used, icon buttons for changing the number appear beside it, yet the KTextbox still shows unnecessary default arrows.

[karankoder]

I would like to take this issue.

[MisRob]

Hi @karankoder, thank you, but this is not quite ready.

[MisRob]

Adding 'needs decisions' and 'proposal' stage. Some points to chat about for us:

• Could hiding the default arrow buttons affect a11y?
  • One example: What if the prop is used to hide the default arrow buttons in places that don't have custom buttons? Do we need documentation guidance to make sure it's not hidden in such use-cases?
• What's the name of the prop?

[karankoder]

Hey @MisRob,

Hiding the default number input arrows can impact accessibility, especially for keyboard users who rely on them for navigation. To handle this properly, we could take one of two approaches:

1. Introduce an optional hasCustomControls prop – If hideDefaultArrows is set to true but hasCustomControls is false, we log a warning in development mode to ensure accessibility isn’t compromised.

2. Improve documentation and best practices – Instead of adding a new prop, we make sure the usage of hideDefaultArrows is clearly documented, emphasizing that custom controls should always be present when hiding default ones.

I think second approach would be better, let me know your thoughts, and I can begin the implementation.

[MisRob]

Hi @karankoder, thanks for your input! We may label it as 'help wanted' as soon as we move it from proposal to final stage, however I am not yet sure when that will happen. I'm sorry for not being clear, I meant my questions as a general comment about what needs to happen here before it's ready.

[karankoder]

Hi @MisRob
Thanks for your update. I'll keep an eye on the progress and am happy to help whenever needed.

[AlexVelezLl]

This will help for this: https://stackoverflow.com/questions/3975769/disable-webkits-spin-buttons-on-input-type-number