fix(input-field): fix pointer-events, disable chips when disabled, standardize CSS naming

[rohanchkrabrty]

Summary

• Fix duplicate pointer-events: Removed contradictory pointer-events: none declarations from .leading-icon and .trailing-icon, keeping only pointer-events: auto so icons remain clickable as intended
• Disable chips when input is disabled: Added disabled prop to Chip component with data-disabled attribute and CSS styling (pointer-events: none; opacity: 0.5). InputField now passes its disabled state to chips, preventing dismiss button rendering and interaction
• Standardize CSS naming: Renamed .inputWrapper to .input-wrapper to match the kebab-case convention used by the other 17 CSS classes in the module

Test plan

• All 44 existing InputField tests pass with updated CSS class references
• All 23 existing Chip tests continue to pass
• 3 new InputField tests: disabled chips hide dismiss button, set data-disabled, and remain interactive when not disabled
• 3 new Chip tests: data-disabled attribute present/absent, onClick suppressed when disabled
• TypeScript compiles with no new errors
• Biome formatting passes

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
apsara	Ready	Preview, Comment	Apr 16, 2026 4:56am

[coderabbitai]

📝 Walkthrough

Walkthrough

These changes add disabled state functionality to the Chip component and propagate it through the InputField component. The Chip component receives a new optional disabled prop that prevents click handling and applies visual styling. The InputField passes its disabled state to its child chips, preventing chip dismissal and hiding dismiss buttons. CSS class names are standardized from camelCase to kebab-case conventions, and documentation is updated with a new "Disabled with Chips" example. A new optional containerRef prop is added to InputFieldProps for external container reference access.

Possibly related issues

• Issue #623 - Directly addresses the same functionality: disabling chips when InputField is disabled, fixing pointer-events handling, and standardizing CSS class naming conventions.

Suggested reviewers

• rsbh
• paanSinghCoder

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title directly and clearly summarizes the three main changes: fixing pointer-events, disabling chips when disabled, and standardizing CSS naming conventions.
Description check	✅ Passed	The description is directly related to the changeset, providing clear explanations of the three main fixes with specific implementation details and a comprehensive test plan.

_{✏️ 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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

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

📥 Commits

Reviewing files that changed from the base of the PR and between 26e02f6 and 9bbdc63.

📒 Files selected for processing (9)

• apps/www/src/content/docs/components/input-field/demo.ts
• apps/www/src/content/docs/components/input-field/index.mdx
• apps/www/src/content/docs/components/input-field/props.ts
• packages/raystack/components/chip/__tests__/chip.test.tsx
• packages/raystack/components/chip/chip.module.css
• packages/raystack/components/chip/chip.tsx
• packages/raystack/components/input-field/__tests__/input-field.test.tsx
• packages/raystack/components/input-field/input-field.module.css
• packages/raystack/components/input-field/input-field.tsx

[coderabbitai]

⚠️ Potential issue | 🟠 Major

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.