tailwindlabs / headlessui

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
https://headlessui.com
MIT License
25.81k stars 1.07k forks source link

Ensure refs are forwarded when freezing data #3390

Open thecrypticace opened 2 months ago

thecrypticace commented 2 months ago

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

vercel[bot] commented 2 months ago

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