ui:open not working

[abubakar2029]

<Disclosure.Button className="text-left flex justify-between " > <span className=" flex justify-center items-center my-auto"> <i className="material-icons !leading-[0]"> remove </i> <i className={material-icons !leading-[0] absolute transition-transform rotate-0 duration-500 z-10 ui-open:rotate-90 ui-open:transform ui-open:origin-center >
remove


</Disclosure.Button>
`

[zenovak]

Hello, I had faced similar issues in Headlessui 1.7

The solution to this is to use ui-not-open for your classes instead to specify the counter styles when disclosure is close. as ui-open somehow is higher priority than normal classes, and would apply even when disclosure is not open

This is what i did:

Accordion.Button = ({ className, override, children, ...props }) => {
  return (
    <Disclosure.Button
      className={override ? className : "px-2 py-3 bg-white w-full flex items-center justify-between text-sm text-gray-900 " + className}
      {...props}>
      {children}
      <Icon
        icon="mdi:chevron-down"
        className="ui-open:-rotate-180 ui-not-open:rotate-0  ui-open:transform h-5 w-5 text-gray-400"
        aria-hidden="true"
      />
    </Disclosure.Button>
  )
}