Focus is lost in mobile Safari after dropdown selection #80

Open
rtonev opened this Issue Nov 4, 2015 · 6 comments

Projects

None yet

2 participants

@rtonev
rtonev commented Nov 4, 2015

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
Owner

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
rtonev commented Nov 5, 2015

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
Owner

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

Thanks!

@rtonev
rtonev commented Nov 5, 2015

Thanks, appreciate it.

@MohammadYounes MohammadYounes self-assigned this Nov 23, 2015
@rtonev
rtonev commented Dec 8, 2015

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
Owner

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment