Skip to content

fix(multiselect): Disallow invalid & warn when readonly or disabled#20806

Merged
riddhybansal merged 33 commits into
carbon-design-system:mainfrom
BiaBiruka:20724-multiselect-warning
Jan 21, 2026
Merged

fix(multiselect): Disallow invalid & warn when readonly or disabled#20806
riddhybansal merged 33 commits into
carbon-design-system:mainfrom
BiaBiruka:20724-multiselect-warning

Conversation

@BiaBiruka

@BiaBiruka BiaBiruka commented Oct 24, 2025

Copy link
Copy Markdown
Contributor

Closes #20724

Fix the behavior for MultiSelect and FilterableMultiSelect. When component is disabled or readOnly, it should not show warning nor invalid messages.

Changelog

Changed

  • MultiSelect and FilterableMultiSelect components now checks if component is disabled or read-only before displaying invalid or warning messages. This way, warnings will not be shown if the component cannot be interacted with.
  • For web-components package specifically, since multi-select inherits from dropdown the fix was done alongside PR fix(dropdown): Disallow invalid & warn when readonly or disabled #20803 . Therefore, this PR only fixes related class names added inside multi-select files.

Testing / Reviewing

(For react)

  • Access the MultiSelect playground on storybook and change the state to "Invalid = true" and "disabled = true". The invalid message should not be shown.
  • Repeat test above with "readOnly = true" instead of disabled. The invalid message should not be shown.
  • Repeat the two tests above using "warn = true" instead of "invalid = true". The warning message on both scenarios should not be shown.

(For web-components)

  • Access the MultiSelect playground on storybook and change the state to "Invalid = true" and "disabled = true". 'cds--multi-select' div (the dropdown) should not have the class 'cds--multi-select--invalid'.
  • Repeat test above with "readOnly = true" instead of disabled. The 'cds--multi-select--invalid' class should not appear.
  • Repeat the two tests above using "warn = true" instead of "invalid = true". The 'cds--multi-select--warn' class should not appear.

PR Checklist

As the author of this PR, before marking ready for review, confirm you:

  • Reviewed every line of the diff
  • Updated documentation and storybook examples
  • Wrote passing tests that cover this change
  • Addressed any impact on accessibility (a11y)
  • Tested for cross-browser consistency
  • Validated that this code is ready for review and status checks should pass

More details can be found in the pull request guide

@BiaBiruka
fix(multiselect): fix invalid warning when disabled (carbon-design-sy…
1be4535 
…stem#20724)

fix multiselect to not show warning when component is disabled or readOnly.
@BiaBiruka
fix(FilterableMultiSelect): fix invalid warning when disabled (carbon…
08bc205 
…-design-system#20724)

fix FilterableMultiSelect to not show warning when it is disabled or readOnly.
@BiaBiruka
test(multiselect): add tests for warning fixes
31950cf 
add test cases to not show warnings when disabled or readOnly.
@BiaBiruka
test(multiselect): fix label
7243737
@BiaBiruka
fix(multiselect): fix invalid warning when disabled (carbon-design-sy…
2c4bd77 
…stem#20724)

fix multiselect to not show warning when disabled or readOnly (web-components).
@BiaBiruka
test(multiselect): add tests for warning fixes
9fecd3f 
add test cases to not show warnings when disabled or readOnly.
@BiaBiruka
fix(multiselect): fix helperText when invalid but disabled
1833e91 
fix multiselect to show helperText when is invalid but not interactive
@BiaBiruka BiaBiruka requested a review from a team as a code owner October 24, 2025 20:20
@netlify

netlify Bot commented Oct 24, 2025 •
edited
Loading

Copy link
Copy Markdown

✅ Deploy Preview for v11-carbon-web-components ready!

Name Link
🔨 Latest commit 42fa63b
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-web-components/deploys/6968d10fce85590008c53f76
😎 Deploy Preview https://deploy-preview-20806--v11-carbon-web-components.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented Oct 24, 2025 •
edited
Loading

Copy link
Copy Markdown

✅ Deploy Preview for v11-carbon-react ready!

Name Link
🔨 Latest commit 42fa63b
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-react/deploys/6968d10f845c730008457785
😎 Deploy Preview https://deploy-preview-20806--v11-carbon-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented Oct 24, 2025 •
edited
Loading

Copy link
Copy Markdown

✅ Deploy Preview for carbon-elements ready!

Name Link
🔨 Latest commit 42fa63b
🔍 Latest deploy log https://app.netlify.com/projects/carbon-elements/deploys/6968d10f682be8000864c5b3
😎 Deploy Preview https://deploy-preview-20806--carbon-elements.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@codecov

codecov Bot commented Oct 25, 2025 •
edited
Loading

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 86.12%. Comparing base (00135b4) to head (42fa63b).
⚠️ Report is 28 commits behind head on main.

Additional details and impacted files 
@@            Coverage Diff             @@
##             main   #20806      +/-   ##
==========================================
- Coverage   86.16%   86.12%   -0.04%     
==========================================
  Files         535      535              
  Lines       41893    41909      +16     
  Branches     6522     6527       +5     
==========================================
  Hits        36096    36096              
- Misses       5633     5649      +16     
  Partials      164      164
Flag Coverage Δ
main-packages 85.92% <100.00%> (+<0.01%) ⬆️
web-components 86.24% <100.00%> (-0.06%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

riddhybansal
riddhybansal requested changes Oct 27, 2025
View reviewed changes

@riddhybansal riddhybansal left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey this looks good

Small Suggestions for Improvement
Code Consistency

Consider using useNormalizedInputProps in all components rather than creating separate validation logic:

normalizedProps = useNormalizedInputProps({
id, disabled, readOnly, invalid, invalidText, warn, warnText,
});

Then reference normalizedProps.invalid and normalizedProps.warn for validation states
Our input controls already use this pattern, which makes future fixes simpler (just update the hook once).

Here is the reference PR

@BiaBiruka BiaBiruka mentioned this pull request Oct 27, 2025
Merged
6 tasks
@BiaBiruka

BiaBiruka commented Oct 27, 2025

Copy link
Copy Markdown
Contributor Author

Done!


Quick question: for the IBM hacktoberfest event we were requested to add a "hacktoberfest" label on the pull requests for easier tracking of what we made. Would that be possible?

@riddhybansal riddhybansal added the hacktoberfest See https://hacktoberfest.com/ label Oct 27, 2025
@BiaBiruka

BiaBiruka commented Nov 13, 2025

Copy link
Copy Markdown
Contributor Author

@alisonjoseph, @riddhybansal, the dropdown PR has been merged! 🎉
Since the parent component is now fixed, the issues in MultiSelect web-component should also be resolved.
Could you please review this PR again when you have a chance? Thanks!

@alisonjoseph alisonjoseph removed the request for review from tay1orjones December 15, 2025 19:38
alisonjoseph
alisonjoseph approved these changes Jan 15, 2026
View reviewed changes

@alisonjoseph alisonjoseph left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Thank you!

@riddhybansal riddhybansal added this pull request to the merge queue Jan 21, 2026
Merged via the queue into carbon-design-system:main with commit 6cdbc1b Jan 21, 2026
42 of 43 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@riddhybansal riddhybansal riddhybansal approved these changes

+1 more reviewer

@alisonjoseph alisonjoseph alisonjoseph approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

hacktoberfest See https://hacktoberfest.com/ status: one more review 👀

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[MultiSelect/FilterableMultiSelect]: Disallow invalid & warn when readonly or disabled

4 participants

@BiaBiruka @alisonjoseph @riddhybansal @heloiselui