Skip to content

fix(select): disallow invalid and warn when readonly or disabled#20808

Merged
kennylam merged 8 commits into
carbon-design-system:mainfrom
Mariam-Saeed:fix/(Select)--Disallow-invalid-&-warn-when-readonly-or-disabled
Dec 13, 2025
Merged

fix(select): disallow invalid and warn when readonly or disabled#20808
kennylam merged 8 commits into
carbon-design-system:mainfrom
Mariam-Saeed:fix/(Select)--Disallow-invalid-&-warn-when-readonly-or-disabled

Conversation

@Mariam-Saeed

@Mariam-Saeed Mariam-Saeed commented Oct 26, 2025 •
edited
Loading

Copy link
Copy Markdown
Contributor

Closes #20725

Disallow invalid and warn when readonly or disabled in Select

Changelog

New

  • Added unit tests to confirm that the component correctly disallows both warnings and invalid states from showing up when disabled or readOnly are true.

Changed

  • The React Select components now use the useNormalizedProps hook. This ensures all components apply a consistent logic to disallow invalid and warn states from appearing when disabled or readonly are true.
  • The Web Component (WC) implementation was updated to include normalizedProps. This aligns the WC with the React library's prop normalization logic, specifically to disallow invalid and warn states when disabled or readOnly are true.

Removed

  • {{removed thing}}

Testing / Reviewing

React Library
  • Open the React Library Storybook and navigate to the Select component stories.
  • Test Disabled State: Set the disabled prop to true. While disabled is true, set the invalid prop to true and confirm that the invalid styles/messages do not show up. Apply the same thing with the warn prop.
  • Test ReadOnly State: Set the readOnly prop to true. While readOnly is true, set the invalid prop to true and confirm that the invalid styles/messages do not show up. Apply the same thing with the warn prop.
Web Component (WC)
  • Open the WC Storybook and navigate to the Select component stories.
  • Test Disabled State: Set the disabled attribute to true. While disabled is true, set the invalid attribute to true and confirm that the invalid styles/messages do not show up. Apply the same thing with the warn attribute.
  • Test ReadOnly State: Set the readOnly attribute to true. While readOnly is true, set the invalid attribute to true and confirm that the invalid styles/messages do not show up. Apply the same thing with the warn attribute.

Verify that the unit tests are passing, which confirms the correct behavior for disabled and readOnly.

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

@Mariam-Saeed Mariam-Saeed requested a review from a team as a code owner October 26, 2025 00:17
@github-actions

github-actions Bot commented Oct 26, 2025 •
edited
Loading

Copy link
Copy Markdown
Contributor

All contributors have signed the DCO.
Posted by the DCO Assistant Lite bot.

@netlify

netlify Bot commented Oct 26, 2025 •
edited
Loading

Copy link
Copy Markdown

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

Name Link
🔨 Latest commit 9d51791
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-web-components/deploys/693d96aac24e190008e4d6a9
😎 Deploy Preview https://deploy-preview-20808--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 26, 2025 •
edited
Loading

Copy link
Copy Markdown

✅ Deploy Preview for carbon-elements ready!

Name Link
🔨 Latest commit 9d51791
🔍 Latest deploy log https://app.netlify.com/projects/carbon-elements/deploys/693d96aa64a7c300083a20a6
😎 Deploy Preview https://deploy-preview-20808--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.

@netlify

netlify Bot commented Oct 26, 2025 •
edited
Loading

Copy link
Copy Markdown

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 9d51791
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-react/deploys/693d96aa76005f0008b63caf
😎 Deploy Preview https://deploy-preview-20808--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.

@Mariam-Saeed
fix(select): disallow invalid and warn when readonly or disabled
ddb7849 
prevent invalid and warn states from appearing when the Select
component is disabled or readonly. applied updates to both
React and Web Components implementations, and add corresponding
unit tests
@Mariam-Saeed Mariam-Saeed force-pushed the fix/(Select)--Disallow-invalid-&-warn-when-readonly-or-disabled branch from 16b9175 to ddb7849 Compare October 26, 2025 07:18
@codecov

codecov Bot commented Oct 27, 2025 •
edited
Loading

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 85.13%. Comparing base (cac4c0c) to head (9d51791).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files 
@@            Coverage Diff             @@
##             main   #20808      +/-   ##
==========================================
+ Coverage   85.09%   85.13%   +0.04%     
==========================================
  Files         530      530              
  Lines       40877    40881       +4     
  Branches     6327     6298      -29     
==========================================
+ Hits        34784    34806      +22     
+ Misses       5933     5914      -19     
- Partials      160      161       +1
Flag Coverage Δ
main-packages 85.71% <100.00%> (-0.01%) ⬇️
web-components 84.81% <100.00%> (+0.07%) ⬆️

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
Comment thread packages/react/src/components/Select/Select.tsx Outdated
@riddhybansal

riddhybansal commented Oct 27, 2025

Copy link
Copy Markdown
Contributor

Thanks for contributing just the small update above!!

This was referenced Oct 27, 2025
Merged
Merged
Merged
Mariam-Saeed and others added 2 commits October 27, 2025 17:26
@Mariam-Saeed
fix(select): use normalizedProps.invalid instead of invalid
fc4669d
@dependabot @Mariam-Saeed
chore(deps): bump actions/download-artifact from 5 to 6 (carbon-desig…
9265635 
…n-system#20812)

Bumps [actions/download-artifact](https://github.com/actions/download-artifact) from 5 to 6.
- [Release notes](https://github.com/actions/download-artifact/releases)
- [Commits](actions/download-artifact@v5...v6)

---
updated-dependencies:
- dependency-name: actions/download-artifact
  dependency-version: '6'
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
@Mariam-Saeed Mariam-Saeed requested a review from a team as a code owner October 27, 2025 14:50
@Mariam-Saeed Mariam-Saeed requested a review from kennylam October 27, 2025 14:50
tay1orjones
tay1orjones reviewed Oct 27, 2025
View reviewed changes
Comment thread .github/workflows/ci.yml
riddhybansal
riddhybansal approved these 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.

LGTM, THANKS

@riddhybansal riddhybansal added the hacktoberfest See https://hacktoberfest.com/ label Oct 28, 2025
@kennylam kennylam disabled auto-merge December 13, 2025 16:39
@kennylam kennylam enabled auto-merge December 13, 2025 16:39
@kennylam kennylam added this pull request to the merge queue Dec 13, 2025
Merged via the queue into carbon-design-system:main with commit e396e49 Dec 13, 2025
42 of 43 checks passed
@carbon-automation

carbon-automation Bot commented Jan 9, 2026

Copy link
Copy Markdown
Contributor

Hey there! v11.98.0 was just released that references this issue/PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@tay1orjones tay1orjones tay1orjones left review comments

@riddhybansal riddhybansal riddhybansal approved these changes

@Gururajj77 Gururajj77 Gururajj77 approved these changes

@emyarod emyarod Awaiting requested review from emyarod emyarod is a code owner automatically assigned from carbon-design-system/monorepo-reviewers

@kennylam kennylam Awaiting requested review from kennylam kennylam was automatically assigned from carbon-design-system/developers-system-admins

Assignees

No one assigned

Labels

hacktoberfest See https://hacktoberfest.com/

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Select]: Disallow invalid & warn when readonly or disabled

5 participants

@Mariam-Saeed @riddhybansal @tay1orjones @Gururajj77 @kennylam