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	1fc3e6e
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/66ec388773bbd50008d2eab8
😎 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	1fc3e6e
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/66ec38873b1bff00083370fa
😎 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 45.45455% with 6 lines in your changes missing coverage. Please review.

Project coverage is 76.93%. Comparing base (d8e0045) to head (1fc3e6e).
Report is 8 commits behind head on main.

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

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #17457   +/-   ##
=======================================
  Coverage   76.92%   76.93%           
=======================================
  Files         408      408           
  Lines       13979    13990   +11     
  Branches     4291     4342   +51     
=======================================
+ Hits        10754    10763    +9     
- Misses       3052     3053    +1     
- Partials      173      174    +1     

☔ 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