Native select in safari truncates long text when opened. How to fix it?

Question

JavaScript

Maybe someone faced such a problem? How to undo the fact that long text is cut off? I know that somehow it is possible, but for the second day I can not get to the bottom.

Answer 1

<form action="/">
    <input type="search" name="search">
</form>

Answer 2

Can it be like this

<form id="search">
    <input type="search" name="search">
    <button type="submit">OK</button>
</form>

window.onload = function() {
  document.getElementById('search').addEventListener('submit', function(e) {
     e.preventDefault();
     
     let s = this.search.value;
     location.href = "?search=" + s;
  });
};

Answer 3

For form, specify method="GET"for clarity. Or don't specify anything, since GET is the default.

<form method="GET" action="/">
    <input type="search" name="search">
</form>

Answer 4

<select>
    <optgroup >
        <option value=""></option>
        <option value="strawberries">Strawberries</option>
    </optgroup>
</select>

The answer was unexpected and simple. You just need to wrap all options in an optgroup . And then the view changes to: