Skip to content

fix(studio): SliderWithTextInput doesn't accept out of range partial inputs - #1111

Open
steramae-nvidia wants to merge 1 commit into
mainfrom
steramae/fix-slider-inputs
Open

fix(studio): SliderWithTextInput doesn't accept out of range partial inputs#1111
steramae-nvidia wants to merge 1 commit into
mainfrom
steramae/fix-slider-inputs

Conversation

@steramae-nvidia

@steramae-nvidia steramae-nvidia commented Aug 5, 2026

Copy link
Copy Markdown
Contributor

Signed-off-by: Sean Teramae steramae@nvidia.com

Summary by CodeRabbit

  • Bug Fixes
    • Improved numeric slider inputs so values can be cleared and replaced more easily.
    • Users can now type intermediate values without immediate clamping or unwanted formatting.
    • Out-of-range values are automatically corrected when editing is complete.
    • Invalid input is preserved while editing instead of being unexpectedly discarded.
    • Slider and reset interactions now consistently update the associated text field.

…inputs

Signed-off-by: Sean Teramae <steramae@nvidia.com>
@steramae-nvidia

Copy link
Copy Markdown
Contributor Author

This change is part of the following stack:

Change managed by git-spice.

@steramae-nvidia
steramae-nvidia requested review from a team as code owners August 5, 2026 21:19
@github-actions github-actions Bot added the fix label Aug 5, 2026
@coderabbitai

coderabbitai Bot commented Aug 5, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

📝 Walkthrough

Walkthrough

Changes

Numeric input handling

Layer / File(s) Summary
Draft input and commit behavior
web/packages/common/src/components/SliderWithTextInput/index.tsx
The component preserves draft text during editing, commits valid values, clamps drafts on blur, and clears drafts after slider or reset changes.
Interaction and state validation
web/packages/common/src/components/SliderWithTextInput/SliderWithTextInput.test.tsx, web/packages/common/src/components/ModelSelectV2/InferenceParameters.test.tsx
Tests cover slider input events, editable out-of-range prefixes, blur clamping, decimal values, and controlled temperature updates.

Suggested reviewers: a2bondar

🚥 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 and concisely describes the main change: allowing out-of-range partial inputs in SliderWithTextInput.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch steramae/fix-slider-inputs

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🧹 Nitpick comments (1)
web/packages/common/src/components/SliderWithTextInput/index.tsx (1)

19-19: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Use import type for type-only symbols.

ComponentProps and ReactNode are only used as types.

Proposed fix
-import { ComponentProps, ReactNode, useState } from 'react';
+import { useState } from 'react';
+import type { ComponentProps, ReactNode } from 'react';

As per coding guidelines, “Use import type for type-only imports.”

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@web/packages/common/src/components/SliderWithTextInput/index.tsx` at line 19,
Update the import in the SliderWithTextInput component so ComponentProps and
ReactNode are imported with import type, while keeping useState as the regular
runtime import.

Source: Coding guidelines

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@web/packages/common/src/components/SliderWithTextInput/index.tsx`:
- Around line 84-95: The handleTextInputBlur function must not invoke
attributes?.Slider?.onValueChange?. Remove that callback invocation while
preserving the existing parsing, clamping, equality check, and field.onChange
behavior; text-input updates should continue through the TextInput callback
path.

---

Nitpick comments:
In `@web/packages/common/src/components/SliderWithTextInput/index.tsx`:
- Line 19: Update the import in the SliderWithTextInput component so
ComponentProps and ReactNode are imported with import type, while keeping
useState as the regular runtime import.
🪄 Autofix

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: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Enterprise

Run ID: 1425855e-89e1-46be-bb94-3f9876eff086

📥 Commits

Reviewing files that changed from the base of the PR and between 73670d7 and 9902e17.

📒 Files selected for processing (3)
  • web/packages/common/src/components/ModelSelectV2/InferenceParameters.test.tsx
  • web/packages/common/src/components/SliderWithTextInput/SliderWithTextInput.test.tsx
  • web/packages/common/src/components/SliderWithTextInput/index.tsx

Comment on lines +84 to 95
const handleTextInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {
const rawValue = draftValue;
setDraftValue(null);
attributes?.TextInput?.onBlur?.(event);
if (rawValue === null || rawValue === '') return;
const numberValue = parseFloat(rawValue);
if (Number.isNaN(numberValue)) return;
const clampedValue = clamp(numberValue);
if (clampedValue === field.value) return;
field.onChange(clampedValue);
attributes?.TextInput?.onValueChange?.(clampedValue.toString(), event);
attributes?.Slider?.onValueChange?.(clampedValue);
};

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Do not invoke the Slider callback from a text-input blur.

Line 94 invokes attributes.Slider.onValueChange after a TextInput blur. Valid text input changes use attributes.TextInput.onValueChange instead. A separate slider handler can receive an unexpected update.

Proposed fix
     if (clampedValue === field.value) return;
     field.onChange(clampedValue);
-    attributes?.Slider?.onValueChange?.(clampedValue);
   };
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const handleTextInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {
const rawValue = draftValue;
setDraftValue(null);
attributes?.TextInput?.onBlur?.(event);
if (rawValue === null || rawValue === '') return;
const numberValue = parseFloat(rawValue);
if (Number.isNaN(numberValue)) return;
const clampedValue = clamp(numberValue);
if (clampedValue === field.value) return;
field.onChange(clampedValue);
attributes?.TextInput?.onValueChange?.(clampedValue.toString(), event);
attributes?.Slider?.onValueChange?.(clampedValue);
};
const handleTextInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {
const rawValue = draftValue;
setDraftValue(null);
attributes?.TextInput?.onBlur?.(event);
if (rawValue === null || rawValue === '') return;
const numberValue = parseFloat(rawValue);
if (Number.isNaN(numberValue)) return;
const clampedValue = clamp(numberValue);
if (clampedValue === field.value) return;
field.onChange(clampedValue);
};
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@web/packages/common/src/components/SliderWithTextInput/index.tsx` around
lines 84 - 95, The handleTextInputBlur function must not invoke
attributes?.Slider?.onValueChange?. Remove that callback invocation while
preserving the existing parsing, clamping, equality check, and field.onChange
behavior; text-input updates should continue through the TextInput callback
path.

@github-actions

github-actions Bot commented Aug 5, 2026

Copy link
Copy Markdown
Contributor
Suite Lines Covered Line Rate Branch Rate
Unit Tests 30781/39277 78.4% 62.8%
Integration Tests 18075/37229 48.5% 21.1%

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

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant