Filament•3mo ago

Button Edit Action disappear after first click

Button Edit from my ViewResource header always disapear after first click (see video attached). On the client side I have this error on the console from Morph.js

TypeError: e.setAttribute is not a function

TypeError: e.setAttribute is not a function

. I can't figure out what's happened. It happens on other part of my UI. Also its only in production where I use FrankenPHP. The livewire/update request retuns a 200 with the button present in the Livewire response. Morph dom seem to fail to morph the dom accordingly ? Any ideas of this issue ?

20 Replies

tazOP•3mo ago

After a few debuggin using debugger To is assigned to a Text Node in Morph.js so I cant call setAttribute on it ? But whi it is set to a Text Node ?

awcodes•3mo ago

Please share the code for your action and your view resource?

tazOP•3mo ago

<?php

namespace App\Filament\Resources\ChatterResource\Pages;

use App\Filament\Resources\ChatterResource;
use App\Models\Chatter;
use Filament\Actions;
use Filament\Actions\StaticAction;
use Filament\Notifications\Notification;
use Filament\Resources\Pages\ViewRecord;
use Illuminate\Contracts\Support\Htmlable;


class ViewChatter extends ViewRecord
{
    protected static string $resource = ChatterResource::class;

    public function getTitle(): string | Htmlable
    {
        /** @var Post */
        $record = $this->getRecord();

        return $record->name;
    }

    protected function getHeaderActions(): array
    {
        return [
            Actions\EditAction::make()
                ->icon('heroicon-o-pencil-square')
                ->slideOver(),
            Actions\DeleteAction::make()
                ->icon('heroicon-o-trash')
                ->color('danger')

        ];
    }
}

<?php

namespace App\Filament\Resources\ChatterResource\Pages;

use App\Filament\Resources\ChatterResource;
use App\Models\Chatter;
use Filament\Actions;
use Filament\Actions\StaticAction;
use Filament\Notifications\Notification;
use Filament\Resources\Pages\ViewRecord;
use Illuminate\Contracts\Support\Htmlable;


class ViewChatter extends ViewRecord
{
    protected static string $resource = ChatterResource::class;

    public function getTitle(): string | Htmlable
    {
        /** @var Post */
        $record = $this->getRecord();

        return $record->name;
    }

    protected function getHeaderActions(): array
    {
        return [
            Actions\EditAction::make()
                ->icon('heroicon-o-pencil-square')
                ->slideOver(),
            Actions\DeleteAction::make()
                ->icon('heroicon-o-trash')
                ->color('danger')

        ];
    }
}

"To" node in Morph dom is assigned to this text '\n\n' ? Is this an escaping issue ?

awcodes•3mo ago

Hmm, that looks ok to me. What is in your edit form?

tazOP•3mo ago

