Link in Flux Editor Doesn't Work Properly Using Keyboard

[kresnasatya]

Flux version

2.9.2

Livewire version

3.7.1

Tailwind version

4.1.14

Browser and Operating System

Safari on macOS

What is the problem?

The insert link in Flux Editor doesn't properly in Flux Tab. For example, I have Ticket view page and it has 3 tabs: -

• Details for ticket detail along with send message to customer using Flux Editor,
• Chat for chat with team members using Flux Editor,
• History for showing ticket history

The insert link doesn't work properly in two Flux Editors (Details and Chat) tabs. But, if I remove the Flux Tabs, it works properly like this video.

Code snippets to replicate the problem

<div>
    <flux:tab.group>
        <flux:tabs variant="segmented">
            <flux:tab name="detail">{{ __('ticketing::ticket-view.tabs.details') }}</flux:tab>
            <flux:tab name="chat">{{ __('ticketing::ticket-view.tabs.chat') }}</flux:tab>
            <flux:tab name="history">{{ __('ticketing::ticket-view.tabs.history') }}</flux:tab>
        </flux:tabs>

        <flux:tab.panel name="detail">
            <livewire:ticketing::ticket-details :ticket="$ticket" />
        </flux:tab.panel>
        <flux:tab.panel name="chat">
            <livewire:ticketing::ticket-chat :ticket="$ticket" />
        </flux:tab.panel>
        <flux:tab.panel name="history">
            <livewire:ticketing::ticket-history :ticket="$ticket" />
        </flux:tab.panel>
    </flux:tab.group>
</div>

Remove the tabs make it works.

<div>
    <livewire:ticketing::ticket-details :ticket="$ticket" />
    <livewire:ticketing::ticket-chat :ticket="$ticket" />
</div>

Screenshots/ screen recordings of the problem

Sorry, I can upload the 480p because of GitHub limitation upload file just 10MB.

480p-Screen.Recording.2025-12-16.at.09.34.52.mov

How do you expect it to work?

The insert link in Flux Editor should be work in Flux Tabs.

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.

[ganyicz]

Hi @kresnasatya,

I wasn't able to replicate the issue.

Screen.Recording.2025-12-16.at.12.51.47.mov

This might have something to do with how your Livewire components are setup however that wasn't included in your examples.

Here's the code I used:

<div class="pt-24 mx-auto max-w-sm">
    <flux:tab.group>
        <flux:tabs wire:model="tab">
            <flux:tab name="profile">Profile</flux:tab>
            <flux:tab name="account">Account</flux:tab>
            <flux:tab name="billing">Billing</flux:tab>
        </flux:tabs>

        <flux:tab.panel name="profile">...</flux:tab.panel>
        <flux:tab.panel name="account">
            <flux:editor />
        </flux:tab.panel>
        <flux:tab.panel name="billing">...</flux:tab.panel>
    </flux:tab.group>
</div>

Would you be able to also provide a minimal code sample like this that reproduces the problem? (without any component references, model references etc., just the minimal code required to replicate the issue that I can copy and paste into a fresh Laravel app with Livewire installed)

Thanks!

[kresnasatya]

Hi @ganyicz, I'm sorry for late response. I double check again. It works well if we use shortcut keyboard command. But, it doesn't work well if we don't use shortcut keyboard command. Here's the video.

Screen.Recording.2025-12-18.at.10.15.52.mov

Here's the code snippet.

Livewire component class: Editor.php

<?php

namespace App\Livewire;

use Livewire\Attributes\Layout;
use Livewire\Component;

#[Layout('layouts.app')]
class Editor extends Component
{
    public string $tab = 'detail';

    public function render()
    {
        return view('livewire.editor');
    }
}

Livewire component view: editor.blade.php

<div>
    <flux:tab.group>
        <flux:tabs wire:model="tab" variant="segmented">
            <flux:tab name="detail">Details</flux:tab>
            <flux:tab name="history">History</flux:tab>
            <flux:tab name="chat">Chat</flux:tab>
        </flux:tab>

        <flux:tab.panel name="detail">
            <flux:editor />
        </flux:tab.panel>
        <flux:tab.panel name="history">
            <p>History goes here!</p>
        </flux:tab.panel>
        <flux:tab.panel name="chat">
            <flux:editor />
        </flux:tab.panel>
    </flux:tab.group>
</div>

[ganyicz]

Hi @kresnasatya,

thanks for clarifying!

This was a tricky one, the issue comes from how Safari handles focus which is quite unintuitive.

Anyway, I've submitted a PR with a fix.