tailwindlabs / headlessui

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.

Home Page:https://headlessui.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Checkbox transition stops working if the checked state is managed externally

elokour opened this issue · comments

What package within Headless UI are you using?
@headlessui/react

What version of that package are you using?
v2.0

What browser are you using?
chrome

Reproduction URL
had some issues with codesandbox so could not provide link
even tried stackblitz and also had issues there.

here is a code snippet of my issue:
my code:

import { Checkbox } from "@headlessui/react";

export default function CheckboxElement({
  checked,
  onChange,
}: {
  checked: boolean;
  onChange: (checked: boolean) => void;
}) {
  return (
    <Checkbox
      checked={checked}
      onChange={onChange}
      className="group block size-4 rounded border bg-transparent transition duration-200 data-[checked]:bg-primary"
    >
      {/* Checkmark icon */}
        <svg
          className="stroke-white opacity-0 transition duration-200 group-data-[checked]:opacity-100"
          viewBox="0 0 14 14"
          fill="none"
        >
          <path
            d="M3 8L6 11L11 3.5"
            strokeWidth={2}
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </svg>
    </Checkbox>
  );
}

documentation example:

import { Checkbox } from '@headlessui/react'
import { useState } from 'react'

function Example() {
  const [enabled, setEnabled] = useState(false)

  return (
    <Checkbox
      checked={enabled}
      onChange={setEnabled}
      className="group block size-4 rounded border bg-white transition data-[checked]:bg-blue-500"
    >
      <svg
        className="stroke-white opacity-0 transition group-data-[checked]:opacity-100"
        viewBox="0 0 14 14"
        fill="none"
      >
        <path d="M3 8L6 11L11 3.5" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    </Checkbox>
  )
}

Describe your issue
Because my checked and onChange states are coming from the parent component as props the CSS transition won't work and as soon as I write it like in the documentation where the state is internal the CSS transition works as expected.