Skip to content

Fix Autocomplete dropdown not showing with Google Places API (#1844) #1962

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 1 commit into
base: dev
Choose a base branch
from

Conversation

hooiv
Copy link

@hooiv hooiv commented Jul 27, 2025

Problem

Fixes #1844 - Autocomplete component was not displaying dropdown suggestions when used with Google Places API or similar external services. Users typing partial matches like "mainstreet 7" would not see relevant suggestions like "7 Mainstreet, Hopkins, MN, USA" because there was no exact match between the typed value and source array values.

Root Cause

  1. Default matching behavior: suggestionMatch defaulted to 'start', requiring exact matches from the beginning of strings
  2. Suggestion visibility logic: showAllSuggestions was set to false when there was a query, hiding potential matches
  3. Case sensitivity: Matching was case-sensitive, reducing match probability

Solution

Changes Made

  • Enhanced handleQueryChange method: Now shows suggestions while typing when showSuggestionsWhenValueIsSet is explicitly set to true
  • Improved matches method: Added case-insensitive search for suggestionMatch="anywhere" and suggestionMatch="word"
  • Maintained backward compatibility: All existing functionality preserved - changes only activate when users opt-in with specific props

Code Changes

// Before (line 134):
showAllSuggestions: query ? false : this.props.showSuggestionsWhenValueIsSet

// After:
showAllSuggestions: this.props.showSuggestionsWhenValueIsSet && (!!query || this.props.showSuggestionsWhenValueIsSet)

// Enhanced case-insensitive matching:
return value.toLowerCase().includes(query.toLowerCase());

…x#1844)

- Fix Autocomplete component to show dropdown suggestions with external APIs
- Show suggestions while typing when showSuggestionsWhenValueIsSet=true
- Add case-insensitive matching for suggestionMatch="anywhere"
- Maintain full backward compatibility with existing implementations
- Resolve issue where no dropdown appeared with partial text matches

This change allows developers to use Autocomplete with Google Places API
by setting suggestionMatch="anywhere" and showSuggestionsWhenValueIsSet={true}.
Default behavior remains unchanged for existing applications.

Fixes react-toolbox#1844
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Autocomplete with Google Places API Web Service - not showing dropdown list
1 participant