fix: Enable validation feedback for Canned Response Tags field

[sezallagwal]

Proposed changes

This PR fixes an issue where the Tags field in the Canned Responses form was disconnected from the form's validation system. Previously, if validation rules were applied to the Tags field, no visual feedback (red border or error message) was displayed to the user, leading to confusing "silent failures" on form submission.

Changes:

• CannedResponseForm: Updated the Tags Controller to pass errors.tags and render a <FieldError> component, aligning with the pattern used for Shortcut and Message.
• Tags Component: Updated to accept an error prop and propagate it to its children (TextInput or CurrentChatTags).
• CurrentChatTags: Updated to accept the error prop and pass it as a boolean to PaginatedMultiSelectFiltered, ensuring the UI correctly reflects the error state.

Issue(s)

N/A (Addressed inline TODO: // TODO: refactor Tags field validation)

Verification Steps

Since the Tags field is currently optional, you must temporarily enforce a rule to verify the fix:

1. In client/views/omnichannel/cannedResponses/components/CannedResponseForm.tsx, temporarily add a rule to the Tags Controller:

   rules={{ required: true }}

2. Go to Canned Responses and attempt to save a new response without tags.
3. Verify: The Tags field turns red and displays the "Required field" error message.

Screenshots

Types of changes

• Bugfix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation Update (if none of the other choices apply)

Checklist

• I have read the CONTRIBUTING doc
• I have flagged this PR as "Ready for Review" or "WIP"
• I have updated all the related documentation
• Lint and unit tests pass locally with my changes
• I have added tests that prove my fix is effective or that my feature works
• I have added necessary documentation (if appropriate)
• Any dependent changes have been merged and published in downstream modules

Summary by CodeRabbit

• Bug Fixes
  • Improved error messaging for tag validation fields in omnichannel forms, ensuring validation errors are now clearly displayed to users when tags validation fails.

[dionisio-bot]

Looks like this PR is not ready to merge, because of the following issues:

• This PR is missing the 'stat: QA assured' label
• This PR is missing the required milestone or project

Please fix the issues and try again

If you have any trouble, please check the PR guidelines

[changeset-bot]

⚠️ No Changeset found

Latest commit: 1f5d3ce

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

Walkthrough

Three omnichannel components in the tags hierarchy are updated to support error prop forwarding. CurrentChatTags accepts an optional error string prop and passes it as a boolean to AutoCompleteTagsMultiple. Tags forwards this error prop. CannedResponseForm passes validation errors to Tags and displays error feedback.

Changes

Cohort / File(s)	Summary
Tags Error Prop Forwarding apps/meteor/client/views/omnichannel/additionalForms/CurrentChatTags.tsx, apps/meteor/client/views/omnichannel/components/Tags.tsx	Added optional error?: string prop to CurrentChatTags and forwarded it as a boolean to AutoCompleteTagsMultiple. Tags component now passes error prop through to CurrentChatTags.
CannedResponseForm Tags Validation apps/meteor/client/views/omnichannel/cannedResponses/components/CannedResponseForm.tsx	Updated Tags field to pass error messages via error={errors.tags?.message} and added FieldError block to display per-field validation feedback when errors exist.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 A whisker-twitch of validation cheer,
Error messages now crystal clear!
Props hop through components with grace,
Tags now know their proper place. 🏷️

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: enabling validation feedback for the Canned Response Tags field, which is the core objective of this PR.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into develop

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

[cubic-dev-ai]

No issues found across 3 files

[coderabbitai]

🧹 Nitpick comments (2)

apps/meteor/client/views/omnichannel/cannedResponses/components/CannedResponseForm.tsx (2)

102-113: Accessibility: Tags field doesn't follow the same aria-* pattern as Shortcut and Message.

The Shortcut and Message fields use useId() to generate a unique field ID, then wire up aria-describedby={${id}-error}, aria-required, and aria-invalid on the input, with the matching id on FieldError. The Tags field instead hardcodes id='tags-error' and doesn't pass aria-describedby or aria-invalid to Tags/its inputs. This breaks screen-reader association between the input and its error message and risks ID collisions.

Consider generating a tagsField ID via useId() and threading it through like the other fields.

Suggested approach

  const departmentField = useId();
+ const tagsField = useId();

Then in the Controller render:

- <Tags handler={onChange} tags={value} error={errors.tags?.message} />
+ <Tags handler={onChange} tags={value} error={errors.tags?.message} aria-describedby={`${tagsField}-error`} aria-invalid={Boolean(errors.tags)} />

And for the FieldError:

- <FieldError aria-live='assertive' id='tags-error'>
+ <FieldError aria-live='assertive' id={`${tagsField}-error`}>

(This would also require Tags to forward aria-describedby/aria-invalid to its underlying inputs.)

---

14-14: Consider removing or updating the TODO comment.

The TODO // TODO: refactor Tags field to get proper validation appears to be partially addressed by this PR. Either update it to reflect remaining work or remove it if this PR fully resolves the validation gap. As per coding guidelines, code comments should be avoided in the implementation.

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 11e1c51 and 1f5d3ce.

📒 Files selected for processing (3)

• apps/meteor/client/views/omnichannel/additionalForms/CurrentChatTags.tsx
• apps/meteor/client/views/omnichannel/cannedResponses/components/CannedResponseForm.tsx
• apps/meteor/client/views/omnichannel/components/Tags.tsx

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx,js}

📄 CodeRabbit inference engine (.cursor/rules/playwright.mdc)

**/*.{ts,tsx,js}: Write concise, technical TypeScript/JavaScript with accurate typing in Playwright tests
Avoid code comments in the implementation

Files:

• apps/meteor/client/views/omnichannel/components/Tags.tsx
• apps/meteor/client/views/omnichannel/additionalForms/CurrentChatTags.tsx
• apps/meteor/client/views/omnichannel/cannedResponses/components/CannedResponseForm.tsx

🧠 Learnings (1)

📚 Learning: 2025-09-18T17:32:33.969Z

Learnt from: aleksandernsilva
Repo: RocketChat/Rocket.Chat PR: 36974
File: apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/forms/MessageForm/MessageForm.tsx:124-129
Timestamp: 2025-09-18T17:32:33.969Z
Learning: The ARIA mismatch issue in MessageForm's template field (where FieldError id used templateId instead of messageFormId) was addressed in PR `#36972` through refactoring the template field into a separate TemplateField component, which uses consistent templateFieldId for both aria-describedby and FieldError id.

Applied to files:

• apps/meteor/client/views/omnichannel/cannedResponses/components/CannedResponseForm.tsx

🔇 Additional comments (2)

apps/meteor/client/views/omnichannel/components/Tags.tsx (1)

76-85: LGTM! The error prop is correctly forwarded to both the CurrentChatTags and TextInput branches, ensuring validation feedback works regardless of which input variant is rendered.

Also applies to: 88-101

apps/meteor/client/views/omnichannel/additionalForms/CurrentChatTags.tsx (1)

6-12: LGTM! The error prop is properly typed as an optional string, destructured separately, and coerced to boolean before passing to AutoCompleteTagsMultiple, which is the expected pattern for toggling visual error states.

Also applies to: 14-14, 28-28