diff --git a/.changeset/chilly-buckets-leave.md b/.changeset/chilly-buckets-leave.md new file mode 100644 index 0000000000..1bd19efdd0 --- /dev/null +++ b/.changeset/chilly-buckets-leave.md @@ -0,0 +1,5 @@ +--- +"@heroui/autocomplete": patch +--- + +show popover when emptyContent is provided with allowsCustomValue (#5745) diff --git a/packages/components/autocomplete/__tests__/autocomplete.test.tsx b/packages/components/autocomplete/__tests__/autocomplete.test.tsx index 0a689e6f97..f55ecdf0d9 100644 --- a/packages/components/autocomplete/__tests__/autocomplete.test.tsx +++ b/packages/components/autocomplete/__tests__/autocomplete.test.tsx @@ -3,7 +3,7 @@ import type {UserEvent} from "@testing-library/user-event"; import type {AutocompleteProps} from "../src"; import * as React from "react"; -import {within, render, renderHook, act} from "@testing-library/react"; +import {within, render, renderHook, act, waitFor} from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import {spy, shouldIgnoreReactWarning} from "@heroui/test-utils"; import {useForm} from "react-hook-form"; @@ -1089,3 +1089,63 @@ describe("focusedKey management with selected key", () => { expect(optionItem).toHaveAttribute("data-focus", "true"); }); }); + +describe("Autocomplete with allowsCustomValue", () => { + let user: UserEvent; + + beforeEach(() => { + user = userEvent.setup(); + }); + + it("should show the empty content when allowsCustomValue is true and a custom emptyContent is provided", async () => { + const wrapper = render( + No animals found, + }} + > + {(item: Item) => {item.label}} + , + ); + + const input = wrapper.getByTestId("autocomplete"); + + await user.click(input); + + act(() => { + jest.runAllTimers(); + }); + + const emptyContent = wrapper.getByTestId("empty-content"); + + await waitFor(() => { + expect(emptyContent).toBeVisible(); + }); + }); + + it("should not show the empty content when allowsCustomValue is true and no custom emptyContent is provided", async () => { + const wrapper = render( + + {(item: Item) => {item.label}} + , + ); + + const input = wrapper.getByRole("combobox"); + + await user.click(input); + + const listbox = wrapper.queryByRole("listbox"); + + expect(listbox).toBeNull(); + }); +}); diff --git a/packages/components/autocomplete/src/use-autocomplete.ts b/packages/components/autocomplete/src/use-autocomplete.ts index 8e4987575d..d334da3652 100644 --- a/packages/components/autocomplete/src/use-autocomplete.ts +++ b/packages/components/autocomplete/src/use-autocomplete.ts @@ -297,7 +297,7 @@ export function useAutocomplete(originalProps: UseAutocomplete ), listboxProps: mergeProps( { - hideEmptyContent: allowsCustomValue, + hideEmptyContent: allowsCustomValue && !listboxProps?.emptyContent, emptyContent: "No results found.", disableAnimation, },