Make ComboboxQuantityInput reactive to parent state change #10083
Conversation
WalkthroughThe pull request modifies the Changes
Suggested labels
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for care-ohc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Deploying care-fe with
|
| Latest commit: |
ca6701d
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://190e44ff.care-fe.pages.dev |
| Branch Preview URL: | https://combobox-reactive.care-fe.pages.dev |
CARE
|
||||||||||||||||||||||||||||
| Project |
CARE
|
| Branch Review |
combobox-reactive
|
| Run status |
|
| Run duration | 02m 51s |
| Commit |
|
| Committer | Shivank Kacker |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
0
|
Flaky
|
0
|
Pending
|
0
|
Skipped
|
0
|
Passing
|
5
|
| View all changes introduced in this branch ↗︎ | |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/components/Common/ComboboxQuantityInput.tsx (2)
Line range hint
43-63: Optimize state updates and prevent unnecessary onChange calls.The handleInputChange function should prevent unnecessary state updates and onChange calls:
Apply this diff to optimize the implementation:
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => { const value = e.target.value; if (value === "" || /^\d+$/.test(value)) { + if (value === inputValue) return; setInputValue(value); setOpen(true); setActiveIndex(0); if (value && selectedUnit) { + const newValue = parseInt(value, 10); + if (quantity?.value !== newValue || quantity?.unit !== selectedUnit) { onChange({ - value: parseInt(value, 10), + value: newValue, unit: selectedUnit, }); + } } } };
Line range hint
109-122: Enhance accessibility and error handling.The input field would benefit from improved accessibility and error state handling:
Apply these improvements:
<Input ref={inputRef} type="text" inputMode="numeric" pattern="\d*" value={inputValue} onChange={handleInputChange} onKeyDown={handleKeyDown} placeholder={placeholder} - className={cn("w-full text-sm", selectedUnit && "pr-16")} + className={cn( + "w-full text-sm", + selectedUnit && "pr-16", + !showDropdown && inputValue && "border-red-500" + )} + aria-label="Quantity input" + aria-invalid={!showDropdown && inputValue ? "true" : "false"} + aria-describedby={selectedUnit ? "selected-unit" : undefined} disabled={disabled} autoFocus={autoFocus} /> {selectedUnit && ( <div + id="selected-unit" className="absolute right-1.5 top-1/2 -translate-y-1/2 text-sm text-muted-foreground" + role="status" + aria-live="polite" > {selectedUnit.display} </div> )}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/Common/ComboboxQuantityInput.tsx(1 hunks)
🔇 Additional comments (1)
src/components/Common/ComboboxQuantityInput.tsx (1)
Line range hint
1-190: Overall implementation successfully achieves PR objectives.The changes successfully make the ComboboxQuantityInput component reactive to parent state changes while maintaining existing functionality. The implementation is solid, and with the suggested improvements for edge cases, performance, and accessibility, it will provide a robust solution for the Scribe feature.
|
@shivankacker Your efforts have helped advance digital healthcare and TeleICU systems. 🚀 Thank you for taking the time out to make CARE better. We hope you continue to innovate and contribute; your impact is immense! 🙌 |
Proposed Changes
@ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit