Skip to content

fix: 🐛 missing forwarding refs on test runner #764

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.

Sign up for GitHub

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

Jump to bottom
Merged
punkbit merged 1 commit into from
Jan 22, 2026
Merged

fix: 🐛 missing forwarding refs on test runner #764

punkbit merged 1 commit into from
Jan 22, 2026

Conversation

@punkbit
Copy link
Collaborator

@punkbit punkbit commented Jan 22, 2026

Why?

On the test runner, there's a huge number of warning messages mentioning "missing forward reference".

For example:

stderr | src/components/Select/MultiSelect.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props
and ref. Did you forget to use the ref parameter?

How?

  • Located related/common component
  • Passed the missing reference to inner child

Tickets?

N/A

Contribution checklist?

  • You've done enough research before writing
  • You have reviewed the PR
  • The commit messages are detailed
  • The build command runs locally
  • Assets or static content are linked and stored in the project
  • For documentation, guides or references, you've tested the commands

Security checklist?

N/A

Preview?

Before (ignore unrelated errors)

 // Adding new region flag (#742)
 git checkout 5831641dcbbba14119dfc54e4be1c5e6639ed4d3

...

click-ui (5831) [🗑📝🤷] is  v0.0.244 via  v23.9.0 on   (eu-west-2)
❯ yarn test

 RUN  v2.1.9 /Users/punkbit/www/punkbit/clickhouse/click-ui

stderr | src/components/Select/MultiSelect.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props
and ref. Did you forget to use the ref parameter?

stderr | src/components/Select/CheckboxMultiSelect.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props
and ref. Did you forget to use the ref parameter?

stderr | src/components/ContextMenu/ContextMenu.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props

stderr | src/components/SplitButton/SplitButton.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props

stderr | src/components/ConfirmationDialog/ConfirmationDialog.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props

stderr | src/components/Dropdown/Dropdown.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props

stderr | src/components/Pagination/Pagination.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props

stderr | src/components/DatePicker/DateRangePicker.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props

stderr | src/components/CardHorizontal/CardHorizontal.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props

stderr | src/components/AutoComplete/AutoComplete.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props

stderr | src/components/Select/SingleSelect.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props

...

Consider adding an error boundary to your tree to customize error handling
Visit https://reactjs.org/link/error-boundaries to learn more about error

       · selects the full month if a date in the past or future is selecte
       · selects the full month if a date in the past or future is selecte
       ⠙ selects the full month if a date in the past or future is selecte
       ⠹ selects the full month if a date in the past or future is selecte
       ⠸ selects the full month if a date in the past or future is selecte
       ✓ selects the full month if a date in the past or future is selecte
       ✓ selects the full month if a date in the past or future is selecte
       ✓ selects the full month if a date in the past or future is selecte
       ✓ selects the full month if a date in the past or future is selecte
       ✓ selects the full month if a date in the past or future is selecte
       ✓ selects the full month if a date in the past or future is selecte
       ✓ selects the full month if a date in the past or future is selecte
       ✓ selects the full month if a date in the past or future is selecte
       ✓ selects the full month if a date in the past or future is selecte
stderr | src/components/Button/Button.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props
and ref. Did you forget to use the ref parameter?

stderr | src/components/VerticalStepper/VerticalStepper.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props
and ref. Did you forget to use the ref parameter?

stderr | src/components/Flyout/Flyout.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props
and ref. Did you forget to use the ref parameter?

stderr | src/components/Tabs/Tabs.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props
and ref. Did you forget to use the ref parameter?

stderr | src/components/Dialog/Dialog.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props
and ref. Did you forget to use the ref parameter?

stderr | src/components/Grid/Grid.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props
and ref. Did you forget to use the ref parameter?

stderr | src/components/DateDetails/DateDetails.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props
and ref. Did you forget to use the ref parameter?

stderr | src/components/MultiAccordion/MultiAccordion.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props
and ref. Did you forget to use the ref parameter?

stderr | src/components/Table/Table.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props
and ref. Did you forget to use the ref parameter?

   ❯ DateDetails (4)
