Focus is lost in mobile Safari after dropdown selection

[rtonev]

I am using an alertify dialog to display a pop-up which includes a form.

The form has input and select fields. I am experiencing issues with both of mobile sefari. Everywhere else it seems to be working fine.

When I am trying to make a selection on my select and click "done" on mobile sarafi, the focus scrolls to the top of the page.

This is happening with the latest version, 1.5.0, as well as 1.4.1

Thanks, Rado.

[MohammadYounes]

I'll need to check this, But are we talking about a modal or modeless dialog?

it would be great if you could provide an online sample.

Thanks!

[rtonev]

The issue can be reproduced on http://alertifyjs.com/examples.html

When I run the example "Button-Less Generic Dialog", if I click on the username or password field, the focus scrolls to the top of the page. So I guess it is not limited to drop downs, but is also happening with input fields.

We are using a modal dialog.

Thanks!

[MohammadYounes]

Seems related to the way Safari handles showing the virtual keyboard or dropdown items list. I'll need to investigate this more.

Thanks!

[rtonev]

Thanks, appreciate it.

[rtonev]

Hi Mohammad,

Could you please tell me if you were able to make some progress on this issue, or if you are aware of some workaround for it.

I am not quite sure I can avoid this problem.

Thanks!

[MohammadYounes]

@rtonev The issue is related to using fixed position (Safari doesn't like it), Open this on mobile Safari http://alertifyjs.com/prompt/unpin.html and you can see there is no scrolling (the unpinned dialog uses absolute position).

As a workaround, you can try the following (for basic usage):

alertify.prompt().set('onshow', function(){
  this.elements.modal.style.position = 'absolute'; 
  this.elements.modal.style.height = '100%'; 
  this.elements.modal.style.top =  ((document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop) + 'px';
});

There is a lot of code based on the dialog being in a fixed position, so the above workaround will fail in some cases and the dialog may go off-screen.

It might take a while before this enhancement gets merged into the library.

Appreciate your understanding!

Thanks.

[Phamtuan12]

Ok tôi rất thích những contro như thế này