wire:navigate on an Action

Sounds simple, but an action can redirect to a URL like so:

Action::make(__('Open file'))
                    ->url(fn (File $file): string => route('file', ['file' => $this->file])),

Action::make(__('Open file'))
                    ->url(fn (File $file): string => route('file', ['file' => $this->file])),

And it works great. But can I put wire:navigate on that URL?

6 Replies

awcodes•14mo ago

->extraAttributes([‘wire:navigate’ => ‘true’]) Maybe

Gabriel SiebenOP•14mo ago

@awcodes I tried it, and it had interesting and unexpected behavior. Here, it actually worked fine:

Action::make('wishlists')
                ->label('View wishlists')
                ->url(fn (): string => route('wishlists'))
                ->extraAttributes(['wire:navigate' => 'true']),

Action::make('wishlists')
                ->label('View wishlists')
                ->url(fn (): string => route('wishlists'))
                ->extraAttributes(['wire:navigate' => 'true']),

But on something like this, it immediately went to a 404:

            TextColumn::make('name')->sortable()->searchable(isIndividual: true)->limit(50)->url(fn (Course $course) => route('shop.show', $course))->weight(FontWeight::Bold)->extraAttributes(['wire:navigate' => 'true']),

            TextColumn::make('name')->sortable()->searchable(isIndividual: true)->limit(50)->url(fn (Course $course) => route('shop.show', $course))->weight(FontWeight::Bold)->extraAttributes(['wire:navigate' => 'true']),

I have noticed similar 404 behavior if you put "wire:navigate" accidentally on anything that isn't an <a> tag. For example, I've accidentally put it on a <div> containing an <a> tag and it happens. So it's likely a misplaced wire:navigate.

awcodes•14mo ago

it could be that extraAttributes on a Column are getting applied to the wrong element, as you say. would have to look at the HTML to see where it's getting placed.

d3v1anX•10mo ago

Good morning guys - I have the same problem: Added a table to an livewire component, want to

TextColumn::make('currentPrice.price')->label('Price')->searchable()->sortable()
->url(fn($record) => route('prices.index', ['product' => $record->id]))->extraAttributes(['wire:navigate' => 'true'])

TextColumn::make('currentPrice.price')->label('Price')->searchable()->sortable()
->url(fn($record) => route('prices.index', ['product' => $record->id]))->extraAttributes(['wire:navigate' => 'true'])

but the extraAttribute will placed to the div like so:

<a href="https://erp.test/prices/9" class="flex w-full disabled:pointer-events-none justify-start text-start">
            <div class="fi-ta-text grid w-full gap-y-1 px-3 py-4" wire:navigate="true">

<a href="https://erp.test/prices/9" class="flex w-full disabled:pointer-events-none justify-start text-start">
            <div class="fi-ta-text grid w-full gap-y-1 px-3 py-4" wire:navigate="true">

are there any possibilities to add the wire:navigate directly to the a tag?

Leonardy•9mo ago

I'm having the same problem! @d3v1anX Did you make any progress?

Aleksey•3mo ago

for tables I had to do it via js TextColumn::make('organization.full_name') ->label('Organization Name') ->formatStateUsing(function (Document $record) { $url = route('organizations.show', ['organization' => $record->organization->slug]); return "<a href="$url" class="dynamic-link text-blue-500 hover:underline">{$record->organization->full_name}</a>"; }) ->html(); document.addEventListener('livewire:navigated', () => { document.querySelectorAll('a.dynamic-link').forEach((link) => { link.setAttribute('wire:navigate', ''); }); });

Gaming

Programming

wire:navigate on an Action