My dropdown, using the standard select element, is located at the bottom of the form and the issue is that I start typing into the other inputs (street, apartment, etc). When I go to change the state from the dropdown, the other inputs are cleared and I can't see to tell why.
<div class="street-address">
<input :value="customer.street_address" ref="streetAddress" autocomplete="address-line1" class="default-input">
<div v-if="this.showSecondAddressLine === false"
v-on:click="toggleSecondAddressLine()"
class="plus">
+
</div>
</input>
<span class="input-small">Street Address</span>
</div>
<div v-if="this.showSecondAddressLine === true" class="street-address-line-2">
<input :value="customer.apartment" ref="apartment" class="default-input" autocomplete="address-line2">
<div v-if="this.showSecondAddressLine === true"
v-on:click="toggleSecondAddressLine()"
class="plus">
x
</div>
</input>
<span class="input-small">Street Address Line 2</span>
</div>
<div class="city">
<input :value="customer.city" ref="city" autocomplete="address-level2" class="default-input"></input>
<span class="input-small">City</span>
</div>
<div>
<select name="state" autocomplete="address-level1" v-model="optionDropdown">
<option v-for="x in optionsReturned" :value="x.value">
{{ x.text }}
</option>
</select>
</div>
