react-places-autocomplete icon indicating copy to clipboard operation
react-places-autocomplete copied to clipboard

Adding CSS property to active descendant

Open SudoHaugen opened this issue 3 years ago • 1 comments

Do you want to request a feature or report a bug? Feature

What is the current behavior? When highLightFirstSuggestion prop is set to true, the active descendant has a very light background which is difficult to see. Is there a way to adjust this CSS property?

Which versions of ReactPlacesAutocomplete, and which browser / OS are affected by this issue? ^7.3.0

SudoHaugen avatar May 03 '21 22:05 SudoHaugen

Here's how I'm setting the foreground and background of the suggestions:

<div>
        {loading && <div>Loading...</div>}
        {suggestions.map((suggestion) => {
               const style = suggestion.active
                  ? { backgroundColor: "#2C74B3", cursor: "pointer" }
                   : { backgroundColor: "#ffffff", cursor: "pointer" };
               return (
                   <div {...getSuggestionItemProps(suggestion, { style })}>
                          {suggestion.description}
                   </div>
                );
         })}
</div>

This sets the selection floor to a light blue and the background color to white. You can change those values as you see fit.

davidgs avatar Jan 01 '23 14:01 davidgs