Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: ComboBox readonly state fixed #17457

Merged

Conversation

Gururajj77
Copy link
Contributor

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.

Copy link

netlify bot commented Sep 17, 2024

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

QR Code

Use your smartphone camera to open QR code link.

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

Copy link

netlify bot commented Sep 17, 2024

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

QR Code

Use your smartphone camera to open QR code link.

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

Copy link

codecov bot commented Sep 17, 2024

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.

Copy link
Member

@alina-jacob alina-jacob left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good Guru! 🚀

Copy link
Contributor

@preetibansalui preetibansalui left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

@preetibansalui preetibansalui left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Working fine now 👍

@kennylam kennylam added this pull request to the merge queue Oct 2, 2024
Merged via the queue into carbon-design-system:main with commit 2d0b6a4 Oct 2, 2024
36 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug]: Combobox Read-only state incorrectly allows interaction
4 participants