public static function getForm(): array
    {
        return [
            Section::make(__('Personal information'))
                ->columns([
                    'default' => 1,
                    'lg' => 2,
                ])
                ->schema([
                    TextInput::make('name')
                        ->label(__('Name'))
                        ->required()
                        ->unique(table: Chatter::class, ignoreRecord: true, modifyRuleUsing: function (Unique $rule) {
                            return $rule->where('user_id', Auth::user()->id);
                        })
                        ->minLength(4)
                        ->maxLength(30)
                        ->autofocus(),
                    TextInput::make('email')
                        ->label('Email')
                        ->required()
                        ->prefixIcon('heroicon-s-envelope')
                        ->minLength(4)
                        ->helperText(__('The address will be used to send an onboarding email to the chatter.'))
                        ->maxLength(320)
                        ->email(),
                ]),

public static function getForm(): array
    {
        return [
            Section::make(__('Personal information'))
                ->columns([
                    'default' => 1,
                    'lg' => 2,
                ])
                ->schema([
                    TextInput::make('name')
                        ->label(__('Name'))
                        ->required()
                        ->unique(table: Chatter::class, ignoreRecord: true, modifyRuleUsing: function (Unique $rule) {
                            return $rule->where('user_id', Auth::user()->id);
                        })
                        ->minLength(4)
                        ->maxLength(30)
                        ->autofocus(),
                    TextInput::make('email')
                        ->label('Email')
                        ->required()
                        ->prefixIcon('heroicon-s-envelope')
                        ->minLength(4)
                        ->helperText(__('The address will be used to send an onboarding email to the chatter.'))
                        ->maxLength(320)
                        ->email(),
                ]),

 Section::make(__('Credentials'))
                ->description(__('Set a username and a password. The chatter will need these credentials to access its dashboard and start chatting.'))
                ->columns([
                    'default' => 1,
                    'lg' => 2,
                ])
                ->schema([
                    TextInput::make("username")
                        ->label(__('Username'))
                        ->required()
                        ->minLength(4)
                        ->maxLength(30)
                        ->unique(table: Chatter::class, ignoreRecord: true),
                    TextInput::make('clear_password')
                        ->label(__('Password'))
                        ->afterStateHydrated(function ($state, callable $set, Chatter $chatter) {
                            if (empty($state)) {
                                $set('clear_password', $chatter->clear_password);
                            }
                        })
                        ->password()
                        ->revealable()
                        ->required()
                        ->rules([Rules\Password::default(), fn(Chatter $chatter): Closure => function( string  $attribute, $value, Closure $fail) use ($chatter) {
                                $user = auth('web')->user();
                                if (!$chatter->exists && $user->numberOfChattersLimitHit()) {
                                    $fail(trans('validation.custom.chatters.max_chatters'));
                                    return;
                                }
                            },
                        ])
                        ->minLength(8)
                        ->maxLength(30),
                ])
        ];

 Section::make(__('Credentials'))
                ->description(__('Set a username and a password. The chatter will need these credentials to access its dashboard and start chatting.'))
                ->columns([
                    'default' => 1,
                    'lg' => 2,
                ])
                ->schema([
                    TextInput::make("username")
                        ->label(__('Username'))
                        ->required()
                        ->minLength(4)
                        ->maxLength(30)
                        ->unique(table: Chatter::class, ignoreRecord: true),
                    TextInput::make('clear_password')
                        ->label(__('Password'))
                        ->afterStateHydrated(function ($state, callable $set, Chatter $chatter) {
                            if (empty($state)) {
                                $set('clear_password', $chatter->clear_password);
                            }
                        })
                        ->password()
                        ->revealable()
                        ->required()
                        ->rules([Rules\Password::default(), fn(Chatter $chatter): Closure => function( string  $attribute, $value, Closure $fail) use ($chatter) {
                                $user = auth('web')->user();
                                if (!$chatter->exists && $user->numberOfChattersLimitHit()) {
                                    $fail(trans('validation.custom.chatters.max_chatters'));
                                    return;
                                }
                            },
                        ])
                        ->minLength(8)
                        ->maxLength(30),
                ])
        ];

awcodes•3mo ago

Do you have an EditChatter class or is it a simple resource?

tazOP•3mo ago

It's a simple resource

tazOP•3mo ago

I have also this error here on the frontend where a button click dont do nothing

awcodes•3mo ago

On my phone so can’t see the video.

tazOP•3mo ago

after first click and the error come from alpineJS Uncaught TypeError: Cannot read properties of undefined (reading 'dispatchEvent')

awcodes•3mo ago

Do you have a repo you can share?

tazOP•3mo ago

These bug only appear in prod where I have two Laravel container for zero downtime updates. Livewiere is stateless right ?

awcodes•3mo ago

The code you shared looks ok to me.

tazOP•3mo ago

Also another hint when I restart the servers its fine for a few days, then the error appears

awcodes•3mo ago

Sounds like a possible cache conflict. Hard to say though. If it’s only happening in prod then it’s something with the server.

tazOP•3mo ago

OK I might investigate this. THanks you for your time. I just noticed right now that all my containers restarted in the same time a few hours ago and the bug happended right after. Same last time. Your guess seems right. On update containers starts one after each other (Docker Swarm rolling update). But on VPS reboot they all start together. This is my startup script

#!/usr/bin/env bash
set -e
initialStuff() {
    php artisan migrate --force; \
    php artisan storage:link; \
    php artisan optimize:clear; \
    php artisan event:cache; \
    php artisan config:cache; \
    php artisan route:cache; \
    php artisan filament:cache-components; \
    php artisan icons:cache; \
    php artisan app:generate-sitemap https://chatters.tech;
}
echo "Octane Server: $octane_server"
initialStuff
exec /usr/bin/supervisord -c /etc/supervisor/conf.d/supervisord.frankenphp.conf

#!/usr/bin/env bash
set -e
initialStuff() {
    php artisan migrate --force; \
    php artisan storage:link; \
    php artisan optimize:clear; \
    php artisan event:cache; \
    php artisan config:cache; \
    php artisan route:cache; \
    php artisan filament:cache-components; \
    php artisan icons:cache; \
    php artisan app:generate-sitemap https://chatters.tech;
}
echo "Octane Server: $octane_server"
initialStuff
exec /usr/bin/supervisord -c /etc/supervisor/conf.d/supervisord.frankenphp.conf

Are there potential issues if the two laravel app run this simultaneously ?

awcodes•3mo ago

Sorry, I’ve never worked with octane so I wouldn’t be able to offer any real advice. But even in memory if its different servers I wouldn’t expect a collision. Maybe something’s getting replicated before the initial stuff finishes. Can you show me the browser console errors?

tazOP•3mo ago

From Laravel doc : When a command is marked as Isolatable, Laravel will automatically add an --isolated option to the command. When the command is invoked with that option, Laravel will ensure that no other instances of that command are already running. Laravel accomplishes this by attempting to acquire an atomic lock using your application's default cache driver. If other instances of the command are running, the command will not execute; however, the command will still exit with a successful exit status code: i will try to add --isolated to some of the commands if they are isolatable. I restarted the two laravel app (one by one) and not at same time and it works fine now. The issue araised when they are start at same time. Thanks you for your time you pointed me toward the good direction !

awcodes•3mo ago

Odd, yea. Sorry, I just don’t have enough experience with octane. Please share the solution if you figure it out though.

tazOP•3mo ago

I will try to investigate more to find the precise reason but yes it's very odd ! For the moment I will just try to never launch the two Laravel app at the same time as a workaround. (docker start order) .

Gaming

Programming

Button Edit Action disappear after first click

Did you find this page helpful?