Issues with Chrome and Safari but not Firefox

I have this code that works as expected in Firefox. A user uses a dropdown and the results populate subsequent text inputs. For example the s-val:desc fills in the text input desc that follows. In Chrome and Safari it does not work. Changing the dropdown does not populate and since they are required, the form fails.

<div class="col-2">
    <div id="sel" s-preserve="true">
      {% set cpt_options = craft.entries.section('cptCodes2').all() %}
      <select class="form-select">
        <option value="">
          Code
        </option>
        {% for option in cpt_options %}
          <option sprig s-val:cpt="{{ option.code }}"  s-val:desc="{{ option.description }}" s-val:price="{{ option.number_price }}" {{ option.id == cpt ? ' selected' }}>
            {{ option.title~' : '~option.description }}
          </option>
        {% endfor %}
</select>
    </div>
  </div>

  <div class="col-4">
    {{ input('text', 'fields[description]', desc, {
      class: 'form-control',
      required: true
      }) }}
  </div>
  <div class="col-2">
    <div class="input-group mb-3">
      <span class="input-group-text">$</span>
      {{ input('text', 'fields[billed]', price, {
        class: 'form-control',
        required: true
        }) }}
    </div>
  </div>

[AbbeyDesign]

@mattstein unfortunately that’s not it.

[stevendierick]

As @bencroker said, s-val won’t work on option values. It’s weird that it works in Firefox, though. And as @mattstein said, you might need to add the name attribute to your <select>, as well as the sprig attribute.

Since you’re working with entries, you could refactor your code a bit and just query your cptCodes2 section by id of your cpt value, which will be the entry id, and get the needed information based off of that.

For example:

{% set cpt = cpt ?? null %}

{% set cpt_options = craft.entries.section('cptCodes2').all() %}

{% set get_option = cpt ? craft.entries.section('cptCodes2').id(cpt).one() : null %}
{% set desc = get_option.description ?? null %}
{% set price = get_option.number_price ?? null %}

<div class="col-2">
    <div id="sel" s-preserve="true">
        <select sprig name="cpt" class="form-select">
            <option value="">Code</option>
            {% for option in cpt_options %}
                <option value="{{ option.id }}"{{ option.id == cpt ? 'selected' }}>
                    {{ "#{option.title}: #{option.description}" }}
                </option>
            {% endfor %}
        </select>
    </div>
</div>

<div class="col-4">
    {{ input('text', 'fields[description]', desc, {
        class: 'form-control',
        required: true
    }) }}
</div>

<div class="col-2">
    <div class="input-group mb-3">
        <span class="input-group-text">$</span>
        {{ input('text', 'fields[billed]', price, {
            class: 'form-control',
            required: true
        }) }}
    </div>
</div>