Select Option 'selected disabled' Not Defaulting

[jjjrmy]

If you have a select input with a default option using value="" selected disabled and x-model with a null value, it will not default to that first option. Without the x-data it works fine.

https://codepen.io/jjjrmy/pen/gOwvRBg?editors=1000

On the example the Year input has the desired results. Only the ones using Alpine are not behaving correctly.

"alpinejs": "^2.8.0",

[ryangjchandler]

Have you tried setting the default value to an empty string instead of null?

[jjjrmy]

Have you tried setting the default value to an empty string instead of null?
@ryangjchandler

Yes, check the example, empty string and null have same results.
It works fine if you don't use the disabled prop.

[SimoTod]

You can use `:disabled="true"` instead of `disabled`. x-model while try to set the select to the matching value when Alpine kicks in but, being disabled, it will select the next available option. Whit the suggested change, alpine will add the disabled attribute after

…

On Thu, 31 Dec 2020, 00:28 Jeremy Holstein, ***@***.***> wrote: Have you tried setting the default value to an empty string instead of null? @ryangjchandler <https://github.com/ryangjchandler> Yes, check the example, empty string and null have same results. It works fine if you don't use the disabled prop. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#970 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACAJRWP3PHUNDYEW43M6ULDSXPATXANCNFSM4VOZP4UQ> .

[colinaut]

Ran into a situation where :disabled="true" doesn't help. I am working on a form which has fieldset sections that are hidden using x-show. When the x-show is shown any select fields inside that have x-model are set to the the first non-disabled option.

I made a codepen to show this https://codepen.io/colinaut/pen/wvJENbx

[colinaut]

Found a solution! Instead of :disabled="true", set up so that your x-data variable defaults to null and then use to :disabled ="variable" on the initial option. I updated the codepen showing this solution!

[mrjcgoodwin]

I'm still experiencing issues with this if have a select field where you need to combine a default 'please choose' option with dynamically loaded options in a as below. Even if the x-model is pre-populated with one of the option values, it won't bind and will still default to the 'please choose' option.

<select id="cardSize" class="form-select form-select-sm" x-model="card.cardSize" required> <option selected :disabled="card.cardSize">Please choose</option> <template x-for="(option,index) in cardDesignData[card.id].availableSizes"> <option :value="option.id" x-text="option.description"></option> </template> </select>

[SimoTod]

You need to bind the selected attribute on your option for the first rendering. X-model is evaluated before x-for. At that time, none of the other options exists so it will always select the empty one.

[mrjcgoodwin]

You need to bind the selected attribute on your option for the first rendering. X-model is evaluated before x-for. At that time, none of the other options exists so it will always select the empty one.

Do you mean create a property purely to track whether a selection has been made and bind to that....or? Sorry think I'm being dumb and missing a painfully obvious trick here!

[SimoTod]

Something like

<select id="cardSize" class="form-select form-select-sm" x-model="card.cardSize" required>
  <option disabled>Please choose</option>
  <template x-for="(option,index) in cardDesignData[card.id].availableSizes"> 
    <option :value="option.id" x-text="option.description" :selected="option.id == card.cardSize"></option>
  </template>
</select>

[mrjcgoodwin]

@SimoTod Thanks - that seemed to work and makes sense. Only difference is I had to add bindings back to the default option otherwise the 'please choose' option wouldn't be set and it would default to the first dynamic option instead.

Seems to work as follows <option value="0" disabled="true" :selected="true">Please choose</option>.

Thanks for your help :-)