Input: add support for HTML autofocus attribute

[itsmenewbie03]

No description provided.

[robsontenorio]

@itsmenewbie03 I see two related PR for this autofocus.

Could you give a try with this ? So we can avoid dispatching events.

https://alpinejs.dev/plugins/intersect#x-intersect

This way the change can be done exclusively on Input component to make it autofocus when is visible on view port , including modals and drawer.

[itsmenewbie03]

@robsontenorio I ended up with two PRs as the solution for having autofocus on modals is a bit complex

I'll take a look on that plugin and update my PR 💜

[itsmenewbie03]

@robsontenorio
The current Modal implementation seems to not work with the intersect plugin.

{{-- Input.php --}}
@if( $attributes->whereStartsWith('autofocus')->first() )
    x-ref="myInput"
    @php
        $focus_mode = array_keys($attributes->whereStartsWith('autofocus')->getAttributes())[0] 
    @endphp
    @if($focus_mode == 'autofocus')
        x-intersect.full="$refs.myInput.focus();console.log('autofocus triggered!')"
    @elseif ($focus_mode == 'autofocus.visible')
        x-intersect.threshold.100="$refs.myInput.focus();console.log('autofocus.visible triggered!')"
    @elseif ($focus_mode == 'autofocus.empty')
        {{-- NOTE: use intersect here to focus if empty --}} 
    @endif
    x-intersect:leave="$refs.myInput.blur();console.log('blurring due to :leave')"
@endif

{{-- index.blade.php --}}
<x-modal wire:model="myModal3" persistent>
    <x-input label="Name" placeholder="Your name" icon="o-user" hint="Your full name" autofocus.visible />
    <x-slot:actions>
        <x-button label="Cancel" @click="$wire.myModal3 = false" />
    </x-slot:actions>
</x-modal>

I'm expecting to see the log message once the modal is visible. However, it executes immediately on page load.

[robsontenorio]

Thanks, let's go ahead with basic autofocus. The modal thing is very tricky.