Why react-select is breaking when I am using @react-google-maps/api?

Question

I am facing a weird issue at the moment, I am trying to use react-select in my create-react-app project which is showing up the accessibility text, which are supposed to be hidden.

and when I click to open the dropdown, I see,

These are the things I have followed

• yarn add react-select@latest
• import Select from 'react-select' added to my import list
• <Select options={options} /> in my shared component list

And when I created a new project using create-react-app test-react-select and followd the following steps, works in this.

Can I have a few suggestions about what could be the things making the issue? Code:

import React, { useState, useRef, forwardRef } from 'react';
import classnames from 'classnames';
import { string, number, shape, oneOfType, arrayOf, func, bool, oneOf } from 'prop-types';
import Select from 'react-select';

const Dropdown = forwardRef(({ label, deafultdropdownValue, deafultdropdownLabel, filterDropDown, dropdownList, textLabel, onClick, postion, name, darkBorder, className, errorMsg }, ref) => {

  return (
    <div className={classnames('dropdown', className, postion)}>
      {textLabel ? <div className="text-label utility-heading-4">{textLabel}</div> : ''}
      <Select options={dropdownList} />
      {errorMsg && <span className="error">
        {errorMsg}
      </span>}
    </div>
  );
});

Dropdown.propTypes = {
  label: string,
  deafultdropdownLabel: string,
  filterDropDown: bool,
  dropdownList: oneOfType([arrayOf(
    shape({
      label: string,
      value: oneOfType([string, number])
    })
  ), arrayOf(string)]),
  textLabel: string,
  onClick: func,
  postion: oneOf(['upward', 'downward']),
  name: string,
  className: string,
  darkBorder: bool,
  errorMsg: string,
  deafultdropdownValue: string
};

Dropdown.defaultProps = {
  filterDropDown: false
};

export default Dropdown;

There few old codes not used as I had my own dropdown which I am trying to replace with react-select

This class not adding styles. This is where the issue I see.

EDIT1. Finally figured the issue, not the solution tho. The issue is when I am using "react-select": "^3.0.8", with "@react-google-maps/api": "1.7.10", . Any idea how do I fix it? https://codesandbox.io/s/usegooglemap-repro-x3q37

Answer 1

In Select tag you must be use value attribute which store the values for dropdown list data.

<Select options={options} value={DisplayData}/>

DisplayData is a variable which store the dropdown-list data which is going to select.

Answer 2

If anyone facing the same kind of issue using <LoadScript/> rather useLoadScript or if you remove preventGoogleFontsLoading: true from useLoadScript config works great.

For more details follow this thread. https://spectrum.chat/react-google-maps/general/react-google-maps-api-braking-react-select~86032a91-5a4b-4dbb-99fa-b1e1f7000e98