Error opening modal from headerActions

3️⃣v3Table builder

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')

 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' }),
                )
            })
        },

I have this action in mi UsersRelationManager:

->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(),
            ])

Error opening modal from headerActions

3️⃣v3Table builder

 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' }),
                )
            })
        },

I have this action in mi UsersRelationManager:

->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(),
            ])

Error opening modal from headerActions

Similar Threads

Error opening modal from headerActions

Similar Threads

Similar Threads

Similar Threads