Angular/PrimeNg: Focus on input each time I open a p-dialog
up vote
2
down vote
favorite
I'd like to auto focus a certain input field which is in a p-dialog component,
which is opened/closed by a flag that is bind to the dialog's visible attribute.
When I add an "autofocus" attribute to the input tag - it is focused only in the first time the dialog is opened.
When I use the "onShow" event - it is emitted BEFORE the dialog is open.
When I add an "autofocus" directive and try to set the focus in AfterViewInit - it is called only once.
Anyone knows how I can set the focus or get a "onAfterShow" event for the dialog?
angular angular6 primeng
edited Nov 8 at 10:12
Jasper de Vries
8,51953472
asked Nov 8 at 10:06
Tal Sheffer
405
add a comment |
up vote
2
down vote
favorite
I'd like to auto focus a certain input field which is in a p-dialog component,
which is opened/closed by a flag that is bind to the dialog's visible attribute.
When I add an "autofocus" attribute to the input tag - it is focused only in the first time the dialog is opened.
When I use the "onShow" event - it is emitted BEFORE the dialog is open.
When I add an "autofocus" directive and try to set the focus in AfterViewInit - it is called only once.
Anyone knows how I can set the focus or get a "onAfterShow" event for the dialog?
angular angular6 primeng
edited Nov 8 at 10:12
Jasper de Vries
8,51953472
asked Nov 8 at 10:06
Tal Sheffer
405
expecting some code to solve your issue - event when dialog triggered and the input you want focus when dialog is shown
– Rahul Swamynathan
Nov 8 at 10:09
add a comment |
up vote
2
down vote
favorite
up vote
2
down vote
favorite
I'd like to auto focus a certain input field which is in a p-dialog component,
which is opened/closed by a flag that is bind to the dialog's visible attribute.
When I add an "autofocus" attribute to the input tag - it is focused only in the first time the dialog is opened.
When I use the "onShow" event - it is emitted BEFORE the dialog is open.
When I add an "autofocus" directive and try to set the focus in AfterViewInit - it is called only once.
Anyone knows how I can set the focus or get a "onAfterShow" event for the dialog?
angular angular6 primeng
edited Nov 8 at 10:12
Jasper de Vries
8,51953472
asked Nov 8 at 10:06
Tal Sheffer
405
I'd like to auto focus a certain input field which is in a p-dialog component,
which is opened/closed by a flag that is bind to the dialog's visible attribute.
When I add an "autofocus" attribute to the input tag - it is focused only in the first time the dialog is opened.
When I use the "onShow" event - it is emitted BEFORE the dialog is open.
When I add an "autofocus" directive and try to set the focus in AfterViewInit - it is called only once.
Anyone knows how I can set the focus or get a "onAfterShow" event for the dialog?
angular angular6 primeng
angular angular6 primeng
edited Nov 8 at 10:12
Jasper de Vries
8,51953472
asked Nov 8 at 10:06
Tal Sheffer
405
edited Nov 8 at 10:12
Jasper de Vries
8,51953472
asked Nov 8 at 10:06
Tal Sheffer
405
edited Nov 8 at 10:12
Jasper de Vries
8,51953472
edited Nov 8 at 10:12
Jasper de Vries
8,51953472
edited Nov 8 at 10:12
Jasper de Vries
8,51953472
8,51953472
asked Nov 8 at 10:06
Tal Sheffer
405
asked Nov 8 at 10:06
Tal Sheffer
405
asked Nov 8 at 10:06
Tal Sheffer
405
405
expecting some code to solve your issue - event when dialog triggered and the input you want focus when dialog is shown
– Rahul Swamynathan
Nov 8 at 10:09
add a comment |
expecting some code to solve your issue - event when dialog triggered and the input you want focus when dialog is shown
– Rahul Swamynathan
Nov 8 at 10:09
expecting some code to solve your issue - event when dialog triggered and the input you want focus when dialog is shown
– Rahul Swamynathan
Nov 8 at 10:09
expecting some code to solve your issue - event when dialog triggered and the input you want focus when dialog is shown
– Rahul Swamynathan
Nov 8 at 10:09
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
I use a setTimeout to set the focus of element after specific time base on the form appearance as example 500 millisecond
template
<p-dialog [header]="dialogTitle" [(visible)]="isDialogVisible" [responsive]="true"
[appendTo]="'body'" (onShow)="setFocus(txtElement)">
<input #txtElement >
</p-dialog>
component
setFocus(elm: HTMLInputElement) {
setTimeout(() => {
elm.focus()
}, 500);
}
answered Nov 8 at 10:19
malbarmawi
4,45031131
I did something similar, but: (1) it is not a "clean" solution (2) sometimes my app is heavy and the timeout may not be enough. Isn't there a more elegant solution to this problem? I assume it is a main-stream use case...
– Tal Sheffer
Nov 8 at 10:21
the do have a proprty for button focusOnShow so I guess we need to ask for another proprty like focusOnShowElement so the best case is to open an issue on github repo
– malbarmawi
Nov 8 at 10:34
check this stackoverflow.com/questions/15247849/… onShow dons't work like showing I think
– malbarmawi
Nov 8 at 10:37
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
I use a setTimeout to set the focus of element after specific time base on the form appearance as example 500 millisecond
template
<p-dialog [header]="dialogTitle" [(visible)]="isDialogVisible" [responsive]="true"
[appendTo]="'body'" (onShow)="setFocus(txtElement)">
<input #txtElement >
</p-dialog>
component
setFocus(elm: HTMLInputElement) {
setTimeout(() => {
elm.focus()
}, 500);
}
answered Nov 8 at 10:19
malbarmawi
4,45031131
I did something similar, but: (1) it is not a "clean" solution (2) sometimes my app is heavy and the timeout may not be enough. Isn't there a more elegant solution to this problem? I assume it is a main-stream use case...
– Tal Sheffer
Nov 8 at 10:21
the do have a proprty for button focusOnShow so I guess we need to ask for another proprty like focusOnShowElement so the best case is to open an issue on github repo
– malbarmawi
Nov 8 at 10:34
check this stackoverflow.com/questions/15247849/… onShow dons't work like showing I think
– malbarmawi
Nov 8 at 10:37
add a comment |
up vote
0
down vote
I use a setTimeout to set the focus of element after specific time base on the form appearance as example 500 millisecond
template
<p-dialog [header]="dialogTitle" [(visible)]="isDialogVisible" [responsive]="true"
[appendTo]="'body'" (onShow)="setFocus(txtElement)">
<input #txtElement >
</p-dialog>
component
setFocus(elm: HTMLInputElement) {
setTimeout(() => {
elm.focus()
}, 500);
}
answered Nov 8 at 10:19
malbarmawi
4,45031131
I did something similar, but: (1) it is not a "clean" solution (2) sometimes my app is heavy and the timeout may not be enough. Isn't there a more elegant solution to this problem? I assume it is a main-stream use case...
– Tal Sheffer
Nov 8 at 10:21
the do have a proprty for button focusOnShow so I guess we need to ask for another proprty like focusOnShowElement so the best case is to open an issue on github repo
– malbarmawi
Nov 8 at 10:34
check this stackoverflow.com/questions/15247849/… onShow dons't work like showing I think
– malbarmawi
Nov 8 at 10:37
add a comment |
up vote
0
down vote
up vote
0
down vote
I use a setTimeout to set the focus of element after specific time base on the form appearance as example 500 millisecond
template
<p-dialog [header]="dialogTitle" [(visible)]="isDialogVisible" [responsive]="true"
[appendTo]="'body'" (onShow)="setFocus(txtElement)">
<input #txtElement >
</p-dialog>
component
setFocus(elm: HTMLInputElement) {
setTimeout(() => {
elm.focus()
}, 500);
}
answered Nov 8 at 10:19
malbarmawi
4,45031131
I use a setTimeout to set the focus of element after specific time base on the form appearance as example 500 millisecond
template
<p-dialog [header]="dialogTitle" [(visible)]="isDialogVisible" [responsive]="true"
[appendTo]="'body'" (onShow)="setFocus(txtElement)">
<input #txtElement >
</p-dialog>
component
setFocus(elm: HTMLInputElement) {
setTimeout(() => {
elm.focus()
}, 500);
}
answered Nov 8 at 10:19
malbarmawi
4,45031131
answered Nov 8 at 10:19
malbarmawi
4,45031131
answered Nov 8 at 10:19
malbarmawi
4,45031131
answered Nov 8 at 10:19
malbarmawi
4,45031131
4,45031131
I did something similar, but: (1) it is not a "clean" solution (2) sometimes my app is heavy and the timeout may not be enough. Isn't there a more elegant solution to this problem? I assume it is a main-stream use case...
– Tal Sheffer
Nov 8 at 10:21
the do have a proprty for button focusOnShow so I guess we need to ask for another proprty like focusOnShowElement so the best case is to open an issue on github repo
– malbarmawi
Nov 8 at 10:34
check this stackoverflow.com/questions/15247849/… onShow dons't work like showing I think
– malbarmawi
Nov 8 at 10:37
add a comment |
I did something similar, but: (1) it is not a "clean" solution (2) sometimes my app is heavy and the timeout may not be enough. Isn't there a more elegant solution to this problem? I assume it is a main-stream use case...
– Tal Sheffer
Nov 8 at 10:21
the do have a proprty for button focusOnShow so I guess we need to ask for another proprty like focusOnShowElement so the best case is to open an issue on github repo
– malbarmawi
Nov 8 at 10:34
check this stackoverflow.com/questions/15247849/… onShow dons't work like showing I think
– malbarmawi
Nov 8 at 10:37
I did something similar, but: (1) it is not a "clean" solution (2) sometimes my app is heavy and the timeout may not be enough. Isn't there a more elegant solution to this problem? I assume it is a main-stream use case...
– Tal Sheffer
Nov 8 at 10:21
I did something similar, but: (1) it is not a "clean" solution (2) sometimes my app is heavy and the timeout may not be enough. Isn't there a more elegant solution to this problem? I assume it is a main-stream use case...
– Tal Sheffer
Nov 8 at 10:21
the do have a proprty for button focusOnShow so I guess we need to ask for another proprty like focusOnShowElement so the best case is to open an issue on github repo
– malbarmawi
Nov 8 at 10:34
the do have a proprty for button focusOnShow so I guess we need to ask for another proprty like focusOnShowElement so the best case is to open an issue on github repo
– malbarmawi
Nov 8 at 10:34
check this stackoverflow.com/questions/15247849/… onShow dons't work like showing I think
– malbarmawi
Nov 8 at 10:37
check this stackoverflow.com/questions/15247849/… onShow dons't work like showing I think
– malbarmawi
Nov 8 at 10:37
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53205456%2fangular-primeng-focus-on-input-each-time-i-open-a-p-dialog%23new-answer', 'question_page');
}
);
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
expecting some code to solve your issue - event when dialog triggered and the input you want focus when dialog is shown
– Rahul Swamynathan
Nov 8 at 10:09