fix: filterable multiselect readonly state implemented

[Gururajj77]

Closes #17587

read only state for filterable multiselect is implemented

Changelog

New

• added new readOnly prop
• new readOnlyEventHandlers method to handle events during the readOnly state.

Changed

• changes related to readOnly state

Testing / Reviewing

• Go to the 'Filterable' story in the Multiselect component in the deploy preview
• Turn on the readOnly prop and see if it works as expected.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	dea3128
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/67124117375ab30008bae07a
😎 Deploy Preview	https://deploy-preview-17662--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	dea3128
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/67124117b4826e00087d69bf
😎 Deploy Preview	https://deploy-preview-17662--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[preetibansalui]

Looks good, some minor changes only.

[codecov]

Codecov Report

Attention: Patch coverage is 63.63636% with 8 lines in your changes missing coverage. Please review.

Project coverage is 79.70%. Comparing base (4312ae4) to head (dea3128).

Files with missing lines	Patch %	Lines
...c/components/MultiSelect/FilterableMultiSelect.tsx	52.94%	8 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #17662      +/-   ##
==========================================
- Coverage   79.72%   79.70%   -0.02%     
==========================================
  Files         406      406              
  Lines       14012    14030      +18     
  Branches     4333     4364      +31     
==========================================
+ Hits        11171    11183      +12     
- Misses       2676     2681       +5     
- Partials      165      166       +1     

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

[preetibansalui]

Thanks Guru for the changes, Sorry one minor change again. Otherwise it looks good to me.

[preetibansalui]

Thanks for the changes Guru, Looks Good now.

[tay1orjones]

Looks good to me 👍

@laurenmrice could you do a review as well? Just want to be sure we didn't miss anything design-wise

[laurenmrice]

• The tag border should be color token $border-subtle. I notice this is also wrong though in the regular Multiselect playground story.

---

• When you hover on the x icon in the tag, it turns black and lets you dismiss the tag. The x should not receive any color change or interaction in the read-only state.
  

[Gururajj77]

• The tag border should be color token $border-subtle. I notice this is also wrong though in the regular Multiselect playground story.

Hey @laurenmrice , I have added the functionality to not have any interaction during the readOnly state in FilterableMultiselect, I'll create new issues for the Multiselect interaction and the $border-subtle mismatch for both components.

[laurenmrice]

Okay thanks, @Gururajj77 ! One last thing I noticed for the Filterable Multiselect is if you hover on the number in the tag in the read-only state, a disabled mouse cursor appears. The mouse cursor should just be the arrow, like how it appears when you hover on the x icon in the tag. I also see the number 2 in the tag looks like it has a highlighted background color behind it which it should not have.

[netlify]

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

Name	Link
🔨 Latest commit	dea3128
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-web-components/deploys/671241170f9bb700078ee10e
😎 Deploy Preview	https://deploy-preview-17662--v11-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[Gururajj77]

Have created an issue, #17820 to keep track for the hover issue separately

[carbon-automation]

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