AlertifyJS icon indicating copy to clipboard operation
AlertifyJS copied to clipboard

Popup defaultFocus speed

Open seltix5 opened this issue 7 years ago • 12 comments

Hi, When oppening a popup there is a delay between the click and the defaultFocus button to be focused, in a batch work it is not possible to do a quick [click] -> [enter] action because of the delay, resulting on a 2 button press (one by click and the second by enter press on the samme button).

Is there a way to reduce this delay?

thank you!

seltix5 avatar Jul 02 '17 12:07 seltix5

Hi,

This is due to waiting for the animation to end, and then the focus is set. You can reduce this by decreasing the In/Out animation duration. For example:

.alertify.ajs-in:not(.ajs-hidden) .ajs-dialog,
.alertify.ajs-out.ajs-hidden .ajs-dialog {
     animation-duration: 150ms;
}

Thanks.

MohammadYounes avatar Jul 02 '17 19:07 MohammadYounes

hi, Thanks for the quick reply =). I try the CSS modification and it does work but the lost of the animation is a sad cost =( I'm using the "flipx" animation and for a short duration like this the animation is not there anymore... I supose there is no tweak that i can try? thanks!

seltix5 avatar Jul 03 '17 07:07 seltix5

Increase it gradually till you get a duration that best suits your use case.

MohammadYounes avatar Jul 03 '17 07:07 MohammadYounes

ok, then, to log my final result, since the default time is ".5s" and this problem is only related to the "In animation" I add this class :

.alertify.ajs-in:not(.ajs-hidden) .ajs-dialog {
    animation-duration: 0.3s;
}

this is not the perfect solution but it will work for some fast typing people. thank you!

seltix5 avatar Jul 03 '17 08:07 seltix5

Would disabling the animation work better?

MohammadYounes avatar Jul 03 '17 09:07 MohammadYounes

it would work better but not lock better. I do want the animation but i was trying to get a solution where the button get focus from the beggining and not at the end. I think the user should be able to just press ENTER without needing to wait for the end of the animation.

seltix5 avatar Jul 03 '17 10:07 seltix5

@seltix5 The waiting is required due to .focus() having no effect on hidden elements. Thus we wait for the animation end to make sure the element is visible.

MohammadYounes avatar Jul 03 '17 19:07 MohammadYounes

yes I understand. Maybe, is it possible to store the focused object and blur it on prompt open? this way if the enter key is pressed again it will not trigger the prompt again. Then on promp close, focus the stored object again. Can I do that with events callback? thanks

seltix5 avatar Jul 03 '17 20:07 seltix5

The issue is with releasing the key. If one of the dialog buttons receives focus immediately, it will fire keyup event and perform it's action.

I need to look further into this.

MohammadYounes avatar Jul 04 '17 19:07 MohammadYounes

since is not possible to focus the dialog button from the start, as you correctly said, because its not possible to focus hidden elements, maybe a workaround wold be to blur all focus on promp open

seltix5 avatar Jul 04 '17 21:07 seltix5

How about on first show, if the element is focusable , focus it otherwise delay set focus when animation is finished?

AzzaAzza69 avatar Oct 31 '18 08:10 AzzaAzza69

@AzzaAzza69 See https://github.com/MohammadYounes/AlertifyJS/issues/150#issuecomment-312935420.

MohammadYounes avatar Oct 31 '18 09:10 MohammadYounes