How to set focus on input in modal?

import { Component, ElementRef, HostListener, ViewChild, Output, EventEmitter } from '@angular/core';

@ViewChild('focusInput') focusInput: ElementRef;

@HostListener('focusout', ['$event']) public onListenerTriggered(event: any): void {

this.setFocusToInput();

}

setFocusToInput() {

this.focusInput.nativeElement.focus();

}

<button type="button" class="btn btn-primary relative waves-light" (click)="basicModal.show()" mdbRippleRadius>Launch demo modal</button>

<div mdbModal #basicModal="mdb-modal" class="modal fade" (onshow)="showModal()" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel"

aria-hidden="true" [config]="{backdrop: false, ignoreBackdropClick: true}">

<div class="modal-dialog"role="document">

<div class="modal-content">

<div class="modal-header">

<button type="button"class="close pull-right"aria-label="Close" (click)="basicModal.hide()">

<span aria-hidden="true">×</span>

</button>

<h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>

</div>

<div class="modal-body">

<div class="md-form">

<input #focusInput mdbActive type="text" id="form1" class="form-control">

<label for="form1" class="">Example label</label>

</div>

</div>

<div class="modal-footer">

<button type="button" class="btn btn-secondary waves-light"aria-label="Close" (click)="basicModal.hide()" mdbRippleRadius>Close</button>

<button type="button" class="btn btn-primary relative waves-light" mdbRippleRadius>Save changes</button>

</div>

</div>

</div>

dxl pro commented 7 years ago

Thanks Damian. This part (from your snippet) did the trick was: [config]="{backdrop: false, ignoreBackdropClick: true} autofocus simply worked. I didn't even need the HostListener

---

ak3727 commented 5 years ago

Yes it Works, But input tag get Focus on every event , I cant even focus any other input tag, after Opening the moda

---

Arkadiusz Idzikowski staff commented 5 years ago

Which version of MDB Angular do you use?

---