Custom dropdown indicator?

[BB-BenBridges]

React-Select has a method to change the dropdown indicator. However I am unsure how to integrate this with react-google-places-autocomplete. Can you help?

Code from: https://react-select.com/components - Custom Dropdown Indicator Example

import React from 'react';
import EmojiIcon from '@atlaskit/icon/glyph/emoji';
import Select, { components, DropdownIndicatorProps } from 'react-select';
import { ColourOption, colourOptions } from '../data';

const DropdownIndicator = (
  props: DropdownIndicatorProps<ColourOption, true>
) => {
  return (
    <components.DropdownIndicator {...props}>
      <EmojiIcon label="Emoji" primaryColor={colourOptions[2].color} />
    </components.DropdownIndicator>
  );
};

export default () => (
  <Select
    closeMenuOnSelect={false}
    components={{ DropdownIndicator }}
    defaultValue={[colourOptions[4], colourOptions[5]]}
    isMulti
    options={colourOptions}
  />
);

[Tintef]

You want to use the selectProps prop of this component.

Something like this (haven't tried it myself).

import React from 'react';
import RGPA from 'react-google-places-autocomplete';
import EmojiIcon from '@atlaskit/icon/glyph/emoji';
import { components, DropdownIndicatorProps } from 'react-select';

const DropdownIndicator = (
  props: DropdownIndicatorProps<ColourOption, true>
) => {
  return (
    <components.DropdownIndicator {...props}>
      <EmojiIcon label="Emoji" primaryColor={colourOptions[2].color} />
    </components.DropdownIndicator>
  );
};

export default () => (
  <RGPA
    // ...other props
    selectProps={{
      components: { DropdownIndicator },
    }}
  />
);

[BB-BenBridges]

Thanks! In the end, the following worked for me.

import React from 'react';
import GooglePlacesAutocomplete from "react-google-places-autocomplete";
import { components, DropdownIndicatorProps } from 'react-select';
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';

const DropdownIndicator = (props: DropdownIndicatorProps ) => {
  return (
    <components.DropdownIndicator {...props}>
      <ArrowDropDownIcon sx={{ color: "#737373" }}/>
    </components.DropdownIndicator>
  );
};

export default () => (
  <RGPA
    // ...other props
    selectProps={{
      components: { DropdownIndicator },
    }}
  />
);