feat: show error message in autocomplete panel on search API failure#41
Merged
mekarpeles merged 2 commits intomainfrom Apr 27, 2026
Merged
feat: show error message in autocomplete panel on search API failure#41mekarpeles merged 2 commits intomainfrom
mekarpeles merged 2 commits intomainfrom
Conversation
closes #36 Previously a non-abort fetch error in _fetchAutocomplete cleared _suggestions and silently rendered nothing — indistinguishable from "no results yet." Users had no way to know search was broken. Adds _acError reactive state (bool). _fetchAutocomplete resets it to false on each attempt and sets it to true on any non-abort exception. _renderResults now checks _acError before the hint/results branches and returns a .ac-error div with role="alert". A muted-red CSS rule gives it visual weight without being alarming. Six static-analysis tests in ol-search-bar.panel-overlay.test.js verify the full contract: state declaration, initialization, set/reset in fetch, render branch, and CSS rule.
Contributor
There was a problem hiding this comment.
Pull request overview
Adds an explicit autocomplete error state to ol-search-bar so users see a visible message in the open panel when the search API fails, instead of an indistinguishable empty state.
Changes:
- Introduces reactive
_acErrorstate, set/reset in_fetchAutocomplete()based on non-abort failures. - Renders an
.ac-erroralert message in the autocomplete panel when_acErroris true, and adds corresponding CSS styling. - Adds static contract tests to assert
_acErrorstate, render branch, and CSS rule presence.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| frontend/src/components/ol-search-bar.js | Adds _acError state, error UI branch in _renderResults, and .ac-error styling. |
| frontend/src/components/ol-search-bar.panel-overlay.test.js | Adds static-analysis contract tests validating the _acError implementation. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- _acError now cleared in _onInput early-return path (q < 2 chars) and in _clearInput() so a stale error message does not persist after the user clears the input or drops below the minimum query length - Test slice anchored on 'async _fetchAutocomplete()' (method signature) instead of '_fetchAutocomplete' (which matched the setTimeout call site) - Two new tests verify _acError is cleared in both reset paths
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #36
Problem
A network failure or 500 during
_fetchAutocompletepreviously cleared_suggestionsand silently rendered nothing. The open panel looked identical to "type more to search" — no way for users to know search was broken.Changes
_acError: { state: true }added to properties, initialisedfalse_fetchAutocompleteresets_acError = falseat the start of each attempt; sets_acError = trueon any non-abort exception_renderResultschecks_acErrorbefore the hint/results branches → returns arole="alert"error div.ac-errorCSS: muted red text on a light red background, same padding as.ac-hint-msgDone checklist
_acErrordeclared as reactive state_acError = falsereset at start of every fetch_acError = trueset on non-abort errors_renderResultsrenders.ac-errorwithrole="alert"when true.ac-errorCSS rule in component styles