Add direct numeric input for "Number of Questions" (Enhancement #647)

[MANVENDRA-github]

Fixes #647

Summary

This PR enhances the "Number of Questions" input by allowing users to directly enter a numeric value instead of relying solely on increment/decrement buttons.

Changes Made
Added alongside existing +/- controls
Implemented validation (minimum value = 1)
Handled edge cases (empty input, invalid values)
Removed default browser spinner UI for consistency
Preserved existing functionality (backward compatible)

Problem
Previously, users had to click the "+" button repeatedly to reach larger values, leading to poor UX.

Solution

Introduced a hybrid input system:
Direct typing for efficiency
Buttons for quick adjustments

Before:

After:

Summary by CodeRabbit

• New Features

  • Number field is now directly editable, accepts temporary empty input, and enforces a minimum value on blur; sanitized integer values are preserved and sent with requests.

• Style

  • Improved number-input styling for consistent, cleaner appearance across browsers and removed native spinner controls.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: c3b5eec9-d79f-4892-8dc6-1c521649c35f

📥 Commits

Reviewing files that changed from the base of the PR and between c0103a8 and ed44a44.

📒 Files selected for processing (1)

• eduaid_web/src/pages/Text_Input.jsx

🚧 Files skipped from review as they are similar to previous changes (1)

• eduaid_web/src/pages/Text_Input.jsx

---

📝 Walkthrough

Walkthrough

This change replaces a read-only question count display with an editable numeric input that enforces a minimum of 1, persists sanitized values to localStorage, and sends a validated integer max_questions to the backend. It also adds cross-browser CSS to normalize number input appearance (hide WebKit spinners, adjust Firefox appearance).

Changes

Cohort / File(s)	Summary
CSS Styling for Number Inputs eduaid_web/src/index.css	Added WebKit rules to hide ::-webkit-inner-spin-button/::-webkit-outer-spin-button and a Firefox rule (-moz-appearance: textfield) to normalize number input styling.
Numeric Input Handling eduaid_web/src/pages/Text_Input.jsx	Replaced read-only question count with <input type="number">. Input supports temporary empty string, parses numeric input on change, coerces/sanitizes to integer ≥ 1 for localStorage (numQuestions) and the backend payload (max_questions), and forces 1 on blur if empty/invalid.

Sequence Diagram(s)

mermaid
sequenceDiagram
participant User as User
participant UI as Text_Input.jsx (Component)
participant Storage as localStorage
participant API as Backend (request)

User->>UI: Type or use +/- on number input
UI->>UI: Update local state (allow "" temporarily)
UI->>Storage: Persist sanitized integer (`numQuestions`) — coerce to 1 if <1
UI->>UI: On blur, coerce empty/invalid -> 1
UI->>API: Send request with `max_questions` as sanitized integer

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 I hopped to the input, numbers in tow,
Type, click, or nudge — the value can grow.
I tuck empty blanks, coax them to one,
Spinners be gone, now input is fun! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: adding direct numeric input for 'Number of Questions' and references the enhancement issue.
Linked Issues check	✅ Passed	All coding objectives from #647 are met: numeric input field added, validation for minimum value of 1 implemented, edge cases handled, existing button functionality preserved, and browser spinner UI removed.
Out of Scope Changes check	✅ Passed	All changes are directly aligned with #647 objectives: CSS updates for spinner removal and JSX updates for numeric input implementation are both in scope.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

eduaid_web/src/pages/Text_Input.jsx (1)

83-89: ⚠️ Potential issue | 🟠 Major

Increment/decrement functions don't handle empty string state.

The new input allows numQuestions to temporarily be an empty string (line 221), but these functions weren't updated:

• incrementQuestions: "" + 1 produces "1" (string), not 1 (number)
• decrementQuestions: allows value to reach 0, inconsistent with min={1} validation

Proposed fix

 const incrementQuestions = () => {
-  setNumQuestions((prev) => prev + 1);
+  setNumQuestions((prev) => (typeof prev === "number" ? prev : 1) + 1);
 };

 const decrementQuestions = () => {
-  setNumQuestions((prev) => (prev > 0 ? prev - 1 : 0));
+  setNumQuestions((prev) => {
+    const current = typeof prev === "number" ? prev : 1;
+    return current > 1 ? current - 1 : 1;
+  });
 };

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@eduaid_web/src/pages/Text_Input.jsx` around lines 83 - 89, incrementQuestions
and decrementQuestions don't handle when numQuestions is the empty string:
update both to coerce the current state to a number (e.g., use Number(...) or
parseInt(...) with a fallback) before arithmetic, and ensure the result never
drops below the minimum 1 (consistent with the input's min={1}). Specifically,
in incrementQuestions call setNumQuestions with a function that converts prev to
a numeric value defaulting to 1 then adds 1; in decrementQuestions convert prev
to a numeric value defaulting to 1 then subtract 1 but clamp the result to a
minimum of 1 before calling setNumQuestions.

🧹 Nitpick comments (1)

eduaid_web/src/pages/Text_Input.jsx (1)

67-69: Consider validating before storing to localStorage.

Similar to the backend concern, numQuestions could be an empty string when stored. If other code reads this value expecting a number, it could cause issues.

Proposed fix

 localStorage.setItem("textContent", text);
 localStorage.setItem("difficulty", difficulty);
-localStorage.setItem("numQuestions", numQuestions);
+localStorage.setItem("numQuestions", typeof numQuestions === "number" && numQuestions >= 1 ? numQuestions : 1);

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@eduaid_web/src/pages/Text_Input.jsx` around lines 67 - 69, Validate and
normalize values before writing to localStorage: ensure numQuestions is parsed
to an integer (e.g., using parseInt) and falls back to a sensible default or is
not stored if invalid, and ensure text and difficulty are non-empty/expected
types; update the localStorage.setItem calls in the Text_Input component to
store the normalized/validated values (referencing variables text, difficulty,
numQuestions) instead of raw inputs.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@eduaid_web/src/pages/Text_Input.jsx`:
- Around line 213-236: numQuestions can be an empty string when the user clears
the field and immediately clicks Next, so validate and coerce it just before
sending to backend: in handleSaveToLocalStorage (and/or the function that calls
sendToBackend), parse numQuestions with parseInt(Number(...)) or Number() and if
result is NaN or <1 set to 1, then pass that numeric value as max_questions to
identify_keywords/sendToBackend; also add a defensive type check in the backend
call site that expects max_questions to be a number.

---

Outside diff comments:
In `@eduaid_web/src/pages/Text_Input.jsx`:
- Around line 83-89: incrementQuestions and decrementQuestions don't handle when
numQuestions is the empty string: update both to coerce the current state to a
number (e.g., use Number(...) or parseInt(...) with a fallback) before
arithmetic, and ensure the result never drops below the minimum 1 (consistent
with the input's min={1}). Specifically, in incrementQuestions call
setNumQuestions with a function that converts prev to a numeric value defaulting
to 1 then adds 1; in decrementQuestions convert prev to a numeric value
defaulting to 1 then subtract 1 but clamp the result to a minimum of 1 before
calling setNumQuestions.

---

Nitpick comments:
In `@eduaid_web/src/pages/Text_Input.jsx`:
- Around line 67-69: Validate and normalize values before writing to
localStorage: ensure numQuestions is parsed to an integer (e.g., using parseInt)
and falls back to a sensible default or is not stored if invalid, and ensure
text and difficulty are non-empty/expected types; update the
localStorage.setItem calls in the Text_Input component to store the
normalized/validated values (referencing variables text, difficulty,
numQuestions) instead of raw inputs.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: f1a0778e-3088-47b9-80ac-dbe5b9a55a42

📥 Commits

Reviewing files that changed from the base of the PR and between 2038116 and c0103a8.

📒 Files selected for processing (2)

• eduaid_web/src/index.css
• eduaid_web/src/pages/Text_Input.jsx