Skip to content

hideDuringFocus doesn't work correctly on Chrome #5514

Closed
benwwest opened this Issue Jan 23, 2013 · 27 comments
@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
jQuery Foundation member

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.

@arschmitz arschmitz closed this Jan 23, 2013
@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
jQuery Foundation member

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
jQuery Foundation member

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.

@arschmitz arschmitz reopened this Jan 23, 2013
@arschmitz arschmitz was assigned Jan 23, 2013
@jaspermdegroot
jQuery Foundation member

@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
jQuery Foundation member

@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
jQuery Foundation member

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
jQuery Foundation member

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

@jaspermdegroot
jQuery Foundation member

@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
jQuery Foundation member

@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 jaspermdegroot reopened this May 3, 2013
@jaspermdegroot
jQuery Foundation member

@poumpoum @JSkimming

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

@jaspermdegroot
jQuery Foundation member

#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
jQuery Foundation member

@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 gabrielschulhof added a commit to gabrielschulhof/jquery-mobile that referenced this issue Jan 7, 2015
@gabrielschulhof gabrielschulhof Toolbar: Prevent .animationComplete() from firing stale handler 9f858d2
@gabrielschulhof gabrielschulhof added a commit to gabrielschulhof/jquery-mobile that referenced this issue Jan 7, 2015
@gabrielschulhof gabrielschulhof Toolbar: Prevent .animationComplete() from firing stale handler
Fixes gh-7906
Re gh-5514
23f7c36
@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.

@gabrielschulhof gabrielschulhof added this to the 1.5.0 milestone Jan 10, 2015
@gabrielschulhof gabrielschulhof self-assigned this Jan 10, 2015
@gabrielschulhof gabrielschulhof added a commit to gabrielschulhof/jquery-mobile that referenced this issue Jan 10, 2015
@gabrielschulhof gabrielschulhof Toolbar: Remove hideDuringFocus
Fixes gh-5514
6910c8d
@kapilgarg1996 kapilgarg1996 added a commit to kapilgarg1996/jquery-mobile that referenced this issue Jun 27, 2015
@gabrielschulhof gabrielschulhof Toolbar: Fixed toolbar show/hide must not interfere with each other
Fixes gh-7906
Fixes gh-5514
Closes gh-7902
e615f4f
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.