diff --git a/packages/autocomplete-js/src/autocomplete.ts b/packages/autocomplete-js/src/autocomplete.ts
index d3c1da780..66b9ad4ba 100644
--- a/packages/autocomplete-js/src/autocomplete.ts
+++ b/packages/autocomplete-js/src/autocomplete.ts
@@ -39,21 +39,6 @@ export function autocomplete<TItem extends BaseItem>(
   const isDetached = reactive(
     () => window.matchMedia(props.value.renderer.detachedMediaQuery).matches
   );
-  const shouldPanelOpen =
-    optionsRef.current.shouldPanelOpen ||
-    (({ state }) => {
-      const hasItems = getItemsCount(state) > 0;
-
-      if (!props.value.core.openOnFocus && !state.query) {
-        return hasItems;
-      }
-
-      const hasEmptyTemplate = Boolean(
-        hasEmptySourceTemplateRef.current || props.value.renderer.renderEmpty
-      );
-
-      return (!hasItems && hasEmptyTemplate) || hasItems;
-    });
   const autocomplete = reactive(() =>
     createAutocomplete<TItem>({
       ...props.value.core,
@@ -65,7 +50,22 @@ export function autocomplete<TItem extends BaseItem>(
         onStateChangeRef.current?.(options as any);
         props.value.core.onStateChange?.(options as any);
       },
-      shouldPanelOpen: isDetached ? () => true : shouldPanelOpen,
+      shouldPanelOpen:
+        optionsRef.current.shouldPanelOpen ||
+        (({ state }) => {
+          const hasItems = getItemsCount(state) > 0;
+
+          if (!props.value.core.openOnFocus && !state.query) {
+            return hasItems;
+          }
+
+          const hasEmptyTemplate = Boolean(
+            hasEmptySourceTemplateRef.current ||
+              props.value.renderer.renderEmpty
+          );
+
+          return (!hasItems && hasEmptyTemplate) || hasItems;
+        }),
     })
   );
   const lastStateRef = createRef<AutocompleteState<TItem>>({
diff --git a/packages/autocomplete-js/src/render.tsx b/packages/autocomplete-js/src/render.tsx
index 103316257..81e714a94 100644
--- a/packages/autocomplete-js/src/render.tsx
+++ b/packages/autocomplete-js/src/render.tsx
@@ -105,7 +105,7 @@ export function renderPanel<TItem extends BaseItem>(
         </div>
       )}
 
-      {items.length === 0 && source.templates.empty ? (
+      {items.length === 0 && source.templates.empty && state.query ? (
         <div className={classNames.sourceEmpty}>
           {source.templates.empty({
             createElement,