Filament•4w ago

Using alpine to update a Form Field using an x-on event listener.

I feel like I'm missing something simple. If I have two form fields and want to use alpine to update another field 'on change', how can I do this? I want the interaction to be instant, without the roundtrip form the server (or at least to happen at the same time so it feels instant). Clearly I cannot x-model here as it doesn't work or I'm setting the value incorrectly.

Select::make('employee_selector')
  ->label('Select an employee')
  ->options($employees = $this->location()?->currentEmployees()->pluck('name', 'id')->toArray() ?: [])
  ->extraAttributes([
    'x-data' => '{ selectedId: null }',
    'x-model' => 'selectedId',
    'x-on:new-employee-id.window' => 'selectedId = $event.detail.newId; console.log("updated to " + $event.detail.newId);',
  ]),

Select::make('employee_selector')
  ->label('Select an employee')
  ->options($employees = $this->location()?->currentEmployees()->pluck('name', 'id')->toArray() ?: [])
  ->extraAttributes([
    'x-data' => '{ selectedId: null }',
    'x-model' => 'selectedId',
    'x-on:new-employee-id.window' => 'selectedId = $event.detail.newId; console.log("updated to " + $event.detail.newId);',
  ]),

The event is firing properly, I can see my console logs fill properly:

$dispatch('new-employee-id', { newId: state })

$dispatch('new-employee-id', { newId: state })

I think it is just where I'm trying to set the value is incorrect and where I need some pointers please. 🙂 selectedId = $event.detail.newId;

1 Reply

CGM•4w ago

Argh, I was targeting a div and not the select....

->extraAttributes([
   'x-data' => '{}',
   'x-on:new-employee-id.window' => '$el.querySelector("select").value = $event.detail.newId;', 
])

->extraAttributes([
   'x-data' => '{}',
   'x-on:new-employee-id.window' => '$el.querySelector("select").value = $event.detail.newId;', 
])

Gaming

Programming

Using alpine to update a Form Field using an x-on event listener.