scrollable modal opens at the end of the page

[DonCamillo11]

Flux version

v1.1.6

Livewire version

v3.6.1

Tailwind version

v3.4.13

Browser and Operating System

Safari on macOS

What is the problem?

If a modal contains so much text that it needs to be scrolled and there is a link or button at the bottom, the focus jumps to it and the page is displayed from the bottom.

Code snippets

<?php

namespace App\Livewire\Test;

use Livewire\Component;

class Test7 extends Component
{
    public function render()
    {
        return <<<'HTML'
        <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 space-y-6">
            <div>
                <flux:heading size="lg">Update profile</flux:heading>
                <flux:subheading>Make changes to your personal details.</flux:subheading>
            </div>

            <p>Optat adis eum ad quam non nossequi offictatur? Qui odionse quamus reheni as dolento corersp elecest maximus net milisim quatiumquis es volorestia seque qui aut lab iduntib eaquidu ciligen daepro dit fugias doloremolent lacearci bla quam, cum vellabo ribusa vel et volupta ad quodiorit aceperum fugia simoluptur aut plam que vel eatur, ut volor simagnatur? Quideni ssitionsed quodis rerferuptas ella doluptate perest, ut volorpo rescimus doluptat acea iliquam, sentibu sdaniatiist, con prae repedi quamus nullorias quas essimus consed moluptae es aut perum doluptatur, id mostoreces idelibus dent mo optate ressimus, omnimag nimoles sunt, sini conseque consequae. Nis porrum, ulliqui ipsum consequo volorest hil imusandamus am quis sequiat iaecaborendi consequos non coneceribus quis quia exerferio ea cum ent, voluptaquis et ipsam quam hillit, sum sunt volorpos autem ium earchil eturit qui dolorro mincidignim faccum fugia nus illignis essitat empossequam dolupiendi conesciis deribus ea que num inullam quam conseque volum quam laborep tatempo raeculpa esed quiatust endicie ndanducima aut landae ra voluptios dolupta tiuntem. Simet latur arit, tem ati odit utescia spitatur? Aquunda consequia dolenih icimpor eiciam, comni commolo maximusam voles quam ea dis int adigendi aturiataqui ilignat inveruptas volorem rerum quis ea quuntot atempedit et aut autaquat.
            Hilit, omnite cupiendi ulpa quod quiandi taquame ntiandam, num et veliqui quam quibus accuptur adi omnis aris antinimin nihilit optur aborendipsam dolorio vendusa dipicabor aditi optur, ut aribusae sitati oditatat reptiatium quas por as molut omnihit, tet ipicienem ut aut aut fuga. Item nonsendias dunto essum utatio. Ugiatem olupis adit erspers pidunt quatem etus voloriam ut molestem et as ma quam et acillore, sunt.
            Us. Me re venis aut quam quae cum di dolupti aspidebis dolupiciatas aut aut perro tecto officiduciam rem sunt et omniendellit quiaspe riatur, accatetur?
            Arum et rem utata dolorum doluptaquam rem se qui odi consed ut quam re cores esent oditi ipsant volo venimpos et eum eneceperum di officia dolore etum reictur alignient ra simporrum faccum alitaqui officate volo temo enihil experio. Culluptas dem hillab int ad et occatis sequunt qui rest, quam rest, ium nia vitatemporum quaspicium asiminu llitis eos rem exerror ruptatia experit la pa si aut unt, si nonsequam elia nihic temolum ut quat.
            At enet qui omniend ipitaes nonsequ idesti incto exceperum volorum enisinum quia conet accum repti dus el incitate officilitat.
            Les eosam il ipsanientem il ipsaperi omnimi, si dus dis dellam, serit, occuptation porior aut as seque poreped quatur maiost, consequo et que doloremque pre, nossendia susda cus suntio. Idunt volo exeriatum volestrum voluptatium volupta tiorro blam est quiae vero dolor aut lab id est, quam, te poriore pelictio. Namus, comnimo te verum qui int alia nos velloriandam que nist doluptatur a nulpa quisci beris velia voluptatem id et oditincid qui utes ra verio. Ga. Nempos aut dolest faccae ea quamet rerissimusam res restrum ese et aut que dolore pro ipisque sintem. Udipici demquos ad quia dendem volorrum fugiaepudi cullabor sae minus, occusan imendae cepero ium liatqui dolore venim facessitius volut fugiaspit, quis aut am quam, qui volectem fuga. Animusciis et, tecum eumquib usandaest offic tem aceaquaest, solo conse ditium veri duntusaped molupiducidi dolorestrum dolupta epudicitae nonesci atetur aspel experrum, officipsam quas pe mo iligendantet que ventem iurest iuri adi aut molut re cum fuga. Fic totatium et es maximustent.
            Ame et repratum que earchit, cum voluptatam, ese aut rem dolor atem exeriatiusae rem doluptae solut estrum alique nonem volupic illecab istotatatur? Qui berescia pre coria vidio voluptaqui quae dolluptas alis rerum doluptatem que dolest ut que nobist quiaepe dignatibus debis molupta temquidunt qui dolupta sit doluptatias perume volo tem. Culpari te perro omnit es mos explant que nossum reptat quiam imaio doloreiume lacestet qui net que ped quis debit ma vendae rera quaeper natquis verum im is earciet eariam volorest, sim re odis et ipiendant as doluptium fuga. Edicae. Uritia prorectet, tem fugia que vollab ipiendi commodit harumqu undant rerfercim reris ut verrovid ut harcipsa cusdant doluptatem fuga. Ita pres sum hil imped eveliquis dus voluptur?
            Andis dolupture officta temporitati omnimpos andanda ntendio nserumquo officilique doloruntem ium voluptaquia siment experferatem nonsed et, suntis alicte consed quid ma sum ex etus solorescia dolut optaera quunditius, volum harumqu asitio eum qui omnimil lendae prorit re, voluptatis doluptae sae essincient as modipitiis rerum quam fugiatibus, simus quam, offictemque cus, sumquod ignimporum doluptas repudicto berumquas quaspic tem eos qui con cusa quis quae pora cuptios ime dolore volora numque consendio. Ut rem harumet excerrum est anditibus si id que pa vollend untiorro exceptate volorep eribus <a href="#" class="u">molore</a> voluptat officia sperum as andae. Ugitas esciam, ommoloraes etus sit autes veligende int eatus.
            Borporum qui dus, con rest laboriae nessit exceperempor alita doluptatiat.</p>

        </flux:modal>
        </div>
        HTML;
    }
}

How do you expect it to work?

The modal should open from the top.

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.

[jeffchown]

@DonCamillo11 I think this is similar to #854

Have a look at this as a workaround: #854 (comment)

[DonCamillo11]

@jeffchown Oh thanks, I didn't see that.

[DonCamillo11]

@jeffchown tried the workaround with a hidden input field, but doesn’t seem to work in my case. I played around and found out that an empty link at the beginning works so far <a href="#"></a>

[jeffchown]

@DonCamillo11 Great! Exactly what I was going to suggest.

I changed your heading div to:

<div class="relative">
    <flux:heading size="lg">Update profile</flux:heading>
    <flux:subheading>Make changes to your personal details.</flux:subheading>

    <a href="#" class="absolute top-0"></a>
</div>

[joshhanley]

@DonCamillo11 thanks for reporting and the help @jeffchown! I'm going to close this as it's a duplicate of #854. If you could add a comment to that issue and mention your work around, that'd be great, thanks!