preact 10.9.4+ requires double click or move pointer out of @headlessui/react Tab panel/button

[anderskiaer]

• Check if updating to the latest Preact version resolves the issue

Describe the bug
Using a controlled <Tab> component from @headlessui/react works as expected on preact 10.19.3, but on 10.9.4 - 10.9.6 you have to either do an extra click somewhere in the browser, or, if using a pointer device, move it out of the tab list button, in order for the correct tab panel to be shown.

(Even though there is a change in behavior when upgrading preact to 10.9.4, it could be that there is an underlying issue with @headlessui/react that surfaced with 10.9.4+ 🤔 )

To Reproduce

• Use preact 10.9.4-10.9.6 and @headlessui/react": "^2.0.0-alpha.3.
• Use alias react: "preact/compat".
• Use e.g. example from docs (https://headlessui.com/react/tabs#controlling-the-active-tab):

  import React from "react";
  import { Tab } from "@headlessui/react";
  
  export default function MyTabs() {
    const [selectedIndex, setSelectedIndex] = React.useState(0);
  
    return (
      <Tab.Group selectedIndex={selectedIndex} onChange={setSelectedIndex}>
        <Tab.List>
          <Tab>Tab 1</Tab>
          <Tab>Tab 2</Tab>
          <Tab>Tab 3</Tab>
        </Tab.List>
        <Tab.Panels>
          <Tab.Panel>Content 1</Tab.Panel>
          <Tab.Panel>Content 2</Tab.Panel>
          <Tab.Panel>Content 3</Tab.Panel>
        </Tab.Panels>
      </Tab.Group>
    );
  }

• Click on the different tab list buttons and see that tab panel is not in sync (unless double clicking or moving cursor out of list button).

Observable in Firefox, Chrome and Safari.

Expected behavior

Same behavior as in preact 10.9.3.

[JoviDeCroock]

I have tested this locally and it worked fine even with 10.19.6 😅 mind providing a reproduction that shows the issue?

[zalishchuk]

I have the same weird issue with preact/compat and react-transition-group on almost all mobile devices and some desktop ones, some actions require re-render from "outside" and act weirdly, looks like the rendered output uses a "previous" state or props for some reason, v10.19.3 works as expected, v10.19.4+ has the issue. I might prepare a proper reproduction right now.