@energysage/es-ds-components 6.3.1 → 6.3.3

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [6.3.3](https://github.com/EnergySage/es-ds/compare/es-ds-components-v6.3.2...es-ds-components-v6.3.3) (2026-10-19)
+
+
+### Bug Fixes
+
+* exclude tests from package to prevent downstream type errors ([#1798](https://github.com/EnergySage/es-ds/issues/1798)) ([07723a3](https://github.com/EnergySage/es-ds/commit/07723a36cefd46a8eacbc2c63413a753702aa34c))
+
+## [6.3.2](https://github.com/EnergySage/es-ds/compare/es-ds-components-v6.3.1...es-ds-components-v6.3.2) (2026-10-14)
+
+
+### Bug Fixes
+
+* EsAutocomplete auto-select no longer selects from a stale list ([#1796](https://github.com/EnergySage/es-ds/issues/1796)) ([b680b58](https://github.com/EnergySage/es-ds/commit/b680b58d90ddae913c4c7e715f63d412cd0c4b4f))
+
 ## [6.3.1](https://github.com/EnergySage/es-ds/compare/es-ds-components-v6.3.0...es-ds-components-v6.3.1) (2026-10-12)
 
 

package/app/components/es-autocomplete-desktop.vue

@@ -22,6 +22,7 @@ interface Props {
     state?: boolean | null;
     suggestionCountText: (count: number) => string;
     suggestions: EsAutocompleteSuggestion[];
+    suggestionsPending: boolean;
 }
 
 const props = defineProps<Props>();
@@ -140,6 +141,7 @@ const combobox = useEsAutocompleteCombobox({
     model,
     // arrows navigate exactly what is displayed; nothing while the panel is closed
     suggestions: () => (listboxOpen.value ? visibleSuggestions.value : []),
+    suggestionsPending: () => props.suggestionsPending,
 });
 watch(open, combobox.resetHighlight);
 

package/app/components/es-autocomplete-mobile.vue

@@ -31,6 +31,7 @@ interface Props {
     state?: boolean | null;
     suggestionCountText: (count: number) => string;
     suggestions: EsAutocompleteSuggestion[];
+    suggestionsPending: boolean;
     triggerDescribedBy: string;
 }
 
@@ -83,6 +84,7 @@ const combobox = useEsAutocompleteCombobox({
     model,
     // arrows navigate exactly what is displayed
     suggestions: () => (takeoverOpen.value ? visibleSuggestions.value : []),
+    suggestionsPending: () => props.suggestionsPending,
 });
 
 // the takeover's input announces "expanded" exactly when a list exists

package/app/components/es-autocomplete.vue

@@ -70,16 +70,17 @@ const triggerDescribedBy = computed(() => (showError.value ? `${triggerHelpId} $
 
 // the debounced 'complete' contract, minChars gating, and prompt/no-results
 // messaging live in useEsAutocompleteSearch so the contract is unit-testable
-const { effectiveSuggestions, noResultsAnnouncement, onSelect, panelMessage } = useEsAutocompleteSearch({
-    delay: () => props.delay,
-    emitComplete: (query) => emit('complete', query),
-    emitSelect: (suggestion) => emit('select', suggestion),
-    minChars: () => props.minChars,
-    model,
-    noResultsText: () => props.noResultsText,
-    promptText: () => props.promptText,
-    suggestions: () => props.suggestions,
-});
+const { effectiveSuggestions, noResultsAnnouncement, onSelect, panelMessage, suggestionsPending } =
+    useEsAutocompleteSearch({
+        delay: () => props.delay,
+        emitComplete: (query) => emit('complete', query),
+        emitSelect: (suggestion) => emit('select', suggestion),
+        minChars: () => props.minChars,
+        model,
+        noResultsText: () => props.noResultsText,
+        promptText: () => props.promptText,
+        suggestions: () => props.suggestions,
+    });
 </script>
 
 <template>
@@ -104,6 +105,7 @@ const { effectiveSuggestions, noResultsAnnouncement, onSelect, panelMessage } =
                 :state="state"
                 :suggestion-count-text="suggestionCountText"
                 :suggestions="effectiveSuggestions"
+                :suggestions-pending="suggestionsPending"
                 @blur="emit('blur')"
                 @select="onSelect">
                 <template
@@ -135,6 +137,7 @@ const { effectiveSuggestions, noResultsAnnouncement, onSelect, panelMessage } =
                 :state="state"
                 :suggestion-count-text="suggestionCountText"
                 :suggestions="effectiveSuggestions"
+                :suggestions-pending="suggestionsPending"
                 :trigger-described-by="triggerDescribedBy"
                 @blur="emit('blur')"
                 @select="onSelect">

package/app/composables/autocomplete-combobox.ts

@@ -29,6 +29,11 @@ interface AutocompleteComboboxOptions {
      * the trim, and empty while closed so keys cannot walk an invisible list
      */
     suggestions: () => EsAutocompleteSuggestion[];
+    /**
+     * whether the list answers an earlier query than the one typed, because the
+     * app has yet to answer the latest edit
+     */
+    suggestionsPending: () => boolean;
 }
 
 /**
@@ -49,12 +54,28 @@ export function useEsAutocompleteCombobox(options: AutocompleteComboboxOptions)
     // split es-dropdown-select makes)
     const keyboardNav = computed(() => highlightSource.value === 'keyboard');
 
-    // the suggestion the field itself follows under automatic selection: the
-    // first, and only arrowing takes the field off it. a pointer passing over the
-    // list highlights what it is over without touching what the field proposes
-    const autoSelectedSuggestion = computed(() =>
-        options.autoSelect() && !keyboardNav.value ? (options.suggestions()[0] ?? null) : null,
-    );
+    // whether the suggestion's text begins with what is typed, so the field can
+    // show it as the typed text with a remainder after it
+    function continuesTyped(suggestion: EsAutocompleteSuggestion) {
+        const typed = options.model.value;
+        return !!typed && suggestion.text.toLowerCase().startsWith(typed.toLowerCase());
+    }
+
+    // automatic selection's choice: the first suggestion. a list answering an
+    // earlier query keeps it only while it continues the typed text, so Enter or
+    // leaving the field never commits a suggestion the user has typed past
+    const heldSuggestion = computed(() => {
+        const first = options.autoSelect() ? options.suggestions()[0] : undefined;
+        if (!first) {
+            return null;
+        }
+        return !options.suggestionsPending() || continuesTyped(first) ? first : null;
+    });
+
+    // the suggestion the field itself follows under automatic selection, until
+    // arrowing takes the field off it. a pointer passing over the list
+    // highlights what it is over without touching what the field proposes
+    const autoSelectedSuggestion = computed(() => (keyboardNav.value ? null : heldSuggestion.value));
     // automatic selection also holds the highlight, until the user takes it
     const autoHighlighted = computed(() => autoSelectedSuggestion.value !== null && highlightIndex.value < 0);
     // where the highlight actually sits: the user's, or automatic selection's
@@ -80,12 +101,10 @@ export function useEsAutocompleteCombobox(options: AutocompleteComboboxOptions)
     const autoCompletion = computed(() => {
         const typed = options.model.value;
         const suggestion = autoSelectedSuggestion.value;
-        if (!completionAllowed.value || !typed || !suggestion || suggestion.text.length <= typed.length) {
+        if (!completionAllowed.value || !suggestion || suggestion.text.length <= typed.length) {
             return null;
         }
-        return suggestion.text.toLowerCase().startsWith(typed.toLowerCase())
-            ? typed + suggestion.text.slice(typed.length)
-            : null;
+        return continuesTyped(suggestion) ? typed + suggestion.text.slice(typed.length) : null;
     });
 
     // what the input displays: the typed query, the highlighted suggestion while
@@ -103,7 +122,7 @@ export function useEsAutocompleteCombobox(options: AutocompleteComboboxOptions)
     // suggestion that does not complete the typed text changes nothing on screen,
     // and an aria-activedescendant change alone is not reliably spoken, so
     // without this a screen reader hears no selection at all
-    const autoSelectedText = computed(() => (options.autoSelect() ? (options.suggestions()[0]?.text ?? '') : ''));
+    const autoSelectedText = computed(() => heldSuggestion.value?.text ?? '');
 
     const listboxId = `${options.idPrefix}-listbox`;
     function optionId(index: number) {

package/app/composables/autocomplete-search.ts

@@ -20,8 +20,9 @@ const EMPTY_SUGGESTIONS: EsAutocompleteSuggestion[] = [];
 
 /**
  * the search state behind es-autocomplete.vue: the debounced 'complete' contract,
- * the minChars gate, the staleness of the app's list after a selection, and the
- * empty-state messaging. here so it is unit-testable without a mount.
+ * the minChars gate, the staleness of the app's list after a selection, which
+ * query that list answers, and the empty-state messaging. here so it is
+ * unit-testable without a mount.
  */
 export function useEsAutocompleteSearch(options: AutocompleteSearchOptions) {
     const { model } = options;
@@ -48,9 +49,13 @@ export function useEsAutocompleteSearch(options: AutocompleteSearchOptions) {
             searchTimeout = null;
         }
     }
+    // the query last sent out, recorded before the emit so an app that answers
+    // synchronously inside its handler is credited with answering it
+    let lastCompletedQuery: string | null = null;
     function scheduleComplete(query: string) {
         cancelPendingComplete();
         searchTimeout = setTimeout(() => {
+            lastCompletedQuery = query;
             options.emitComplete(query);
         }, options.delay());
     }
@@ -60,11 +65,16 @@ export function useEsAutocompleteSearch(options: AutocompleteSearchOptions) {
     // whether the app's last update was empty, which tells "search found nothing"
     // (noResultsText) from "nothing has answered yet" (promptText)
     const noResults = ref(false);
+    // the query the app's list answers: the last one sent out when the list
+    // arrived. an app is expected to drop a response to an earlier query that
+    // arrives late, since nothing here can tell it apart
+    const answeredQuery = ref<string | null>(null);
     watch(
         options.suggestions,
         (list) => {
             noResults.value = list.length === 0;
             suggestionsStale.value = false;
+            answeredQuery.value = lastCompletedQuery;
         },
         // depth 1 so apps that mutate the array in place (push/splice) are seen too
         { deep: 1 },
@@ -73,6 +83,11 @@ export function useEsAutocompleteSearch(options: AutocompleteSearchOptions) {
     // what an open panel shows with nothing to render: the no-results message once
     // a search has come back empty, otherwise the prompt
     const queryLongEnough = computed(() => model.value.trim().length >= options.minChars());
+
+    // the typed query has moved past what the list answers, and its own search
+    // is still debouncing or in flight. the list stays on screen meanwhile, but
+    // automatic selection must not commit from it (see useEsAutocompleteCombobox)
+    const suggestionsPending = computed(() => queryLongEnough.value && model.value.trim() !== answeredQuery.value);
     const panelMessage = computed(() => {
         if (effectiveSuggestions.value.length) {
             return '';
@@ -124,5 +139,5 @@ export function useEsAutocompleteSearch(options: AutocompleteSearchOptions) {
         options.emitSelect(suggestion);
     }
 
-    return { effectiveSuggestions, noResultsAnnouncement, onSelect, panelMessage };
+    return { effectiveSuggestions, noResultsAnnouncement, onSelect, panelMessage, suggestionsPending };
 }

package/nuxt.config.ts

@@ -109,6 +109,7 @@ export default defineNuxtConfig({
             },
         },
     },
+    // Applies to all consuming apps too, since layer config merges into theirs
     typescript: {
         typeCheck: true,
     },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@energysage/es-ds-components",
-    "version": "6.3.1",
+    "version": "6.3.3",
     "private": false,
     "type": "module",
     "description": "An EnergySage Vue component library",
@@ -18,6 +18,13 @@
         "url": "https://github.com/EnergySage/es-ds/issues"
     },
     "main": "./nuxt.config.ts",
+    "files": [
+        "app",
+        "nuxt.config.ts",
+        "CHANGELOG.md",
+        "README.md",
+        "!**/*.test.ts"
+    ],
     "scripts": {
         "test": "vitest run",
         "lint:eslint": "eslint .",

package/.prettierignore

@@ -1,2 +0,0 @@
-# Managed by release-please
-CHANGELOG.md

package/.prettierrc.json

@@ -1,10 +0,0 @@
-{
-    "printWidth": 119,
-    "useTabs": false,
-    "singleQuote": true,
-    "trailingComma": "all",
-    "bracketSpacing": true,
-    "bracketSameLine": true,
-    "singleAttributePerLine": true,
-    "tabWidth": 4
-}

package/app/composables/autocomplete-announcer.test.ts

@@ -1,70 +0,0 @@
-// @vitest-environment happy-dom
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import type { App } from 'vue';
-import { createApp, nextTick, ref } from 'vue';
-import { useEsAutocompleteAnnouncer } from './autocomplete-announcer';
-
-/** run the composable inside a real component so watchers are scoped */
-function withSetup<T>(composable: () => T): { app: App; result: T } {
-    let result!: T;
-    const app = createApp({
-        setup() {
-            result = composable();
-            return () => null;
-        },
-    });
-    app.mount(document.createElement('div'));
-    return { app, result };
-}
-
-function makeAnnouncer(initial = '') {
-    const source = ref(initial);
-    const { app, result: announced } = withSetup(() => useEsAutocompleteAnnouncer(() => source.value));
-    return { announced, app, source };
-}
-
-describe('useEsAutocompleteAnnouncer', () => {
-    beforeEach(() => vi.useFakeTimers());
-    afterEach(() => vi.useRealTimers());
-
-    it('holds the text back until the listbox has stopped changing', async () => {
-        const { announced, source } = makeAnnouncer();
-        source.value = '34 Prospect St';
-        await nextTick();
-        expect(announced.value).toBe('');
-        vi.advanceTimersByTime(250);
-        expect(announced.value).toBe('34 Prospect St');
-    });
-
-    it('speaks only the last of several texts arriving together', async () => {
-        const { announced, source } = makeAnnouncer();
-        source.value = '34 Prospect St';
-        await nextTick();
-        vi.advanceTimersByTime(100);
-        source.value = '355 Cedar Ct';
-        await nextTick();
-        vi.advanceTimersByTime(100);
-        expect(announced.value).toBe('');
-        vi.advanceTimersByTime(150);
-        expect(announced.value).toBe('355 Cedar Ct');
-    });
-
-    it('empties at once, having nothing to wait behind', async () => {
-        const { announced, source } = makeAnnouncer();
-        source.value = '34 Prospect St';
-        await nextTick();
-        vi.advanceTimersByTime(250);
-        source.value = '';
-        await nextTick();
-        expect(announced.value).toBe('');
-    });
-
-    it('drops a text still waiting when the component goes away', async () => {
-        const { announced, app, source } = makeAnnouncer();
-        source.value = '34 Prospect St';
-        await nextTick();
-        app.unmount();
-        vi.advanceTimersByTime(250);
-        expect(announced.value).toBe('');
-    });
-});