SarahS's avatar
Level 12

First option not working on Select with Livewire

I have a form which I am using Livewire with. It contains a lot of very simple Select dropdowns with mostly Yes or No answers e.g.

<select name="photoIDCheck" id="photoIDCheck" class="form-control" wire:model='photoIDCheck'>
            <option value="Yes">Yes</option
            <option value="No">No</option>
 </select>

However, if I leave the default at Yes then it does not get passed to the component code, it returns null. If I choose No, then the correct value is passed back. How can I get Yes to work? Thanks.

0 likes
10 replies
Snapey's avatar

You have a public property photoIDCheck ?

Are you performing any actions when it changes?

Are you initialising the public property to "Yes" or "No" ?

SarahS's avatar
Level 12

@Snapey Yes it is a public property. Nothing happens when it changes, I just need the value for when the form is submitted. No, the public property is not initialised - is that what the problem is? I need to put in a default value in the Livewire component?

bicicura's avatar

I don´t see any errors in the snippet you posted besides that the ending of the option element needs a > to be closed properly. Are you sure that is not the issue? If not, you could post your livewire component properties for us to see. The public property should look like this.

public $photoIDCheck = '';

Yet, you should have an option with the value="" and have it disabled for the user not be able to select it, then you could validate that the $photoIDCheck is a required input to be sure that the user is choosing an option. Moreover, if you want to have it filled with a default value when the component is rendered:

public $photoIDCheck = 'No';
or
public $photoIDCheck = 'Yes';

Hope it helps in any way, bye!

Snapey's avatar
Snapey
Best Answer
Level 122

The component will only be updated if the select is changed. If you don't set a default then of course it is null.

critic's avatar

This is a bug and they must resolve this.

Just like the first element of html + php is sent with it, it should also work in livewire

critic's avatar

i use wire:model. I understood that it takes the value from php, but actually it's stupid. if you have a form to add a new record then the first value of select will be included. just like a normal php and html select element

bug! YES

Snapey's avatar

So, initialse the variable to the value of the select element. Then, both front and back will be in sync.

If you want to ensure the user makes a choice then give them a prompt option with a null value, then validate that a choice has been made before allowing form submission.

Its not hard or complicated.

You are just expecting that if the select is showing a value then that must mean the user has made a choice, when what is actually happening is that you have initialised the select with null, but the list does not have an option with null, so it just displays the first option.

critic's avatar

I wish it could be like regular html + php when i dont change value then it is first does alpine x-init does some magic ?

Snapey's avatar

I understand that, but backend comes first, and the frontend gets whatever the backend has.

Please or to participate in this conversation.