Блог

Привет ,я создаю выпадающее меню в react библиотеке, которую я использую react-select .Оно показывает выпадающее меню, как и ожидалось, но проблема, с которой я сталкиваюсь, когда я выбираю опцию, высота поля ввода автоматически увеличивается .В я использую некоторые пользовательские параметры, чтобы показать каждый item icon из них в этом. Мой вопрос заключается в том, когда пользователь выбирает option я не хочу увеличивать height input box.

 import React from "react";
    import Select, { components } from "react-select";
    import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
    import { faCircle, faChevronDown } from "@fortawesome/fontawesome-free-solid";
    import "./style.css";
    const { Option } = components;
    const CustomSelectOption = (props) => (
      <Option {...props}>
        <div style={{ display: "inline-block", marginRight: "50%" }}>
          {props.data.icon}{" "}
        </div>
        <div style={{ display: "inline-block" }}> {props.data.label}</div>
      </Option>
    );
    
    const CustomSelectValue = ({ data }) => (
      <>
        <div style={{ display: "inline-block" }}>{data.icon}</div>
        <div style={{ display: "inline-block" }}>{data.label}</div>
      </>
    );
    
    const options = [
      {
        value: "online",
        label: "Online",
        icon: <FontAwesomeIcon icon={faCircle} color="#5cd068" />
      },
      {
        value: "away",
        label: "Away",
        icon: <FontAwesomeIcon icon={faCircle} color="orange" />
      },
      {
        value: "busy",
        label: "Busy",
        icon: <FontAwesomeIcon icon={faCircle} color="red" />
      },
      {
        value: "awayLong",
        label: "Extended Away",
        icon: <FontAwesomeIcon icon={faCircle} color="green" />
      }
    ];
    const style = {
      control: (base) => ({
        ...base
      })
    };
    const Dropdown = (props) => {
      return (
        <components.DropdownIndicator {...props}>
          <FontAwesomeIcon icon={faChevronDown} color="green" size="2px" />
        </components.DropdownIndicator>
      );
    };
    
    export default () => {
      return (
        <>
          <h2>Hii</h2>
          <Select
            styles={style}
            name="presence"
            // defaultValue={{
            //   value: "awayLong",
            //   label: "Extended Away",
            //   icon: <FontAwesomeIcon icon={faCircle} color="green" />
            // }}
            clearable={false}
            options={options}
            classNamePrefix="select"
            components={{
              Option: CustomSelectOption,
              SingleValue: CustomSelectValue,
              IndicatorSeparator: () => null,
              DropdownIndicator: Dropdown
            }}
          />
        </>
      );
    };
 

первоначально

при выборе опции