Pressing Enter Key causes duplicate windows

[bculley]

If I open a modal, then press the enter key on the keyboard, that modal is opened again along with the blocking container, causing it to get darker and open new windows on every press of enter.

[bculley]

So I noticed this was because the dialog has no focus and the original button in angular still has the focus underneath. The enter key is retriggering the original button. Is there a way to set focus anywhere on the modal automatically?

[kevcjones-archived]

My initial feeling is that it might be valid for me to force a blur event... but I think 'focus' is something the content implementer would be better in control of. For now, could you do your focusing inside ngAfterViewInit()?

[bculley]

@kevcjones I actually did it in ngOnInit and it works using the ViewChild. Thanks. Yeah I wasn't sure if it should be part of the repo or on the implementer either. For anyone else interested here is my basic solution to grab focus onto the modal onto one of the buttons

with my button in the modal footer
<button #btnSubmit type="button" id="btnSubmit" (click)="submitClick()">Submit</button>

and the modal component code

    // get submit button from view
    @ViewChild('btnSubmit') input: ElementRef; 

    ngOnInit(): void {
        // set focus to submit button
        this.input.nativeElement.focus();
    }

[kevcjones-archived]

Thanks for the snippet. Yeah seeing your implementation confirms it for me as provably out of scope but also inspired an idea. Make a directive called autofocus or similar and add to what ever you want. K

…

On Wed, 28 Mar 2018, 22:13 GreatIronSteed, ***@***.***> wrote: @kevcjones <https://github.com/KevCJones> I actually did it in ngOnInit and it works using the ViewChild. Thanks. Yeah I wasn't sure if it should be part of the repo or on the implementer either. For anyone else interested here is my basic solution to grab focus onto the modal onto one of the buttons with my button in the modal footer <button #btnSubmit type="button" id="btnSubmit" (click)="submitClick()">Submit</button> and the modal component code // get submit button from view @ViewChild('btnSubmit') input: ElementRef; ngOnInit(): void { // set focus to submit button this.input.nativeElement.focus(); } — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#39 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAqe8Hl13rkbA71Wm2KvP-bxIDhhAb1_ks5ti_0KgaJpZM4S9ulo> .

[kevcjones-archived]

A quick google that seemed apt - https://shekhargulati.com/2017/12/02/adding-autofocus-to-an-input-field-in-an-angular-5-bootstrap-4-application/

…

On Wed, 28 Mar 2018, 22:17 Kevin C Jones, ***@***.***> wrote: Thanks for the snippet. Yeah seeing your implementation confirms it for me as provably out of scope but also inspired an idea. Make a directive called autofocus or similar and add to what ever you want. K On Wed, 28 Mar 2018, 22:13 GreatIronSteed, ***@***.***> wrote: > @kevcjones <https://github.com/KevCJones> I actually did it in ngOnInit > and it works using the ViewChild. Thanks. Yeah I wasn't sure if it should > be part of the repo or on the implementer either. For anyone else > interested here is my basic solution to grab focus onto the modal onto one > of the buttons > > with my button in the modal footer > <button #btnSubmit type="button" id="btnSubmit" > (click)="submitClick()">Submit</button> > > and the modal component code > > // get submit button from view > @ViewChild('btnSubmit') input: ElementRef; > > ngOnInit(): void { > // set focus to submit button > this.input.nativeElement.focus(); > } > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > <#39 (comment)>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/AAqe8Hl13rkbA71Wm2KvP-bxIDhhAb1_ks5ti_0KgaJpZM4S9ulo> > . >

[kevcjones-archived]

Closing this for now - there are ways to achieve without adding the functionality to the core just yet