Skip to content

fix: add numeric keypad hints for weight and repetitions fields on mobile#1273

Open
Mehak-mahajan wants to merge 3 commits into
wger-project:masterfrom
Mehak-mahajan:fix/numeric-keypad-workout-log
Open

fix: add numeric keypad hints for weight and repetitions fields on mobile#1273
Mehak-mahajan wants to merge 3 commits into
wger-project:masterfrom
Mehak-mahajan:fix/numeric-keypad-workout-log

Conversation

@Mehak-mahajan

Copy link
Copy Markdown

Fixes #2409 (wger-project/wger)

Problem

On mobile browsers (iOS Safari, Chrome), the workout log input fields
for repetitions and weight show a full text keyboard instead of a
numeric keypad, making it slower to enter values during workouts.

Solution

Added inputMode hints to the input fields:

  • repetitions field: inputMode="numeric"
  • weight field: inputMode="decimal"

This tells mobile browsers to show the appropriate numeric keypad
while preserving existing functionality.

Testing

Tested on mobile browser - numeric keypad now appears when tapping
weight and repetitions fields.

@coveralls

Copy link
Copy Markdown
Collaborator

Coverage Status

coverage: 78.394%. remained the same — Mehak-mahajan:fix/numeric-keypad-workout-log into wger-project:master

}
},
htmlInput:{
inputMode: 'numeric'

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

better make this a decimal as well (while it's true that you can't do partial repetitions, this field is also used for other units such as "meters", where it does make sense)

@rolandgeider

Copy link
Copy Markdown
Member

Hey! Thanks for the PR! I just left you a small nitpick.

Another thing, if you have the motivation, do you want to check other places where we enter numbers? We'd have the same problem with the keyboard there as well

@Mehak-mahajan

Copy link
Copy Markdown
Author

"Thanks for the review! I've made the following updates:

Changed repetitions field from numeric to decimal as suggested
Added inputMode: 'decimal' to the height and weight fields in BmiCalculator.tsx
Added inputMode: 'decimal' to the value field in EntryForm.tsx

Please let me know if any further changes are needed!"

@munzzyy

munzzyy commented Jul 6, 2026

Copy link
Copy Markdown

Pulled this branch to check the CI failure and it's a real syntax error, not a flaky run.

src/components/Nutrition/screens/BmiCalculator.tsx around line 111-118: the second TextField's slotProps is missing a comma between input: { endAdornment: ... } and the new htmlInput: { inputMode: 'decimal' } line, so it's not valid object syntax:

slotProps={{
    input: {
        endAdornment: <Typography>{t('server.kg')}</Typography>
    }
        htmlInput: { inputMode: 'decimal' }   // <- no comma above, and this isn't inside `input`'s braces either
}}

That's what's failing the build step in CI (, or } expected at BmiCalculator.tsx:117:41).

Separately, and maybe more important: issue #2409 is specifically about the workout set-logging fields (repetitions + weight, entered during a workout), not the BMI calculator. Looking at SessionLogsForm.tsx, the repetitions field (logs.${index}.repetitions, the WgerTextField right above the weight one this PR touches) never got an inputMode hint at all — so even once the build is fixed, half of what the issue asked for (the numeric keypad for reps) still wouldn't be there.

Happy to see this land once it's green — just flagging so it doesn't merge broken.

@Mehak-mahajan

Copy link
Copy Markdown
Author

"Thanks for the detailed review! I've made the following fixes:

Fixed the missing comma/syntax error in BmiCalculator.tsx between input and htmlInput in slotProps
Confirmed inputMode: 'decimal' is added to the repetitions field in SessionLogsForm.tsx

Regarding the BmiCalculator.tsx changes — the maintainer @rolandgeider suggested checking other places where numbers are entered, so I added inputMode: 'decimal' there as well. Happy to remove those changes if they are out of scope for this issue!
Please let me know if anything else needs fixing!"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants