fix(input-field): fix pointer-events, disable chips when disabled, standardize CSS naming#742
fix(input-field): fix pointer-events, disable chips when disabled, standardize CSS naming#742rohanchkrabrty wants to merge 2 commits intomainfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Rate limit exceeded
Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 51 minutes and 38 seconds. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (9)
📝 WalkthroughWalkthroughThese changes add disabled state functionality to the Chip component and propagate it through the InputField component. The Chip component receives a new optional Possibly related issues
Suggested reviewers
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 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. Comment |
![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
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/raystack/components/chip/chip.tsx`:
- Around line 72-73: The chip's disabled state only prevents pointer input via
data-disabled/CSS but still leaves the dismiss <button> interactive via keyboard
because its onClick handler remains and it lacks a disabled attribute; update
the component(s) where you set onClick and data-disabled (refer to onClick,
data-disabled, and the dismiss <button> render) to: when disabled is true,
remove any click handlers (set onClick to undefined), add the disabled attribute
to the dismiss <button>, and include aria-disabled="true" to convey state to
assistive tech; apply the same change to the other occurrence around lines 86-89
so keyboard events cannot trigger dismissal when disabled.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 5977209b-e78e-495e-baf2-fdaa6bd02a9b
📒 Files selected for processing (9)
apps/www/src/content/docs/components/input-field/demo.tsapps/www/src/content/docs/components/input-field/index.mdxapps/www/src/content/docs/components/input-field/props.tspackages/raystack/components/chip/__tests__/chip.test.tsxpackages/raystack/components/chip/chip.module.csspackages/raystack/components/chip/chip.tsxpackages/raystack/components/input-field/__tests__/input-field.test.tsxpackages/raystack/components/input-field/input-field.module.csspackages/raystack/components/input-field/input-field.tsx
| onClick={disabled ? undefined : onClick} | ||
| data-disabled={disabled || undefined} |
There was a problem hiding this comment.
Disabled state can still allow dismiss via keyboard path.
data-disabled + CSS pointer-events: none blocks pointer input, but the dismiss <button> still has an active click handler and no disabled attribute. That can still permit keyboard-triggered dismissal in disabled mode.
Proposed fix
export const Chip = ({
@@
}: ChipProps) => {
- const handleDismiss = (e: React.MouseEvent) => {
+ const handleDismiss = (e: React.MouseEvent<HTMLButtonElement>) => {
e.stopPropagation();
+ if (disabled) return;
onDismiss?.();
};
@@
{isDismissible ? (
<button
onClick={handleDismiss}
+ disabled={disabled}
+ aria-disabled={disabled || undefined}
className={styles['dismiss-button']}
aria-label={`Remove ${
typeof children === 'string' ? children : 'item'
}`}
type='button'
>Also applies to: 86-89
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/raystack/components/chip/chip.tsx` around lines 72 - 73, The chip's
disabled state only prevents pointer input via data-disabled/CSS but still
leaves the dismiss <button> interactive via keyboard because its onClick handler
remains and it lacks a disabled attribute; update the component(s) where you set
onClick and data-disabled (refer to onClick, data-disabled, and the dismiss
<button> render) to: when disabled is true, remove any click handlers (set
onClick to undefined), add the disabled attribute to the dismiss <button>, and
include aria-disabled="true" to convey state to assistive tech; apply the same
change to the other occurrence around lines 86-89 so keyboard events cannot
trigger dismissal when disabled.
…andardize CSS naming - Remove duplicate pointer-events declarations on leading/trailing icon styles, keeping only pointer-events: auto - Add disabled prop to Chip component with data-disabled attribute and CSS styling - Pass InputField disabled state to chips to prevent dismiss interaction - Rename .inputWrapper to .input-wrapper for consistent kebab-case naming - Add tests for disabled chip behavior in both Chip and InputField Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…ntainerRef prop Add demo showing disabled state with chips, update disabled prop description to document chip behavior, and add missing containerRef prop. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
rohanchkrabrty
force-pushed
the
fix/623-inputfield-pointer-events-chips-naming
branch
from
9bbdc63 to
8ce7116
Compare
2 participants
Summary
pointer-events: nonedeclarations from.leading-iconand.trailing-icon, keeping onlypointer-events: autoso icons remain clickable as intendeddisabledprop toChipcomponent withdata-disabledattribute and CSS styling (pointer-events: none; opacity: 0.5). InputField now passes its disabled state to chips, preventing dismiss button rendering and interaction.inputWrapperto.input-wrapperto match the kebab-case convention used by the other 17 CSS classes in the moduleTest plan
🤖 Generated with Claude Code