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

dispatchBrowserEvent()

method, I have also used the

emit()

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?

Custom Event interfering with Filament Notification. Help needed!

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

dispatchBrowserEvent()

method, I have also used the

emit()

emit()

Custom Event interfering with Filament Notification. Help needed!

Custom Event interfering with Filament Notification. Help needed!

Similar Threads

Similar Threads

Similar Threads