Interact with input state and events using Alpine
I'm trying to create a custom Radio input that would allow to render another text input next to option "other" (See attachment)
AFAIU, it's impossible to put the text input as label for radio option. I'm looking for UI where focusing the text input would set the radio field to "other" option. I don't want to do it PHP because of the roundtrip time.
Is it possible:
- to listen to Alpine events on the inputs?
- set state using Alpine?
- React to state changes using Alpine?
A combination of these three should allow me to:
- Set the radio input value when text input is focused
- Focus the text input when radio value is selected to "other"
3 Replies
i think you can use
x-ref and x-on to achieve this
when radio button is selected, calls $refs.input.focus()
when input is focus, calls $refs.radio.checked = trueThanks for the pointer. I managed to get the communication between them. However, this
only set's it in frontend but Livewire isn't aware of it so when submitted, the previously set value will be sent to server.
I'm trying to work with
@entangle but having some issues.
I've removed the name prop from radio input name="{{ $id }}" and used wire:model instead
This acts the same as previously, I can change the radio values and they are sent correctly to the server.
But now I fail to figure out how to update the value of radio input on the focus.
Given that my statepath in this example is data.radio I hardcoded that
but I'm getting
Nevermind my previous message. https://filamentphp.com/docs/3.x/forms/fields/custom#how-fields-work helped me correctly entangling the data.
PoC is ready, now I just need to figure out the small things