hideDuringFocus doesn't work correctly on Chrome

[benwwest]

I have created a simple JQuery Mobile prototype for an in house demo and have noticed a small issue with fixed footers.

The fixed footer seems to work fine on a desktop browser, however on mobile safari (possibly others) the fixed footer seems to move to the bottom of the entire page (i.e. of the screen) when a select box is opened.

I am using the data-tap-toggle="false" attribute on the footer to keep it visible even if the screen is tapped - it seems that when a select box is used it overrides this and still hides the footer/ sets it to the bottom of the page.

If you require an example please contact me privately and i'll share a link.

[arschmitz]

This is intentional we hide the toolbars when a select or the keyboard opens this is to allow more space visible on the screen. It also solves an iOS bug where fixed positioning is not supported while select menus or the keyboard is open. You don't see this on desktop or larger screens because this behavior is targeted only to smaller screens.

Because this is not a bug but intentional i'm going to close this issue.

[benwwest]

Hi, thanks for looking into this.

I agree that when the keyboard/select is open the footer should be hidden, however when the select is closed again the footer does not retain its fixed position, it moves to the bottom of the page. surely the fixed footer should re-appear at the bottom of the screen not the bottom of the page?

[arschmitz]

Can you please provide a jsbin test page you can get the emplate in our contributing guidlines https://github.com/jquery/jquery-mobile/blob/master/CONTRIBUTING.md if you can provide a test page showing the issue we will re open

[benwwest]

Hi, test page can be found here:

http://jsbin.com/ixudew/8

You should see that the header /footer disapears when the select is opened, and when closed, they no longer have their fixed position.

I have tried this with and without the data-tap-toggle="false" and the same occurs either way.

Tested on iPad and iPhone 5 running latest iOS

[arschmitz]

I can see this now and this is a bug for sure i will take a look at what causing this there is code in place to show the toolbars again but it does not seem to be working. im going to reopen this.

[jaspermdegroot]

@benwwest

Thanks for reporting the issue. It is fixed in latest code now.
BTW - hideDuringFocus is an option which you can set to false if you want.

[JSkimming]

Hi I'm a colleague of @benwwest and I've just tested the fix on an Android Galaxy S3 (Android 4.04).

Here's an updated example using the latest JQM from the CDN http://jsbin.com/ixudew/12

It works in the native browser, though the select experience is quite different, but on Chrome for Android and Firefox the header and footer both change from fixed to in-line after dismissing the select. After tapping the screen, both the header and footer become fixed again and remain fixed if I tap again.

[jaspermdegroot]

@JSkimming @benwwest

The problem seems to be that Chrome doesn't fire the focusout event when the select menu closes. You will see the button still has the focus style after the select menu has been closed. We bind to that event to bring the fixed toolbars back in view. I have to see if there is another event to bind to.

[jaspermdegroot]

Chrome only fires the change event. I wonder if this is something we can fix in the select widget. Binding the hideDuringFocus function to change is not an option since we have custom multiple selects.

[jaspermdegroot]

Changed the title. Was "Fixed footer moves when select opened"

[jaspermdegroot]

@arschmitz and I looked into this (http://jsbin.com/ixudew/20/edit), but we need more time to test the solution so I set milestone 1.3.1 for this ticket.

[JSkimming]

I've tested the patch (http://jsbin.com/ixudew/20/edit) on my Galaxy S3 (Android 4.04), and it has fixed the bug on both Chrome and Firefox.

We really appreciate the efforts, and understand why it'll have to wait for 1.3.1.

Many thanks.

[poumpoum]

Hi everybody !

When I click on the select, the header and the footer disappear and the native list is popped :

1. If I change the value of the select (->select another value than the one that was selected), the fixed header and the fixed footer appear again.
2. If I don't change the value of the select (select the same value or click out of the list or click on the android back button), the fixed header and the fixed footer seem to move to the top and to the bottom of the entire page.

I use jquery-mobile 1.3.1 and I did this tests on :

• Nexus 7(Chrome/Firefox)
• HTC One X (Chrome)

->The behavior is the same.

[jaspermdegroot]

@poumpoum

Can you provide a simple test page?

[poumpoum]

Here is an example (based on the original I've found here) http://jsbin.com/ixudew/33

[JSkimming]

Hi I can confirm the same behaviour as described by @poumpoum on my Galaxy S3 with Chrome.

[jaspermdegroot]

@poumpoum @JSkimming

I re-opened the ticket and will look into this.

[jaspermdegroot]

#6028 might be a regression from the change that I made to fix this issue.

[gabrielschulhof]

I've tested hideDuringFocus on an Android 4.1.2 AVD and it doesn't work very well. The toolbars do not unfix when you open the select and they unfix, briefly re-fix, and then unfix again afterwards. So, even if we disregard the brief flash of them being fixed, the end state is wrong, because after the select closes, the toolbars should be fixed, rather than static.

[gabrielschulhof]

@jaspermdegroot I've found the reason why: Android 4.1.2 blurs the selectmenu button when it opens the native menu, so the fixedToolbar receives focusin and focusout in quick succession. Both focusin and focusout attach .animationComplete() handlers, which can interfere with each other. I've filed #7902 wherein I fix the problem. It's not a fix for this issue, but it's a good branch to work on issues of interaction between fixed toolbars and selectmenus.

[gabrielschulhof]

sigh Unfortunately, I think both #6028 and this issue stem from the fact that we have no way of knowing that the native selectmenu was closed.

[gabrielschulhof]

Just to illustrate:

1. Open http://jsbin.com/linine/1/ on Android 4.1.2
2. open the selectmenu
3. select a new item
   At this point, the toolbar is hidden.

http://jsbin.com/linine/2/ refers to the modified version from the branch for #7902, and behaves correctly.

[gabrielschulhof]

My Android 4.4.2 AVD works too.

[gabrielschulhof]

Works on FF/Android 2.3.5 as well.

[arschmitz]

@gabrielschulhof pretty sure we already came to the conclusion its not possible for hideDurring focus to work everywhere on selectmenus and were going to drop this in 1.5?

[gabrielschulhof]

Alright, I guess we can't fix this then.

[gabrielschulhof]

We have decided to remove the hideDuringFocus logic entirely, because we cannot implement it consistently. It is better to manually hide/show the fixed toolbars from your own application via the toolbar's hide() and show() methods, because the correct time to hide/show the toolbar must be determined per-application.