JSFiddle - React, Tailwind, and code Playground

HTML

<select id = "demo2">
            <option disabled="true" selected="true" value = "---select---">---select---</option>
            <option value = "1">Oranges</option>
            <option value = "2">Apples</option>
            <option value = "3">Pears</option>
            <option value = "4">Kiwis</option>
            <option value = "5">Bananas</option>
            <option value = "6">Banansasas</option>       
            <option value = "7">Grapes</option>
            <option value = "7">Grapes</option>
            <option value = "7">Grapes</option>
            <option value = "7">Grapes</option>
            <option value = "7">Grapes</option>
            <option value = "7">Grapes</option>
            <option value = "7">Grapes</option>
       </select>

JavaScript

$('#demo2").on('focus',function() {
    var optCount = $(this).children('options').length;
    $(this).attr('size', optCount);
});