fix(studio): SliderWithTextInput doesn't accept out of range partial inputs - #1111
fix(studio): SliderWithTextInput doesn't accept out of range partial inputs#1111steramae-nvidia wants to merge 1 commit into
Conversation
…inputs Signed-off-by: Sean Teramae <steramae@nvidia.com>
|
This change is part of the following stack: Change managed by git-spice. |
📝 WalkthroughWalkthroughChangesNumeric input handling
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
web/packages/common/src/components/SliderWithTextInput/index.tsx (1)
19-19: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winUse
import typefor type-only symbols.
ComponentPropsandReactNodeare 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 typefor 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
📒 Files selected for processing (3)
web/packages/common/src/components/ModelSelectV2/InferenceParameters.test.tsxweb/packages/common/src/components/SliderWithTextInput/SliderWithTextInput.test.tsxweb/packages/common/src/components/SliderWithTextInput/index.tsx
| 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); | ||
| }; |
There was a problem hiding this comment.
🎯 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.
| 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.
|
Signed-off-by: Sean Teramae steramae@nvidia.com
Summary by CodeRabbit