I'm facing an issue with a select element. Initially, it should display 1m, 2m, and 3m as options before it is opened. However, once opened, it should show different content.
Here's what it looks like when the menu is opened: image
The problem I'm encountering is that the circular menu doesn't fit two characters correctly, even when using the text-indent property.
In my code, I have implemented the following event handlers:
handleDateField = e => {
let date = e.target.value;
this.setState({
date
})
}
handleCircularSelect = e => {
if (e.target.options.length > 0) {
this.setState({
open: !this.state.open
})
}
}
Here's the HTML/JSX code for the select element:
<select
onChange={this.handleDateField}
onClick={this.handleCircularSelect}
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>