Error opening modal from headerActions
Everything works perfectly but I have a small problem when I click on CreateAction of the HeaderAction. The first time I click on it I get an error and if I click on it again the modal with the information appears.
It's as if the first time the modal wasn't loaded and then it opens. What am I doing wrong?
The error in the console is the following:
VM71003:21 Uncaught TypeError: Cannot read properties of undefined (reading 'dispatchEvent')
I have this action in mi UsersRelationManager:
open: function () {
this.$nextTick(() => {
this.isOpen = true
this.$refs.modalContainer.dispatchEvent(
new CustomEvent('modal-opened', { id: 'csTBOVAQSu8qwbSpyIAm-table-action' }),
)
})
},
open: function () {
this.$nextTick(() => {
this.isOpen = true
this.$refs.modalContainer.dispatchEvent(
new CustomEvent('modal-opened', { id: 'csTBOVAQSu8qwbSpyIAm-table-action' }),
)
})
},
->actions([
ActionGroup::make([
Tables\Actions\EditAction::make(),
Tables\Actions\Action::make('tokens')
->icon('heroicon-o-key')
->label('Tokens')
->modalContent(fn(Model $record) => view('token.list', ['user' => $record])),
])
// Tables\Actions\DeleteAction::make(),
])
->actions([
ActionGroup::make([
Tables\Actions\EditAction::make(),
Tables\Actions\Action::make('tokens')
->icon('heroicon-o-key')
->label('Tokens')
->modalContent(fn(Model $record) => view('token.list', ['user' => $record])),
])
// Tables\Actions\DeleteAction::make(),
])
1 Reply
token.list is rendering a livewire component with a table:
<?php
namespace App\Livewire\Tokens;
class ListTokens extends Component implements HasForms, HasTable
{
use InteractsWithForms;
use InteractsWithTable;
public User $user;
public function mount(User $user): void
{
$this->user = $user;
}
public function table(Table $table): Table
{
return $table
->relationship(fn (): MorphMany => $this->user->tokens())
->inverseRelationship('tokens')
->columns([
TextColumn::make('name'),
TextColumn::make('tokenable.name')
->label('User'),
TextColumn::make('created_at')
->toggleable(isToggledHiddenByDefault: true),
])
->headerActions([
Tables\Actions\CreateAction::make('create_token')
->label('Crear Token')
->icon('heroicon-o-plus')
->createAnother(false)
->modal()
->mountUsing(function (Form $form) {
$form->fill(['tokenable_id' => $this->user->id]);
})
->using(function (array $data): Model {
$user = User::find($data['tokenable_id']);
$token = $user->createToken($data['name']);
Session::flash('token', $token->plainTextToken);
return $token->accessToken;
})
->form(fn (Form $form) => TokenResource::form($form))
])
}
public function render(): View
{
return view('livewire.tokens.list-tokens');
}
}
<?php
namespace App\Livewire\Tokens;
class ListTokens extends Component implements HasForms, HasTable
{
use InteractsWithForms;
use InteractsWithTable;
public User $user;
public function mount(User $user): void
{
$this->user = $user;
}
public function table(Table $table): Table
{
return $table
->relationship(fn (): MorphMany => $this->user->tokens())
->inverseRelationship('tokens')
->columns([
TextColumn::make('name'),
TextColumn::make('tokenable.name')
->label('User'),
TextColumn::make('created_at')
->toggleable(isToggledHiddenByDefault: true),
])
->headerActions([
Tables\Actions\CreateAction::make('create_token')
->label('Crear Token')
->icon('heroicon-o-plus')
->createAnother(false)
->modal()
->mountUsing(function (Form $form) {
$form->fill(['tokenable_id' => $this->user->id]);
})
->using(function (array $data): Model {
$user = User::find($data['tokenable_id']);
$token = $user->createToken($data['name']);
Session::flash('token', $token->plainTextToken);
return $token->accessToken;
})
->form(fn (Form $form) => TokenResource::form($form))
])
}
public function render(): View
{
return view('livewire.tokens.list-tokens');
}
}