Как отобразить контент в выпадающем меню с небольшой шириной и высотой

Question

У меня есть элемент select, и я хочу отобразить 1m, 2m, 3m, если он еще не открыт, при его открытии будет отображаться другой контент

при открытии меню

Основная проблема, с которой я сталкиваюсь, состоит в том, что 2 символа не помещаются в круговое меню, отображаемое с использованием свойства text-indent.

handleDateField = e => {
        let date = e.target.value;
        this.setState({
            date
        })
}   

handleCircullarSelect = (e) => {
        if(e.target.options.length > 0) {
            this.setState({
                open: !this.state.open
            })
        }

}

<select 
 onChange={this.handleDateField}
 onClick={this.handleCircullarSelect}                              
 class={`form-control circle ${!this.state.open ? "short-date" : ""}`}
>
    <option disabled value="0">Choose a date</option>
    <option value="1">{this.state.open ? "Last Month" : "1m"}</option>
    <option value="2">{this.state.open ? "Last 2 Months" : "2m"}</option>
    <option value="3">{this.state.open ? "Last 3 Months" : "3m"}</option>
</select>

Answer 1

Просто добавьте форматированное значение для выбора:

<select 
  value={`${this.state.date}m`}
  onChange={this.handleDateField}
  class={`form-control circle ${!this.state.open ? "short-date" : ""}`} 
/>

Вы также можете добавить значение по умолчанию для выбора, которое используется, когда ничего не было выбрано:

<select defaultValue={`${this.state.date}m`}