Autofocus flux:editor in modal

[LuciusAB]

Hey guys!

Did anyone manage to get focus / autofocus working on the Flux Editor?
I feel like I have tried so many different solutions, but I can't get it working.

Im also mounting the editor with data and that works fine, but I want it to put the focus in the beginning of the editor, not after the mounted data - since im using the flux editor for replying to messages etc.

Here is my current setup (without any of the code I tried to get focus working):

<flux:editor
           wire:model="replyContent"
           :label="__('Your Reply')"
           toolbar="heading | bold italic strike | bullet ordered blockquote | link | align"
           class="**:data-[slot=content]:min-h-[200px]"
/>

[jeffchown]

@LuciusAB Have you tried a little Alpine magic?

This works for me:

<?php

use Flux\Flux;
use Livewire\Volt\Component;

new class extends Component
{
    public string $content = 'Testing...';
};
?>

<div x-init="$nextTick(() => { $refs.my-editor.editor.commands.focus('start') })">
    <flux:input label="Test Input" />

    <flux:editor x-ref="my-editor" wire:model="content" label="Test Editor" />
</div>

[LuciusAB]

Thanks for looking at it so quick and trying it out yourself!

I tested this code:

        <div x-init="$nextTick(() => { $refs.myEditor.editor.commands.focus('start') })">

        <flux:editor
            wire:model="replyContent"
            :label="__('Your Reply')"
            toolbar="heading | bold italic strike | bullet ordered blockquote | link | align"
            class="**:data-[slot=content]:min-h-[200px]"
            x-ref="myEditor"
        />
        </div>

But that doesn't work either. Im starting to think it might be because we are doing this in a flux:modal, I read in some other threads about autofocus etc etc in modals. Perhaps it's not possible to get the focus on the editor working in a modal? (Look here #1438 )

I tried setting both autofocus="false" and "true" and not using autofocus in the flux:modal at all, but doesn't make any difference either.

[jeffchown]

You're welcome, @LuciusAB . An important piece of information to leave out 🙃 - that this is running in a modal.
Yes, there are challenges regarding autofocus in modals.

I just put this together and it seems to do the trick:

<?php

use Flux\Flux;
use Livewire\Volt\Component;

new class extends Component
{
    public string $content = 'Testing...';
    public bool $showModal = false;
};
?>

<div>
    <flux:modal.trigger name="edit-profile">
        <flux:button>Edit profile</flux:button>
    </flux:modal.trigger>

    <flux:modal
        x-data="{ open: $wire.entangle('showModal') }"
        x-init="$watch('open', value => open && document.getElementById('my-editor').editor.commands.focus('start'))"
        wire:model="showModal"
        name="edit-profile"
        class="md:w-96"
    >
        <div>
            <div>
                <flux:heading size="lg">Update profile</flux:heading>
                <flux:text class="mt-2">Make changes to your personal details.</flux:text>
            </div>

            <flux:input label="Name" placeholder="Your name" />

            <flux:input label="Date of birth" type="date" />

            <flux:editor id="my-editor" wire:model="content" label="Test Editor" />

            <div class="flex">
                <flux:spacer />

                <flux:button type="submit" variant="primary">Save changes</flux:button>
            </div>
        </div>
    </flux:modal>
</div>

[jeffchown]

PS I would change the title of this issue to Autofocus flux:editor in modal so people with the same question/issue can find it.

[jeffchown]

@LuciusAB Another method would be to use Alpine's x-intersect (https://alpinejs.dev/plugins/intersect) to trigger a piece of code when the modal becomes visible (a nod to @ju5t for the great idea! see: #760 (comment)) - I think I prefer this method for it's cleaner/simpler code:

<?php

use Flux\Flux;
use Livewire\Volt\Component;

new class extends Component
{
    public string $content = 'Testing...';
};
?>

<div>
    <flux:modal.trigger name="edit-profile">
        <flux:button>Edit profile</flux:button>
    </flux:modal.trigger>

    <flux:modal name="edit-profile" class="md:w-96">
        <div x-intersect="document.getElementById('my-editor').editor.commands.focus('start')">
            <div>
                <flux:heading size="lg">Update profile</flux:heading>
                <flux:text class="mt-2">Make changes to your personal details.</flux:text>
            </div>

            <flux:input label="Name" placeholder="Your name" />

            <flux:input label="Date of birth" type="date" />

            <flux:editor id="my-editor" wire:model="content" label="Test Editor" />

            <div class="flex">
                <flux:spacer />

                <flux:button type="submit" variant="primary">Save changes</flux:button>
            </div>
        </div>
    </flux:modal>
</div>

Side note: It's possibilities like this that make me really appreciate Alpine! (and Livewire and Flux!) - Thanks @calebporzio, @joshhanley! :

[LuciusAB]

Wow, that solved it.. felt so good to see it focus after spending so much time trying different stuff to get it working.

Thanks a lot for your awesome help, super appreciate it!

[jeffchown]

Great! You're very welcome, @LuciusAB

PS Method 3 - if you want to stick with a pure AlpineJS solution, you can replace the flux:modal block in Method 2 with:

<flux:modal name="edit-profile" class="md:w-96">
    <div x-intersect="$refs.myEditor.editor.commands.focus('start')">
        <div>
            <flux:heading size="lg">Update profile</flux:heading>
            <flux:text class="mt-2">Make changes to your personal details.</flux:text>
        </div>

        <flux:input label="Name" placeholder="Your name" />

        <flux:input label="Date of birth" type="date" />

        <flux:editor x-ref="myEditor" wire:model="content" label="Test Editor" />

        <div class="flex">
            <flux:spacer />

            <flux:button type="submit" variant="primary">Save changes</flux:button>
        </div>
    </div>
</flux:modal>

[jeffchown]

and if you want the cursor at the end, just change it to .focus('end')

See: https://tiptap.dev/docs/editor/api/commands/selection/focus#use-the-focus-command