stderr | src/components/CardPrimary/CardPrimary.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props
and ref. Did you forget to use the ref parameter?

   ❯ DateDetails (4)
     × renders the DateDetails component with relevant timezone informatio
stderr | src/components/BigStat/BigStat.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props
and ref. Did you forget to use the ref parameter?

stderr | src/components/CardSecondary/CardSecondary.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props
and ref. Did you forget to use the ref parameter?

stderr | src/components/HoverCard/HoverCard.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props
and ref. Did you forget to use the ref parameter?

stderr | src/components/DatePicker/DatePicker.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props
and ref. Did you forget to use the ref parameter?

stderr | src/components/SidebarCollapsibleItem/SidebarCollapsibleItem.test
.tsx
Warning: forwardRef render functions accept exactly two parameters: props
and ref. Did you forget to use the ref parameter?

stderr | src/components/ProgressBar/ProgressBar.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props
and ref. Did you forget to use the ref parameter?

stderr | src/components/Collapsible/Collapsible.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props
and ref. Did you forget to use the ref parameter?

stderr | src/components/Popover/Popover.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props
and ref. Did you forget to use the ref parameter?

 ✓ src/components/CardPrimary/CardPrimary.test.tsx (8)
stderr | src/components/FileTabs/FileTabs.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props
and ref. Did you forget to use the ref parameter?

 ❯ src/components/HoverCard/HoverCard.test.tsx (4)
     · should not close hover card on pointerLeave and focus
 ✓ src/components/DatePicker/utils.test.ts (8)
 ✓ src/components/DatePicker/utils.test.ts (8)
 ✓ src/components/Grid/useResizingState.test.ts (6)
 ✓ src/components/Grid/useResizingState.test.ts (6)
 ❯ src/components/DatePicker/DatePicker.test.tsx (4)
 ❯ src/components/DatePicker/DatePicker.test.tsx (4)
   ❯ DatePicker (4)
 ❯ src/components/DatePicker/DatePicker.test.tsx (4)
   ❯ DatePicker (4)
 ❯ src/components/DatePicker/DatePicker.test.tsx (4)
   ❯ DatePicker (4)
 ❯ src/components/DatePicker/DatePicker.test.tsx (4)
   ❯ DatePicker (4)
 ❯ src/components/DatePicker/DatePicker.test.tsx (4)
   ❯ DatePicker (4)
 ❯ src/components/DatePicker/DatePicker.test.tsx (4)
   ❯ DatePicker (4)
 ❯ src/components/DatePicker/DatePicker.test.tsx (4)
   ❯ DatePicker (4)
 ❯ src/components/DatePicker/DatePicker.test.tsx (4)
   ❯ DatePicker (4)
 ❯ src/components/DatePicker/DatePicker.test.tsx (4)
   ❯ DatePicker (4)
 ❯ src/components/DatePicker/DatePicker.test.tsx (4)
   ❯ DatePicker (4)
 ❯ src/components/DatePicker/DatePicker.test.tsx (4)
   ❯ DatePicker (4)
stderr | src/components/Tooltip/Tooltip.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props
and ref. Did you forget to use the ref parameter?

 ❯ src/components/DatePicker/DatePicker.test.tsx (4)
   ❯ DatePicker (4)
 ❯ src/components/DatePicker/DatePicker.test.tsx (4)
   ❯ DatePicker (4)
 ❯ src/components/DatePicker/DatePicker.test.tsx (4)
   ❯ DatePicker (4)
 ❯ src/components/DatePicker/DatePicker.test.tsx (4)
   ❯ DatePicker (4)
 ❯ src/components/DatePicker/DatePicker.test.tsx (4)
   ❯ DatePicker (4)
 ❯ src/components/DatePicker/DatePicker.test.tsx (4)
   ❯ DatePicker (4)
