diff --git a/src/components/PlacesSearch.tsx b/src/components/PlacesSearch.tsx index 7650505..e34c337 100644 --- a/src/components/PlacesSearch.tsx +++ b/src/components/PlacesSearch.tsx @@ -47,6 +47,14 @@ interface PlacesSearchProps { * introduction. The panel opened by "Can't see your address?" keeps its own. */ noResultsTitle?: string + /** + * Report an empty search in the app's error style: a red border on the field + * and the standard red error message under it, above "Use my current location". + * The options panel still follows, headed by noResultsTitle — so the error says + * what went wrong and the panel offers the ways on. Pairs with + * enableFallbackOptions / modeFallbackOptions, which own the panel itself. + */ + noResultsAsError?: boolean /** * Lift the "Enter coordinates" row out of the fallback panel to sit under the * search field, so it is offered up front rather than only after a failure. @@ -147,6 +155,7 @@ export const PlacesSearch = forwardRef( enableFallbackOptions, optionsAsAccordions, noResultsTitle, + noResultsAsError, coordsRowBelowSearch, label = 'Search for the address', hint = ( @@ -603,6 +612,10 @@ export const PlacesSearch = forwardRef( ((landmarkAsMode && searchMode === 'landmark') || (plusCodeAsMode && searchMode === 'pluscode')) + // An empty search reported as an error rather than a grey panel title: the + // field goes red and the message sits under it, wherever the search was run. + const showNoResultsError = !!noResultsAsError && noResults + return (
@@ -653,7 +666,9 @@ export const PlacesSearch = forwardRef(
(
)} {searchMode === 'pluscode' && !plusCodeAsMode && plusCodeHelp} + {/* Directly under the field it belongs to, above "Use my current location". */} + {showNoResultsError && ( +
+ + + + No results found +
+ )} {searchMode === 'address' && (
)} {modeSearchFailed && modeFallbackOptions && ( -
+ // The error message above announces the failure; the panel heads the ways + // on, so it doesn't take a live region of its own. +

{noResultsTitle ?? 'Your search didn’t return any results'}

@@ -829,7 +855,7 @@ export const PlacesSearch = forwardRef( {(noResults || showOptions) && enableFallbackOptions && searchMode === 'address' && (