Skip to content

Commit 75345b0

Browse files
committed
fix: keyboard navigation stops working
If you focus an autocomplete element that has an empty array as it's source, then listbox is rapidly created and removed (during the source$ promise handling) causing the useKeyboard effect to initialize *after* the element has been removed from DOM, leading to a phantom keydown event handler that is never cleared. Fixes https://neovici.slack.com/archives/C6LJQMJFM/p1757426096769989
1 parent 2b3c48e commit 75345b0

File tree

1 file changed

+11
-11
lines changed

1 file changed

+11
-11
lines changed

src/autocomplete/autocomplete.ts

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -58,21 +58,16 @@ const middleware = [
5858

5959
const shouldShowDropdown = <I>({
6060
active,
61-
loading,
62-
items,
63-
text,
6461
isSingle,
6562
showSingle,
66-
}: Pick<AProps<I>, 'active' | 'loading' | 'items' | 'text' | 'showSingle'> & {
63+
}: Pick<AProps<I>, 'active' | 'showSingle'> & {
6764
isSingle: boolean;
6865
}) => {
6966
if (!active) return false;
7067

71-
const hasResultsOrQuery =
72-
loading || items.length > 0 || (text != null && text.length > 0);
7368
const disallowedSingle = isSingle && !showSingle;
7469

75-
return hasResultsOrQuery && !disallowedSingle;
70+
return !disallowedSingle;
7671
};
7772

7873
const autocomplete = <I>(props: AProps<I>) => {
@@ -128,6 +123,9 @@ const autocomplete = <I>(props: AProps<I>) => {
128123
[],
129124
);
130125

126+
const hasResultsOrQuery =
127+
loading || items.length > 0 || (text != null && text.length > 0);
128+
131129
return html`<cosmoz-input
132130
id="input"
133131
part="input"
@@ -175,9 +173,6 @@ const autocomplete = <I>(props: AProps<I>) => {
175173
${when(
176174
shouldShowDropdown({
177175
active,
178-
loading,
179-
items,
180-
text,
181176
isSingle,
182177
showSingle,
183178
}),
@@ -188,7 +183,12 @@ const autocomplete = <I>(props: AProps<I>) => {
188183
items,
189184
multi: !isOne,
190185
setFloating,
191-
styles,
186+
styles: {
187+
...styles,
188+
// WORKAROUND: hide the listbox if there are no results, don't remove it from DOM
189+
// TODO: revert https://github.com/Neovici/cosmoz-autocomplete/pull/206 after https://github.com/pionjs/pion/issues/64 is fixed
190+
display: hasResultsOrQuery ? undefined : 'none',
191+
},
192192
},
193193
when(
194194
loading,

0 commit comments

Comments
 (0)