Replace forwarded ref instances of useProvidedRefOrCreate with useMergedRefs#7644
Replace forwarded ref instances of useProvidedRefOrCreate with useMergedRefs#7644iansan5653 wants to merge 49 commits into
useProvidedRefOrCreate with useMergedRefs#7644Conversation
|
github-actions
Bot
added
the
integration-tests: recommended
|
iansan5653
force-pushed
the
replace-use-provided-ref-or-create
branch
from
422c4e4 to
006cc27
Compare
iansan5653
changed the base branch from
create-use-combined-refs
to
update-use-merged-refs
…se-provided-ref-or-create
|
🤖 Lint issues have been automatically fixed and committed to this PR. |
|
🤖 Lint issues have been automatically fixed and committed to this PR. |
|
Uh oh! @primer-integration[bot], at least one image you shared is missing helpful alt text. Check #7644 (comment) to fix the following violations:
Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image. Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.
|
5 similar comments
|
Uh oh! @primer-integration[bot], at least one image you shared is missing helpful alt text. Check #7644 (comment) to fix the following violations:
Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image. Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.
|
|
Uh oh! @primer-integration[bot], at least one image you shared is missing helpful alt text. Check #7644 (comment) to fix the following violations:
Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image. Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.
|
|
Uh oh! @primer-integration[bot], at least one image you shared is missing helpful alt text. Check #7644 (comment) to fix the following violations:
Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image. Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.
|
|
Uh oh! @primer-integration[bot], at least one image you shared is missing helpful alt text. Check #7644 (comment) to fix the following violations:
Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image. Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.
|
|
Uh oh! @primer-integration[bot], at least one image you shared is missing helpful alt text. Check #7644 (comment) to fix the following violations:
Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image. Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.
|
|
🤖 Lint issues have been automatically fixed and committed to this PR. |
1 similar comment
|
🤖 Lint issues have been automatically fixed and committed to this PR. |
|
The integration CI appears to be failing because of a tooltip (which was previously broken by bad refs) getting in the way of an |
…s flag Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
change FF default to false
|
Integration test results from github/github-ui PR:
CI check runs linting, type checking, and unit tests. Check the workflow logs for specific failures. Need help? If you believe this failure is unrelated to your changes, please reach out to the Primer team for assistance. |
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
| const listRef = mergedRefEnabled ? internalRef : providedOrCreatedRef | ||
| const appliedRef = mergedRefEnabled ? mergedRef : providedOrCreatedRef |
There was a problem hiding this comment.
do we need both listRef and appliedRef?
| {...(shouldRenderAsPopover ? {popover: 'manual'} : {})} | ||
| {...restOverlayProps} | ||
| {...(shouldRenderAsPopover ? {id: popoverId} : {})} | ||
| {...(cssAnchorPositioning ? {id: popoverId} : {})} |
| // The ref whose `.current` the positioning logic reads. Both point to the trigger DOM node. | ||
| const triggerRef = mergedRefEnabled ? internalRef : providedOrCreatedRef | ||
| // The ref applied to the cloned trigger element. | ||
| const appliedTriggerRef = mergedRefEnabled ? mergedTriggerRef : providedOrCreatedRef |
There was a problem hiding this comment.
is it right for the file to still reference triggerRef so much even though we stopped applying it in line 288? Seems weird/overly complex to me that we still need these two triggerRef, appliedTriggerRef)
Closes https://github.com/github/primer/issues/6788
Per-component changes covered by new feature flag: https://devportal.githubapp.com/feature-flags/primer_react_merged_forwarded_refs/overview
In #7638 I created a
useMergedRefshook and migrated all instances ofuseRefObjectAsForwardedRefto it.A similar pattern is using
useProvidedRefOrCreatefor this. It's typically used with a type cast and ats-expect-errorcomment (❗):This is obviously problematic. The type errors are trying to point out the problem with this pattern: it will break if consumers pass ref callbacks. Ref callbacks are likely to become more and more common as React 19 has introduced ref callback cleanup functions, making ref callbacks a viable alternative to effects.
A much better pattern is to be consistent and use the same approach as in #7638:
Note, however, that I did not deprecate
useProvidedRefOrCreateor remove all calls to it. There are still some valid use cases where refs can be passed in to refer to elements rendered outside the component. We most often see this in anchor refs. There are also some utility hooks that can create a ref internally or use a passed ref. These two cases are still valid; the case I'm targeting here is specifically around forwarded refs.useMergedRefsto be React 19 compatible and public + deprecateuseRefObjectAsForwardedRefanduseProvidedRefOrCreate#7672Changelog
New
Changed
Removed
Rollout strategy
Testing & Reviewing
Merge checklist