stderr | src/components/RadioGroup/RadioGroup.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props
and ref. Did you forget to use the ref parameter?

 ❯ src/components/DatePicker/DatePicker.test.tsx (4)
   ❯ DatePicker (4)
 ❯ src/components/DatePicker/DatePicker.test.tsx (4)
   ❯ DatePicker (4)
 ❯ src/components/DatePicker/DatePicker.test.tsx (4)
   ❯ DatePicker (4)
 ❯ src/components/DatePicker/DatePicker.test.tsx (4)
   ❯ DatePicker (4)
 ✓ src/components/BigStat/BigStat.test.tsx (10)
 ✓ src/components/HoverCard/HoverCard.test.tsx (4)
 ✓ src/components/ProgressBar/ProgressBar.test.tsx (5)
 ✓ src/components/ProgressBar/ProgressBar.test.tsx (5)
 ✓ src/components/ProgressBar/ProgressBar.test.tsx (5)
 ✓ src/components/SidebarCollapsibleItem/SidebarCollapsibleItem.test.tsx (
 ✓ src/components/SidebarCollapsibleItem/SidebarCollapsibleItem.test.tsx (
 ✓ src/components/SidebarCollapsibleItem/SidebarCollapsibleItem.test.tsx (
 ✓ src/components/SidebarCollapsibleItem/SidebarCollapsibleItem.test.tsx (
 ✓ src/components/SidebarCollapsibleItem/SidebarCollapsibleItem.test.tsx (
 ✓ src/components/SidebarCollapsibleItem/SidebarCollapsibleItem.test.tsx (
 ✓ src/components/SidebarCollapsibleItem/SidebarCollapsibleItem.test.tsx (
 ✓ src/components/DatePicker/utils.test.ts (8)
 ✓ src/components/Grid/useResizingState.test.ts (6)
 ✓ src/components/Grid/useResizingState.test.ts (6)
stderr | src/components/Input/TextField.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props
and ref. Did you forget to use the ref parameter?

 ✓ src/components/Grid/useResizingState.test.ts (6)
 ✓ src/components/DatePicker/DatePicker.test.tsx (4) 430ms
stdout | src/components/Input/TextField.test.tsx > TextField > label color
 > is the default color when labelColor is not set
General Kenobi

stdout | src/components/Input/TextField.test.tsx > TextField > label color
 > is the color of the passed in labelColor


 ✓ src/components/DatePicker/DatePicker.test.tsx (4) 430ms
stderr | src/components/Badge/Badge.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props
and ref. Did you forget to use the ref parameter?

stderr | src/components/Accordion/Accordion.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props
and ref. Did you forget to use the ref parameter?

stderr | src/components/IconButton/IconButton.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props
and ref. Did you forget to use the ref parameter?

 ✓ src/components/DatePicker/DatePicker.test.tsx (4) 430ms
stderr | src/components/Checkbox/Checkbox.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props
and ref. Did you forget to use the ref parameter?

 ✓ src/components/DatePicker/DatePicker.test.tsx (4) 430ms
 ✓ src/components/ProgressBar/ProgressBar.test.tsx (5)
 ✓ src/components/SidebarCollapsibleItem/SidebarCollapsibleItem.test.tsx (
stderr | src/components/ButtonGroup/ButtonGroup.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props
and ref. Did you forget to use the ref parameter?

stderr | src/components/SidebarCollapsibleTitle/SidebarCollapsibleTitle.te
st.tsx
Warning: forwardRef render functions accept exactly two parameters: props
and ref. Did you forget to use the ref parameter?

 ✓ src/components/FileTabs/FileTabs.test.tsx (2)
 ✓ src/components/FileTabs/FileTabs.test.tsx (2)
stderr | src/components/SidebarNavigationTitle/SidebarNavigationTitle.test
.tsx
Warning: forwardRef render functions accept exactly two parameters: props
and ref. Did you forget to use the ref parameter?

stderr | src/components/SidebarNavigationItem/SidebarNavigationItem.test.t
sx
Warning: forwardRef render functions accept exactly two parameters: props
and ref. Did you forget to use the ref parameter?

stderr | src/components/Alert/Alert.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props
and ref. Did you forget to use the ref parameter?

 ✓ src/components/FileTabs/FileTabs.test.tsx (2)
stderr | src/components/Typography/Title/Title.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props
and ref. Did you forget to use the ref parameter?

 ✓ src/components/FileTabs/FileTabs.test.tsx (2)
 ✓ src/components/Popover/Popover.test.tsx (2)
 ✓ src/components/Input/TextField.test.tsx (2)
 ✓ src/components/Input/TextField.test.tsx (2)
 ✓ src/hooks/useUpdateEffect.test.ts (4)
 ✓ src/components/Input/TextField.test.tsx (2)
 ✓ src/hooks/useUpdateEffect.test.ts (4)
 ✓ src/hooks/useUpdateEffect.test.ts (4)
 ✓ src/components/ButtonGroup/ButtonGroup.test.tsx (3)
 ✓ src/hooks/useUpdateEffect.test.ts (4)
 ✓ src/components/ButtonGroup/ButtonGroup.test.tsx (3)
 ✓ src/components/Accordion/Accordion.test.tsx (3)
 ✓ src/components/Badge/Badge.test.tsx (2)
 ✓ src/components/Checkbox/Checkbox.test.tsx (2)
 ✓ src/components/Accordion/Accordion.test.tsx (3)
 ✓ src/components/Badge/Badge.test.tsx (2)
 ✓ src/components/Checkbox/Checkbox.test.tsx (2)
 ✓ src/hooks/useUpdateEffect.test.ts (4)
 ✓ src/components/ButtonGroup/ButtonGroup.test.tsx (3)
stderr | src/components/Link/Link.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props
and ref. Did you forget to use the ref parameter?

 ✓ src/hooks/useUpdateEffect.test.ts (4)
 ✓ src/components/ButtonGroup/ButtonGroup.test.tsx (3)
 ✓ src/components/ButtonGroup/ButtonGroup.test.tsx (3)
 ✓ src/components/Accordion/Accordion.test.tsx (3)
 ✓ src/components/ButtonGroup/ButtonGroup.test.tsx (3)
 ✓ src/components/Accordion/Accordion.test.tsx (3)
stderr | src/components/GridContainer/GridContainer.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props
and ref. Did you forget to use the ref parameter?

 ✓ src/components/ButtonGroup/ButtonGroup.test.tsx (3)
 ✓ src/components/Accordion/Accordion.test.tsx (3)
stderr | src/components/Typography/Text/Text.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props
and ref. Did you forget to use the ref parameter?

 ✓ src/components/ButtonGroup/ButtonGroup.test.tsx (3)
 ✓ src/components/Accordion/Accordion.test.tsx (3)
stderr | src/components/CardPromotion/CardPromotion.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props
and ref. Did you forget to use the ref parameter?

 ✓ src/components/ButtonGroup/ButtonGroup.test.tsx (3)
 ✓ src/components/Accordion/Accordion.test.tsx (3)
stderr | src/components/Container/Container.test.tsx
Warning: forwardRef render functions accept exactly two parameters: props
and ref. Did you forget to use the ref parameter?

 ✓ src/components/Accordion/Accordion.test.tsx (3)
 ✓ src/components/Badge/Badge.test.tsx (2)
 ✓ src/components/Checkbox/Checkbox.test.tsx (2)
 ✓ src/components/IconButton/IconButton.test.tsx (3)
 ✓ src/components/IconButton/IconButton.test.tsx (3)
 ✓ src/utils/truncate.test.ts (5)
 ✓ src/hooks/useUpdateEffect.test.ts (4)
 ✓ src/utils/truncate.test.ts (5)
 ✓ src/components/Accordion/Accordion.test.tsx (3)
 ✓ src/components/Alert/Alert.test.tsx (1)
 ✓ src/components/AutoComplete/AutoComplete.test.tsx (13) 474ms
 ✓ src/components/Button/Button.test.tsx (10)
 ✓ src/components/Badge/Badge.test.tsx (2)
 ✓ src/components/BigStat/BigStat.test.tsx (10)
 ✓ src/components/CardHorizontal/CardHorizontal.test.tsx (16)
 ✓ src/components/ButtonGroup/ButtonGroup.test.tsx (3)
 ✓ src/components/CardPrimary/CardPrimary.test.tsx (8)
 ✓ src/components/Checkbox/Checkbox.test.tsx (2)
 ✓ src/components/CardSecondary/CardSecondary.test.tsx (7)
 ✓ src/components/CardPromotion/CardPromotion.test.tsx (1)
 ✓ src/components/Collapsible/Collapsible.test.tsx (2)
 ✓ src/components/Container/Container.test.tsx (1)
 ✓ src/components/ConfirmationDialog/ConfirmationDialog.test.tsx (11)
 ✓ src/components/ContextMenu/ContextMenu.test.tsx (8) 566ms
 ❯ src/components/DateDetails/DateDetails.test.tsx (4)
   ❯ DateDetails (4)
     × renders the DateDetails component with relevant timezone informatio
     × allows for not passing in a system timezone
     × only shows the date if the previous date isn't in this year
     × handles Daylight Savings Time
 ✓ src/components/DatePicker/DatePicker.test.tsx (4) 430ms
 ✓ src/components/DatePicker/DateRangePicker.test.tsx (19) 1093ms
 ✓ src/components/DatePicker/utils.test.ts (8)
 ✓ src/components/Dialog/Dialog.test.tsx (5)
 ✓ src/components/FileTabs/FileTabs.test.tsx (2)
 ✓ src/components/Dropdown/Dropdown.test.tsx (8) 620ms
 ✓ src/components/Flyout/Flyout.test.tsx (6)
 ✓ src/components/Grid/Grid.test.tsx (4) 331ms
 ✓ src/components/Grid/useColumns.test.ts (5)
 ✓ src/components/Grid/useResizingState.test.ts (6)
 ✓ src/components/GridContainer/GridContainer.test.tsx (1)
 ✓ src/components/IconButton/IconButton.test.tsx (3)
 ✓ src/components/HoverCard/HoverCard.test.tsx (4)
 ✓ src/components/Link/Link.test.tsx (2)
 ✓ src/components/Input/TextField.test.tsx (2)
 ✓ src/components/MultiAccordion/MultiAccordion.test.tsx (5)
 ✓ src/components/Pagination/Pagination.test.tsx (12) 306ms
 ✓ src/components/Popover/Popover.test.tsx (2)
 ✓ src/components/RadioGroup/RadioGroup.test.tsx (2)
 ✓ src/components/ProgressBar/ProgressBar.test.tsx (5)
 ✓ src/components/Select/CheckboxMultiSelect.test.tsx (17) 740ms
 ✓ src/components/Select/MultiSelect.test.tsx (17) 632ms
 ✓ src/components/Select/SingleSelect.test.tsx (22) 645ms
 ✓ src/components/SidebarCollapsibleItem/SidebarCollapsibleItem.test.tsx (
 ✓ src/components/SidebarNavigationItem/SidebarNavigationItem.test.tsx (1)
 ✓ src/components/SidebarNavigationTitle/SidebarNavigationTitle.test.tsx (
 ✓ src/components/SidebarCollapsibleTitle/SidebarCollapsibleTitle.test.tsx
 ✓ src/components/SplitButton/SplitButton.test.tsx (9) 687ms
 ✓ src/components/Table/Table.test.tsx (5)
 ✓ src/components/Tabs/Tabs.test.tsx (4)
 ✓ src/components/Tooltip/Tooltip.test.tsx (4)
 ✓ src/components/VerticalStepper/VerticalStepper.test.tsx (4)
 ✓ src/components/Typography/Text/Text.test.tsx (2)
 ✓ src/components/Typography/Title/Title.test.tsx (2)

...

 Test Files  1 failed | 52 passed (53)
      Tests  4 failed | 303 passed (307)
   Start at  11:06:24
   Duration  13.43s (transform 3.77s, setup 4.33s, collect 102.43s, tests 10.02s, environment 13.49s, prepare 2.72s)

@changeset-bot
Copy link

changeset-bot bot commented Jan 22, 2026

⚠️ No Changeset found

Latest commit: d1a72ac

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@vercel
Copy link

vercel bot commented Jan 22, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (UTC)
click-ui Ready Ready Preview, Comment Jan 22, 2026 11:46am

Request Review

@punkbit punkbit merged commit 4529700 into main Jan 22, 2026
7 checks passed
@punkbit punkbit deleted the fix/missing-forward-refs branch January 22, 2026 16:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@elizabetdev elizabetdev elizabetdev approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@punkbit @elizabetdev