In detached mode when there are no items, the dropdown still appears

[Mikilll94]

Description

I want to display the items only when user has typed at least three characters.

Currently this results in the bug shown on the screenshot:

As you there is some strange white space below the input.

Reproduction

Steps

1. Open this CodeSandbox https://codesandbox.io/s/dont-open-dropdown-g4gdcm?file=/app.tsx
2. Click on Autocomplete and type "a".
3. As you can see there a strange white space below the input.

Expected behavior

When no items are available, the dropdown should not open and this strange white space below the input should not be present.

Environment

• OS: macOS 13.3.1
• Browser: Brave Version 1.57.62 Chromium: 116.0.5845.180 (Official Build) (x86_64)
• Autocomplete version: 1.11.0

[dhayab]

Hi @Mikilll94 , thanks for your report. We've updated the classic theme to hide the layout when it is empty. This will be released next week. In the meantime, you can apply the following CSS rule to have the same outcome:

.aa-DetachedContainer--modal .aa-PanelLayout:empty {
    display: none;
}

[Mikilll94]

@dhayab
When this fix is going to be released?

[dhayab]

This fix will be part of the next release, which should happen next week on Tuesday.

[dhayab]

Hi @Mikilll94 , you can now update to autocomplete@1.11.1 to benefit from this and other bugfixes: https://github.com/algolia/autocomplete/releases/tag/v1.11.1.