fix: ComboBox readonly state fixed

[Gururajj77]

Closes #17382

Fixed the Combobox's Read Only state, which previously would allow the user to interact with the list box.

This modification has been done after referring the read only states of Dropdown and Multiselect.
Dropdown's readonly story for reference:
https://react.carbondesignsystem.com/?path=/story/components-dropdown--playground&args=readOnly:!true

Changelog

New

• Added read only prop check to stop the list box opening.
• Added onFocus and onClick event handlers for readOnlyEventHandlers.
• Added event.preventDefault(); for Tab interaction for readOnly prop

Testing / Reviewing

• Navigate to the playground story of Combobox component
• Turn on the readOnly prop
• check the interaction and make sure it doesn't open or allows text focus, only the box focus is present.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	7a71c1a
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/66fbe0cfb0f1410008407c2d
😎 Deploy Preview	https://deploy-preview-17457--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	7a71c1a
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/66fbe0cf06886c0008ef6dc9
😎 Deploy Preview	https://deploy-preview-17457--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.

[codecov]

Codecov Report

Attention: Patch coverage is 57.14286% with 3 lines in your changes missing coverage. Please review.

Project coverage is 77.02%. Comparing base (e5f0b88) to head (7a71c1a).
Report is 2 commits behind head on main.

Files with missing lines	Patch %	Lines
...ackages/react/src/components/ComboBox/ComboBox.tsx	57.14%	3 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #17457      +/-   ##
==========================================
- Coverage   77.03%   77.02%   -0.01%     
==========================================
  Files         408      408              
  Lines       13994    14001       +7     
  Branches     4352     4353       +1     
==========================================
+ Hits        10780    10784       +4     
- Misses       3041     3044       +3     
  Partials      173      173              

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

[alina-jacob]

Looks good Guru! 🚀

[preetibansalui]

Hi Gururaj, The readonly prop is working fine now. Only one thing I noticed in deploy preview is when we press Tab Key, The focus move to other elements which is fine but combobox is still in highlight state, which I believe should not be. Please check attached screen recording.

After that I am not able to remove highlight from combobox even by clicking outside as well.

Screen.Recording.2024-09-19.at.10.41.37.AM.mov

[preetibansalui]

Working fine now 👍