tailwindlabs / headlessui

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

onClick event no longer works inside Menu.Item #3550

Closed RajatSatashiya closed 4 weeks ago

RajatSatashiya commented 4 weeks ago

Package: @headlessui/react Version: v2.2.0 (in fact any v2 version) Browser: Chrome

Code

 <Menu>
      {open && (
        <MenuItems
          anchor="bottom"
          static
          style={{
            top: `0px`,
            left: `${position / 2.7}px`,
            height: "18rem",
            width: "18rem",
          }}
          className={`overflow-auto mt-20 bg-white divide-y divide-gray-100 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none`}
        >
          <MenuItem key={"123"}>
            {({ focus }) => (
              <div
                className={`flex p-2 cursor-pointer bg-gray-200 text-black`}
                onClick={() => {
                  alert("clicked");
                }}
              >
                {"123"}
              </div>
            )}
          </MenuItem>
          <MenuItem key={"1223"}>
            {({ focus }) => (
              <div
                className={`flex p-2 cursor-pointer bg-gray-200 text-black`}
                onClick={() => {
                  alert("clicked");
                }}
              >
                {"1223"}
              </div>
            )}
          </MenuItem>
        </MenuItems>
      )}
</Menu>

Describe your issue

The onClick event as mentioned above in the code doesn't work anymore. with the older v1 version, it used to work, now it has stopped working.