JSFiddle - React, Tailwind, and code Playground

HTML

<table>
<tr>
	<td>
        <button onClick="document.getElementById('test').focus()">Expand</button>
    </td>
    <td>
        <button onClick="document.getElementById('test1').focus()">Collapse</button>
    </td>
</tr>
<tr>
    <td>
        Normal Select
    </td>
    <td>
<select id='test1' name="foo1">
<option >apple</option>
<option >mango</option>
<option >banana</option>
</select>
    </td>
</tr>
<tr>
    <td>
        Expanding Select
    </td>
    <td>
<select id="test" multiple="multiple" name="foo" onFocus="this.size = 3;" onBlur="this.size = 1;" size=1>
<option >apple</option>
<option >mango</option>
<option >banana</option>
</select>
    </td>
</tr>
</table>