[BUG] - Button: onPress prop not being invoked on Mouse Events when Select Popover is open

[MuazAsif-Dev]

NextUI Version

2.1.13

Describe the bug

In this example of the Select component, the onPress prop on the Button component is not acting as expected. Pressing (Key down or mouse click) opens the select popover but then only a Key down action can close the select component, clicking doesn't work.

Using a native button element (btn in my example) with the onClick prop works as expected but the props on the Button component are not able to achieve consistent behavior across Mouse and Keyboard.

I have created a basic demo setup from scratch in the video below.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Setup Next UI with Next.js (No other dependencies except for the defaults)

{
  "name": "new-test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@nextui-org/react": "^2.1.13",
    "@types/node": "20.6.3",
    "@types/react": "18.2.22",
    "@types/react-dom": "18.2.7",
    "autoprefixer": "10.4.16",
    "eslint": "8.49.0",
    "eslint-config-next": "13.5.2",
    "framer-motion": "^10.16.4",
    "next": "13.5.2",
    "postcss": "8.4.30",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.3",
    "typescript": "5.2.2"
  }
}

2. Create a Select and Button component as in this example.

"use client";

import { Select, SelectItem, Button } from "@nextui-org/react";
import { useState } from "react";
import { animals } from "@/data";

export default function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="h-screen flex justify-center items-center">
      <div className="flex w-full max-w-4xl justify-between items-center gap-8">
        <div>
          <Select
            isOpen={isOpen}
            label="Favorite Animal"
            placeholder="Select an animal"
            defaultSelectedKeys={["cat"]}
            className="max-w-xs"
          >
            {animals.map((animal) => (
              <SelectItem key={animal.value} value={animal.value}>
                {animal.label}
              </SelectItem>
            ))}
          </Select>
        </div>
        <button
          className="rounded-xl bg-gray-300 py-2 px-4"
          onClick={() => console.log("Btn click")}
        >
          Btn
        </button>
        <Button
          onClick={() => {
            console.log("onClick invoked");
          }}
          onPress={() => {
            console.log("onPress invoked");
            setIsOpen(!isOpen);
          }}
          onPressUp={() => {
            console.log("onPressUp invoked");
          }}
          onPressStart={() => {
            console.log("onPressStart invoked");
          }}
          onPressEnd={() => {
            console.log("onPressEnd invoked");
          }}
        >
          {isOpen ? "Close" : "Open"}
        </Button>
      </div>
    </div>
  );
}

3. Click on the button to open the select popover

Expected behavior

The expected behavior when the select popover is open, and you click on the button again to toggle the open state, is for the popover to close.

What happens is that the select popover doesn't close on clicking the button.

Screenshots or Videos

next-ui-select-bug.mp4

Operating System Version

Linux (Ubuntu 22)

Browser

Chrome

[SaadFarooq-Dev]

Following this issue

[ahmadbafrani]

I have the same issue. When I click on Select it opens, but when I click on Select itself, it doesn't close the popover. Surprisingly this is working fine on the NextUI document page! Any updates on this?

[wingkwong]

@ahmadbafrani this has been fixed in canary branch. It will be available in the next release, which will be taken place later today.

[awesome-pro]

@wingkwong , @ahmadbafrani kindly close it as #completed

[wingkwong]

@abhinandan-verma my comment was only for his case only, not for the original issue posted here. Need to double check if it is still reproducible or not.

[Codezeer]

I have the same problem with the autocomplete. I have a contact list with autocomplete, when the search yields no results through emptyContent I display a button that when clicked opens the modal object and should close the autocomplete list. The modal opens but the list remains open and visible on the layer of the modal.

<Autocomplete
            isRequired
            isOpen={isOpenSender}
            onOpenChange={(open) => setIsOpenSender(open)}
            label="Mittente"
            defaultItems={senders || []}
            placeholder="Seleziona un mittente"
            className="w-full"
            listboxProps={{
              emptyContent: (
                <>
                  <span
                    className="text-xs text-gray-500 cursor-pointer ml-2"
                    onClick={() => setIsOpenSender(false)}
                  >
                    Not found
                  </span>
                  <Button onClick={() => handleCloseAutocomplete()}>
                    Add new contact
                  </Button>
                </>
              ),
            }}
            onSelectionChange={(key) =>
              handleSelectionChange(key, "DOCUMENTSENDERID")
            }
            defaultSelectedKey={formData?.DOCUMENTSENDERID?.toString()}
          >
            {(item) => (
              <AutocompleteItem key={item.ID.toString()} value={item.ID}>
                {item.NAME}
              </AutocompleteItem>
            )}
          </Autocomplete>