focusing an input with x-trap and x-transition

[delta1186]

In order for me to get the .focus() to work in my ref input I had to wait for the transition to complete. Thus the setTimeout 300ms. :)

Here is slideover.blade.php

@props(['id', 'maxWidth'])

@php
$id = $id ?? md5($attributes->wire('model'));
$maxWidth = [
    'sm' => 'sm:max-w-sm',
    'md' => 'sm:max-w-md',
    'lg' => 'sm:max-w-lg',
    'xl' => 'sm:max-w-xl',
    '2xl' => 'sm:max-w-2xl',
][$maxWidth ?? '2xl'];
@endphp
<!-- This example requires Tailwind UI purchase -->
<div
    x-cloak
    x-data="{
        show: @entangle($attributes->wire('model')),
    }"
    x-init="$watch('show', value => {
        if (value) {
            if(! $refs.start) return;

            setTimeout(function(){
                $refs.start.focus();
            },300);
        }
    })"
    x-on:close.stop="show = false"
    x-on:keydown.escape.window="show = false"
    x-show="show"
    x-trap="show"
    id="{{ $id }}"
    class="fixed inset-0 overflow-hidden z-10"
    aria-labelledby="slide-over-title"
    role="dialog"
    aria-modal="true"
>
    <div class="absolute inset-0 overflow-hidden">
        <div
            x-show="show"
            x-on:click="show = false"
            x-transition:enter="ease-in-out duration-300"
            x-transition:enter-start="opacity-0"
            x-transition:enter-end="opacity-100"
            x-transition:leave="ease-in-out duration-200"
            x-transition:leave-start="opacity-100"
            x-transition:leave-end="opacity-0"
            class="absolute inset-0 bg-gray-500 bg-opacity-25 transition-opacity"
            aria-hidden="true"
        >
        </div>

        <div class="fixed inset-y-0 right-0 pl-10 max-w-full flex">
            <div
                x-show="show"
                x-transition:enter="transform transition ease-in-out duration-300"
                x-transition:enter-start="translate-x-full"
                x-transition:enter-end="translate-x-0"
                x-transition:leave="transform transition ease-in-out duration-200"
                x-transition:leave-start="translate-x-0"
                x-transition:leave-end="translate-x-full"
                class="w-screen {{ $maxWidth }}"
            >
                <div class="h-full flex flex-col py-6 bg-white shadow-xl overflow-y-scroll">
                    <div class="px-4 sm:px-6">
                        <div class="flex items-start justify-between">
                            <h2 class="text-lg font-medium text-gray-900" id="slide-over-title">
                            {{ $title }}
                            </h2>
                            <div class="ml-3 h-7 flex items-center">
                                <button
                                    x-on:click="show = false"
                                    type="button"
                                    class="bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                                >
                                <span class="sr-only">Close panel</span>
                                    <x-icon-o-x class="h-6 w-6"/>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="mt-6 relative flex-1 px-4 sm:px-6">
                    {{ $slot }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

And in your slot section you have an input with x-ref=start.

<input type="text" x-ref="start></input>

[philwolstenholme]

I've used a setTimeout before to wait for a transition to complete and it's always felt a bit dirty - what if someone changes the transition duration but forgets to update the setTimeout?

Vue allows functions to run when a transition is complete: https://vuejs.org/v2/guide/transitions.html#JavaScript-Hooks but Alpine doesn't have this functionality.

There's also the JavaScript transitionend event that could work? I had a go at listening for transitionend events with this Codepen: https://codepen.io/philw_/pen/PojdweM but ran into a weird issue which I described here: #2111

[Tim-Wils]

@philwolstenholme
Try this in your example: @transitionend.throttle="console.log('transitionend');transitionRun++" or @transitionend.debounce="console.log('transitionend');transitionRun++"

[philwolstenholme]

Thanks Tim, my example already used @transitionend.debounce="transitionRun++" to avoid the counter going up multiple times for each CSS property that is transitioned (e.g. transform/scale and opacity).

I've just tried with throttle and the same thing happens, I got into a situation where the output was 'The transition has run 6 times. The button has been clicked 7 times' (out by one) or 'The transition has run 4 times. The button has been clicked 6 times' (out by two).