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,
},