Skip to content

fix: Filterable multiselect focus while tabbing issue#19816

Merged
riddhybansal merged 3 commits into
carbon-design-system:mainfrom
riddhybansal:filterable_multiselect_focus
Jul 1, 2025
Merged

fix: Filterable multiselect focus while tabbing issue#19816
riddhybansal merged 3 commits into
carbon-design-system:mainfrom
riddhybansal:filterable_multiselect_focus

Conversation

@riddhybansal

@riddhybansal riddhybansal commented Jul 1, 2025 •
edited
Loading

Copy link
Copy Markdown
Contributor

Closes #19533

Fix focus outline persistence when tabbing away from FilterableMultiSelect

Changelog

New

  • Fixed FilterableMultiSelect focus outline persisting when tabbing away from component while menu is open
  • Updated onBlur handler to always clear inputFocused state regardless of menu state

Testing / Reviewing

  • Open Test story in MultiSelect component in Storybook
  • Click to open the dropdown menu (focus outline should appear)
  • Press Tab to move focus to next element
  • Verify focus outline is immediately removed from FilterableMultiSelect
  • Verify this matches how multiselect works (To complete this step I have created a MultiselectTest story , please follow the same above steps and see if both matches.)

Note: Both Test and MultiselectTest need to be removed before merging.

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

@riddhybansal riddhybansal requested a review from a team as a code owner July 1, 2025 09:03
@riddhybansal riddhybansal requested review from a team, 2nikhiltom and tay1orjones July 1, 2025 09:03
@riddhybansal

riddhybansal commented Jul 1, 2025

Copy link
Copy Markdown
Contributor Author

Note: Both Test and MultiselectTest need to be removed before merging.

@netlify

netlify Bot commented Jul 1, 2025

Copy link
Copy Markdown

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

Name Link
🔨 Latest commit abce4dd
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-web-components/deploys/6863a47d0cb0ef0008c2f1ec
😎 Deploy Preview https://deploy-preview-19816--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 Jul 1, 2025

Copy link
Copy Markdown

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit abce4dd
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-react/deploys/6863a47d1ef2de00085ae0ae
😎 Deploy Preview https://deploy-preview-19816--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 Jul 1, 2025 •
edited
Loading

Copy link
Copy Markdown

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

Name Link
🔨 Latest commit 860ef59
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-web-components/deploys/6863bddf0605cb0008cbea74
😎 Deploy Preview https://deploy-preview-19816--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 Jul 1, 2025 •
edited
Loading

Copy link
Copy Markdown

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 860ef59
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-react/deploys/6863bddfc95ffb0008058c59
😎 Deploy Preview https://deploy-preview-19816--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.

Gururajj77
Gururajj77 approved these changes Jul 1, 2025
View reviewed changes

@Gururajj77 Gururajj77 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🍺

@codecov

codecov Bot commented Jul 1, 2025 •
edited
Loading

Copy link
Copy Markdown

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 84.80%. Comparing base (816e9fe) to head (860ef59).
Report is 1 commits behind head on main.

Additional details and impacted files 
@@           Coverage Diff           @@
##             main   #19816   +/-   ##
=======================================
  Coverage   84.80%   84.80%           
=======================================
  Files         369      369           
  Lines       14711    14711           
  Branches     4799     4849   +50     
=======================================
  Hits        12475    12475           
+ Misses       2088     2087    -1     
- Partials      148      149    +1

☔ 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.

heloiselui
heloiselui approved these changes Jul 1, 2025
View reviewed changes

@heloiselui heloiselui 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.

Works as intended, great work on this!

2nikhiltom
2nikhiltom approved these changes Jul 1, 2025
View reviewed changes

@2nikhiltom 2nikhiltom 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!
just remove test story before merging

@riddhybansal riddhybansal enabled auto-merge July 1, 2025 10:52
@riddhybansal riddhybansal added this pull request to the merge queue Jul 1, 2025
Merged via the queue into carbon-design-system:main with commit c75c0d8 Jul 1, 2025
42 checks passed
@riddhybansal riddhybansal deleted the filterable_multiselect_focus branch July 1, 2025 12:04
@carbon-automation

carbon-automation Bot commented Jul 2, 2025

Copy link
Copy Markdown
Contributor

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

heloiselui pushed a commit to guidari/carbon that referenced this pull request Jul 11, 2025
@riddhybansal @heloiselui
fix: Filterable multiselect focus while tabbing issue (carbon-design-…
ed92299 
…system#19816)

* fix: filterable multiselect tab issue

* fix: removed test story
AlexanderMelox pushed a commit to AlexanderMelox/carbon that referenced this pull request Apr 28, 2026
@riddhybansal @AlexanderMelox
fix: Filterable multiselect focus while tabbing issue (carbon-design-…
6059549 
…system#19816)

* fix: filterable multiselect tab issue

* fix: removed test story
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@2nikhiltom 2nikhiltom 2nikhiltom approved these changes

@heloiselui heloiselui heloiselui approved these changes

@Gururajj77 Gururajj77 Gururajj77 approved these changes

@tay1orjones tay1orjones Awaiting requested review from tay1orjones

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[a11y]: FIlterableMultiSelect keeps focus outline after tabbing away

4 participants

@riddhybansal @2nikhiltom @heloiselui @Gururajj77