Filament•2y ago

Custom Event interfering with Filament Notification. Help needed!

In many of my components, I have a Notification sent and another event that refreshes the data in my custom Navigation menu. The custom navigation menu is connected to a Filament render hook in the boot method of a service provider as seen here:

Filament::registerRenderHook(
           'global-search.start',
            static fn (): View => view('filament-companies::components.dropdown.navigation-menu'),
);

Filament::registerRenderHook(
           'global-search.start',
            static fn (): View => view('filament-companies::components.dropdown.navigation-menu'),
);

Here is an example of one of my components that emits the Notification and the custom event to refresh the data in the navigation menu:

public function updateCompanyName(UpdatesCompanyNames $updater): void
{
    $this->resetErrorBag();

    $updater->update($this->user, $this->company, $this->state);

    $name = $this->state['name'];

    $this->dispatchBrowserEvent('refresh-navigation-menu');

    Notification::make()
        ->title(__('Company name updated'))
        ->success()
        ->body(__('Your company has been successfully updated'))
        ->send();
}

public function updateCompanyName(UpdatesCompanyNames $updater): void
{
    $this->resetErrorBag();

    $updater->update($this->user, $this->company, $this->state);

    $name = $this->state['name'];

    $this->dispatchBrowserEvent('refresh-navigation-menu');

    Notification::make()
        ->title(__('Company name updated'))
        ->success()
        ->body(__('Your company has been successfully updated'))
        ->send();
}

In my navigation menu blade component, I use a script to catch the event to refresh the component's data as seen here:

<script>
  window.addEventListener('refresh-navigation-menu', () => {
      @this.call('$refresh');
  });
</script>

<script>
  window.addEventListener('refresh-navigation-menu', () => {
      @this.call('$refresh');
  });
</script>

I have tried many different ways to do this, but this worked. Instead of using the dispatchBrowserEvent()method, I have also used the emit() method with a similar script used in the blade component, which also works, but the same issue with the Notification occurs either way. The issue is...is that the event somehow interferes with the Notification and causes a type of Lagging/dragging movement with the notification event box which is sort of noticeable as seen in the video. If the "refresh-navigation-menu" event is not used, the notification is obviously smooth. How could I go about fixing this?

1 Reply

Andrew Wallo•2y ago

Update: I found a way to fix the issue, although it is a little hacky. In the component that emits the event:

public function updateCompanyName(UpdatesCompanyNames $updater): void
{
    $this->resetErrorBag();

    $updater->update($this->user, $this->company, $this->state);

    $name = $this->state['name'];

    $navigationMenu = Blade::render('<x-filament-companies::dropdown.navigation-menu />');
    $this->dispatchBrowserEvent('refresh-navigation-menu', ['content' => $navigationMenu]);

    Notification::make()
        ->title(__('Company name updated'))
        ->success()
        ->body(__('Your company has been successfully updated'))
        ->send();
}

public function updateCompanyName(UpdatesCompanyNames $updater): void
{
    $this->resetErrorBag();

    $updater->update($this->user, $this->company, $this->state);

    $name = $this->state['name'];

    $navigationMenu = Blade::render('<x-filament-companies::dropdown.navigation-menu />');
    $this->dispatchBrowserEvent('refresh-navigation-menu', ['content' => $navigationMenu]);

    Notification::make()
        ->title(__('Company name updated'))
        ->success()
        ->body(__('Your company has been successfully updated'))
        ->send();
}

I added an ID to the component and updated the script to this in the navigation menu component:

<div id="navigation-menu">
   <!-- Navigation Menu Content -->


   <script>
       window.addEventListener('refresh-navigation-menu', event => {
         const newContent = event.detail.content;
         const navigationMenu = document.getElementById('navigation-menu');
         navigationMenu.innerHTML = newContent;
       });
   </script>
</div>

<div id="navigation-menu">
   <!-- Navigation Menu Content -->


   <script>
       window.addEventListener('refresh-navigation-menu', event => {
         const newContent = event.detail.content;
         const navigationMenu = document.getElementById('navigation-menu');
         navigationMenu.innerHTML = newContent;
       });
   </script>
</div>

And now there is no lag. If anyone knows of a better way, please let me know. Thanks!

Gaming

Programming

Custom Event interfering with Filament Notification. Help needed!