headlessui icon indicating copy to clipboard operation
headlessui copied to clipboard

Ensure refs are forwarded when freezing data

Open thecrypticace opened this issue 1 year ago • 2 comments

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

thecrypticace avatar Jul 17 '24 16:07 thecrypticace

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

Project Deployment Preview Comments Updated (UTC)
headlessui-react Ready Ready Preview Comment Sep 25, 2025 1:20pm
headlessui-vue Ready Ready Preview Comment Sep 25, 2025 1:20pm

vercel[bot] avatar Jul 17 '24 16:07 vercel[bot]

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? :)

augustl avatar Oct 24 '24 07:10 augustl