How to style the elements in the multiselect bootstrap

Question

I'm using the Select component from react-select. But I'm seeing a weird behaviour in the first selected item.

That is, the first item has a width half of the dropdown menu. And the rest of the element works just fine.

Documentation was not of much aid for me.

The code goes like:

import React, { Component } from "react";
import Select from "react-select";
import makeAnimated from "react-select/animated";

const animatedComponents = makeAnimated();


const Countries = [
    { value: "ocean", label: "Ocean", color: "#00B8D9", isFixed: true },
    { value: "blue", label: "Blue", color: "#0052CC", isDisabled: true },
    { value: "purple", label: "Purple", color: "#5243AA" },
    { value: "red", label: "Red", color: "#FF5630", isFixed: true },
    { value: "orange", label: "Orange", color: "#FF8B00" },
    { value: "yellow", label: "Yellow", color: "#FFC400" },
    { value: "green", label: "Green", color: "#36B37E" },
    { value: "forest", label: "Forest", color: "#00875A" },
    { value: "slate", label: "Slate", color: "#253858" },
    { value: "silver", label: "Silver", color: "#666666" },
];

function MultiSelectDropdown() {
    return (
        <div className="container">
            <div className="row">
                <div className="col-md-3"></div>
                <div className="col-md-6">
                    <Select
                        closeMenuOnSelect={false}
                        components={animatedComponents}
                        options={Countries}
                        isMulti
                    />
                </div>
                <div className="col-md-4"></div>
            </div>
        </div>
    );
}

export default MultiSelectDropdown;

Answer 1

Please downgrade the react-select version to react-select: 5.1.0, and the problem will be solved.

Here you can see the example: Click here