JSFiddle - React, Tailwind, and code Playground

HTML

<p>Until the day when the datalist tag is accepted by all browsers/devices...<br>This toggling field structure will enable a user to select from a list of options or enter a custom value within a form. (aka Combobox)<br>To access the input field, select "[type a custom value]" from the droplist.<br>To revert to the droplist, remove focus from the empty input field.<br><br>1. The element not being displayed is also disabled, so that there will always be exactly one field-value pair submitted.<br>2. For user ease, the elements may be toggled indefinitely.</p>
<form name="BrowserSurvey" action="#">
Browser: <select name="browser" onchange="if(this.options[this.selectedIndex].value=='customOption'){toggleField(this,this.nextSibling); this.selectedIndex='0';}">
	<option></option>
	<option value="customOption">[type a custom value]</option>
	<option>Chrome</option>
	<option>Firefox</option>
	<option>Internet Explorer</option>
	<option>Opera</option>
	<option>Safari</option></select><input name="browser" style="display:none;" disabled="disabled" onblur="if(this.value==''){toggleField(this,this.previousSibling);}">
<input type="submit" value="Submit">
</form>
<br>
* onkeyup was considered as event listener for toggling back to the select. Unfortunately, if the user presses enter to select "[type a custom value]", then onkeyup is engaged and the field skips showing the input.
<br><br>
** be sure there are no blank spaces between the toggling elements, this will monkey wrench the intended Sibling references.

JavaScript

function toggleField(hideObj,showObj){
 hideObj.disabled=true;		
 hideObj.style.display='none';
 showObj.disabled=false;	
 showObj.style.display='inline';
 showObj.focus();
}