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: update ref handling in ListBoxMenuItem useIsTruncated hook #18611

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

adamalston
Copy link
Contributor

@adamalston adamalston commented Feb 18, 2025

Closes #18459

Updated ref handling in ListBoxMenuItem useIsTruncated hook.

Changelog

Changed

  • Converted useIsTruncated to a generic hook with explicit HTMLElement typing.
  • Improved forwarded ref handling by ensuring proper fallback to a local ref.
  • Included dependencies in useIsTruncated to accurately detect truncation.

Testing / Reviewing

I'm not sure how to write a test for this functionality. I did take the code from #18459 and test it to ensure that titles were added to the appropriate items.

yarn test packages/react/src/components/ListBox

Copy link

netlify bot commented Feb 18, 2025

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

Name Link
🔨 Latest commit dd403b6
🔍 Latest deploy log https://app.netlify.com/sites/v11-carbon-web-components/deploys/67b7b4ca71e9640008b08aaa
😎 Deploy Preview https://deploy-preview-18611--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 site configuration.

Copy link

netlify bot commented Feb 18, 2025

Deploy Preview for carbon-elements ready!

Name Link
🔨 Latest commit dd403b6
🔍 Latest deploy log https://app.netlify.com/sites/carbon-elements/deploys/67b7b4cae5a1210008629772
😎 Deploy Preview https://deploy-preview-18611--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 Feb 18, 2025

Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit dd403b6
🔍 Latest deploy log https://app.netlify.com/sites/v11-carbon-react/deploys/67b7b4caf076bc0008200a7f
😎 Deploy Preview https://deploy-preview-18611--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 Feb 18, 2025

Codecov Report

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

Project coverage is 84.96%. Comparing base (9d0c15e) to head (dd403b6).
Report is 19 commits behind head on main.

Files with missing lines Patch % Lines
...s/react/src/components/ListBox/ListBoxMenuItem.tsx 88.00% 3 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main   #18611      +/-   ##
==========================================
+ Coverage   83.98%   84.96%   +0.98%     
==========================================
  Files         408      408              
  Lines       14501    14556      +55     
  Branches     4729     4769      +40     
==========================================
+ Hits        12178    12368     +190     
+ Misses       2155     2026     -129     
+ Partials      168      162       -6     

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

@adamalston adamalston marked this pull request as ready for review February 18, 2025 12:45
@adamalston adamalston requested review from a team as code owners February 18, 2025 12:45
Copy link
Member

@tay1orjones tay1orjones left a comment

Choose a reason for hiding this comment

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

Should useIsTruncated house the ref inspection? I'm anticipating it's soon going to be moved out of this file to be something we can import into various other components that need it.

Comment on lines 29 to 33

if (element) {
setIsTruncated(element.offsetWidth < element.scrollWidth);
}
}, [ref, ...deps]);
Copy link
Member

Choose a reason for hiding this comment

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

At first glance I thought this was an issue because changing the value of the ref won't trigger a re-render, but turns out that's not the case. TIL!

Comment on lines 89 to 90
// Try to get a RefObject from `forwardedRef.menuItemOptionRef`.
// If it's a callback ref (or not provided), fall back to `localRef`.
Copy link
Member

Choose a reason for hiding this comment

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

Would it make sense to test this with a mocked callback ref function?

it('should forward refs to the rendered SVG DOM element', () => {
let svg;
const ref = jest.fn((node) => {
svg = node;
});
const { container } = render(<Icon ref={ref} />);
expect(svg).toEqual(container.querySelector('svg'));
});

@adamalston
Copy link
Contributor Author

adamalston commented Feb 20, 2025

Should useIsTruncated house the ref inspection? I'm anticipating it's soon going to be moved out of this file to be something we can import into various other components that need it.

Let me know if what's in dd403b6 is better or worse. I tried to make it more composable comprehensive but I'm not sure if I hit the mark.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
2 participants