JSFiddle - React, Tailwind, and code Playground

HTML

<div style="font-size: 12px; font-family: Arial">
    Double click on the different fields.<br/>
    If you get an auto-complete suggestion box, hover on one of its entries (without clicking).<br/><br/>
    The 1st text field will fill the text field with the text of the entry you're hovering on, and <strong>will keep</strong> that text when you stop hovering over it.<br/>Click on the "Check Value" button to see how JS sees the value of the text field.<br/><br/>
    The 2nd text field will fill the text field with the value of the entry you're hovering on, but <strong>will not keep</strong> the text when you stop hovering above it.
</div>
    
<hr><br/><br/>
    
    <input id="email1" label="False" name="email" placeholder="Bad Text Field" required="required" type="email" value=""  autocomplete="off"><input type="button" value="Check Value" onClick="alert('The value of the text field is: \'' +  document.getElementById('email1').value + '\'')" />
        
        <br/><br/>
        <form>
            <input id="email2" label="False" name="email" placeholder="Good Text Field" required="required" type="email" value="" /><input type="button" value="Check Value" onClick="alert('The value of the text field is: \'' +  document.getElementById('email2').value + '\'')" />
    </form>