kubermatic / kubermatic/dashboard

`input type="number"` are sensitive to mouse scroll events

Open
#7,642 6 comments 0 reactions 0 assignees View on GitHub
kind/design lifecycle/stale sig/ui
Dominant language
Go
Stars
50
Forks
73
Avg merge
2d 22h
Merged PRs (30d)
31

Description

**What is the problem, where is it and why is it an issue?**

All the `input type="number"` HTML fields are **sensitive to mouse scroll events to increase/decrease their values when the mouse sits on top of them**.

On the KKP Dashobard this behaviour leads to unintended modifications when scrolling e.g. on the cluster creation wizard just for the sake of scrolling up/down to the rest of form:

![Image](https://github.com/user-attachments/assets/0a50451d-4978-4928-9ef3-dba63373d9d0)

This becomes also sensitive on those inputs that don't wait for confirmation/consolidation on change, as it happens on the "Admin Settings" - e.g.:

Image

**Suggest how to fix it, if possible**

- Disable this behaviour in JS; by removing focus (`.blur()`) from such elements in the presence of a `wheel` event (as the AWS console does, for example).
- Use a custom component for numeric input fields that do not react to such event.

Contributor guide

Open the contributing guide

Research direction

Reproduce the behavior on numeric inputs in the cluster creation wizard and Admin Settings while scrolling with the mouse wheel. Locate the shared input handling or numeric input components, then verify that scrolling over focused number fields no longer changes their values while ordinary editing still works.

Written by the indexing model from the issue text.

Assessment

Tech stack
html, javascript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.