Skip to content

Conversation

thecrypticace
Copy link
Contributor

We were wrapping rendered children in <Frozen> in a combobox however the refs weren't being forwarded through the internal <Frozen> component resulting in issues when rendering <ComboboxOptions> as a Fragment.

After this PR the following code no longer warns about function components not accepting refs.

import { Combobox, ComboboxInput, ComboboxOption, ComboboxOptions } from '@headlessui/react'
import React from 'react'

export default function Example() {
  return (
    <div className="p-4">
      <Combobox>
        <ComboboxInput className="rounded border border-neutral-400 p-2" />
        <ComboboxOptions as={React.Fragment}>
          <div className="bg-orange-500 p-4">
            <ComboboxOption value="a">A</ComboboxOption>
          </div>
        </ComboboxOptions>
      </Combobox>
    </div>
  )
}

Fixes #3384

Copy link

vercel bot commented Jul 17, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
headlessui-react ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 17, 2024 4:24pm
headlessui-vue ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 17, 2024 4:24pm

@thecrypticace thecrypticace changed the title Ensure ref are forwarded when freezing data Ensure refs are forwarded when freezing data Jul 17, 2024
@augustl
Copy link

augustl commented Oct 24, 2024

So, really sorry to be "that guy" (tbh, Github needs a "donate money here before you pester the open source maintainers" button), but is there anything I can help out with in order to get this one merged? :)

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