EasyUI Forum

General Category => EasyUI for Angular => Topic started by: Swany on July 06, 2018, 01:23:16 PM

Title: Get Focus to move from button to text field on opened dialog
Post by: Swany on July 06, 2018, 01:23:16 PM

How do I get the textbox on an open dialog to take focus. I have a eui-linkbutton in which I open a modal eui-dialog which has an eui-textbox on it. The focus stays on the button in which I opened the dialog with. I cannot programmatic seem to get the focus to move to dialog's textbox.

Any help would greatly be appreciated.

Title: Re: Get Focus to move from button to text field on opened dialog
Post by: jarry on July 06, 2018, 07:17:39 PM

After opening the dialog, the 'open' event fires. You can call 'focus' method to focus on the textbox component.

Code:

@Component({
	selector: 'app-root',
	template: `
		<eui-linkbutton (click)="dlg.open()">Open</eui-linkbutton>
		<eui-dialog #dlg [title]="'dialog'" [closed]="true" (open)="onOpen()" [bodyStyle]="{padding:'20px'}">
			<eui-textbox #tb></eui-textbox>
		</eui-dialog>
	`
})
export class AppComponent {
	@ViewChild('tb') tb: TextBoxComponent;
	onOpen(){
		setTimeout(() => this.tb.focus())
	}
}

Title: Re: Get Focus to move from button to text field on opened dialog
Post by: Swany on July 09, 2018, 11:41:19 AM

Works great!

Thanks Jarry