Why does dropdown list value move to the top in cart?

Store Design
, , , ,
1

I am using custom line item properties on one of my products. Some are text boxes and one is a dropdown list. The problem is that when the product is added to your cart, the dropdown list value is always moved to the top of the line item properties. For example, this is the order that I have them shown on the product page:

Text box 1

Text box 2

Text box 3

Dropdown list

But when they are added to the cart, they are in this order:

Dropdown list

Text box 1

Text box 2

Text box 3

Why is this happening? Here’s the relevant code from my product page:

 {%- when 'custom_properties' -%}
        <div class="line-item-property__field product-form__input ">
          {% if block.settings.prop_label != blank %}<label class="form__label">{{ block.settings.prop_label }}</label>{% endif %}
          {% if block.settings.prop_name != blank %}
          {% if block.settings.multiline %}
          <textarea style="font-family: {{ block.settings.font }};" rows="4" cols="50" data-class="properties_{{ block.settings.prop_name | replace : " ", "_" | downcase }}" class= "line_item_text field__input required {% if block.settings.required %}blank {% endif %}sample-font-box properties_{{ block.settings.prop_name | replace : " ", "_" | downcase }}" {% if block.settings.required %}required{% endif %} type="text" name="properties[{{ block.settings.prop_name }}]" maxlength="{{ block.settings.item_length }}" {% if block.settings.placeholder_name != blank %}placeholder="{{ block.settings.placeholder_name }}"{% endif %}></textarea>    
            {% if block.settings.showcharacters %}
          <div class= "personalization_feedback"></div>
           {% endif %}
          {% else %}
          <input style="font-family: {{ block.settings.font }};" data-class="properties_{{ block.settings.prop_name | replace : " ", "_" | downcase }}" class= "line_item_text field__input required {% if block.settings.required %}blank {% endif %}sample-font-box properties_{{ block.settings.prop_name | replace : " ", "_" | downcase }}" {% if block.settings.required %}required{% endif %} type="text" name="properties[{{ block.settings.prop_name }}]" maxlength="{{ block.settings.item_length }}" {% if block.settings.placeholder_name != blank %}placeholder="{{ block.settings.placeholder_name }}"{% endif %}>    
     
          {% endif %}
          {% endif %}
        </div>

            
        {%- when 'custom_prop_dropdown' -%} 
        <div class="product-form__input product-form__input--dropdown">
            <label class="form__label">{{ block.settings.prop_drop_label }}</label>    
            <div class="select">
              <select class="select__select " name="properties[{{ block.settings.prop_drop_name }}]" form="{{ product_form_id }}">   
              <option value={{ block.settings.dropdown1 }}>{{ block.settings.dropdown1 }}</option>
              <option value={{ block.settings.dropdown2 }}>{{ block.settings.dropdown2 }}</option>
              <option value={{ block.settings.dropdown3 }}>{{ block.settings.dropdown3 }}</option>
              <option value={{ block.settings.dropdown4 }}>{{ block.settings.dropdown4 }}</option>
              </select>
             {% render 'icon-caret' %}
            </div>
        </div>
2

This may be part of the problem too, but I’m not sure. This is just a little farther down on the product page:

{%- form 'product', product, id: product_form_id, class: 'form', data-type: 'add-to-cart-form' -%}
              

              {% assign block_show = false %}
              {% for block in section.blocks %}
              {% if block.type == "custom_properties" %}
              {% assign block_show = true %}
              
              {% endif %}
              {% endfor %}