The "-" specified in the <option> tag becomes a separator line

Hi.

I’m looking for a new plugin to implement an optional feature in my current published plugin.

I am currently publishing a plugin to implement an optional feature,
I am trying to add a drop down list,
In the native HTML, when I write the following,The “-” part becomes a separator line.

スクリーンショット 2023-07-23 014342

Is this a specification?
Can this be prevented?

<select>
       <option value=1>1</option>
       <option value="-" label="-">-</option>
       <option value=2>2</option>
       <option value=3 selected={true}>3</option>
       <option value=4>4</option>
       <option value=5>5</option>
</select>

What if you try an actual hyphen () or one of the dashes ( or ) instead of a minus (-)?

1 Like

@Karmalakas

Hello.
Thank you for always helping me.

After confirming,

“-” (utf8 code: 2D) → separator
“–” (utf8 code: E2 80 93) → no problem
“—” (utf8 code: E2 80 94) → no problem

I used “-” (utf8 code: 2D) that can be easily input from the keyboard as much as possible,
so I decided to use “–” (utf8 code: E2 80 93), which looks similar just to display
the process separately as shown below.

The distinction between ‘-’, ‘–’, and ‘—’ was taken into account and helpful.
Thank you very much for the hint.

if (data === '-') {
   //Branching so that the label is "–" only when - is used.
   return `<option value="${data}">–</option>`;  // -> – utf8 code: E2 80 93
} else {
   return `<option value="${data}">${data}</option>`;
}
1 Like