Page MenuHomePhabricator

Tapping outside an open menu should close the opened menu on iOS
Closed, ResolvedPublic

Description

Steps to Reproduce

Expected results

  • the icon you pressed should still be viable for you to close the sidebar or at least allow us to click of the sidebar to close it.

Actual Results

  • The sidebar will not close once opened.

Note: I tested this on an iPhone 6 Plus running iOS 10.3 but most likely happens to other mobiles too.

Event Timeline

This happens to the other menus too like the settings icon and the user menu.

Paladox renamed this task from Impossible to close the sidebar once open on mobile to Impossible to close menus once open on mobile.Mar 26 2017, 11:06 PM

What browser and type of phone you using?

Worked on mine last I checked, but that's not exactly a large sample
size/necessarily up to date. (Which site, or was it master, or what?)

@Isarra Hi I am using an iPhone 6 Plus running iOS 10.3 beta.

Thanks. I'll try to see what's going on. It's very simple stuff, so
whatever the problem is, it's also probably pretty simple.

Tapping outside menu should close menu. It does not.

Swiping only closes menu on swipe-right, but when menu is on left, expectation is to swipe left to close. This also does not work. Only way out is swipte-right.

Appears to be iphone-specific?

Self or whoever: test android to be sure. (don't recall any such issues, though)

Yep appears to be iPhone specific (I’ve only tested on iPhone so carnt speak for android)

ashley renamed this task from Impossible to close menus once open on mobile to Tapping outside an open menu should close the opened menu on iOS.Sep 23 2017, 2:24 PM
SamanthaNguyen added subscribers: ashley, SamanthaNguyen.

I seemed to figure out the problem, after testing on:

  • iPhone 7 with iOS 11 (latest stable version) on Safari
  • iPhone 7 with iOS 11 (latest stable version) on Chrome 61.0.3163.73

In resources/mobile.js, there's a click event for closing the menu:

mobile.js
$( document ).click( function ( e ) {
	if ( $( e.target ).closest( '#menus-cover' ).length > 0 ) {
		$( '#personal-inner' ).fadeOut( toggleTime );
		$( '.sidebar-inner' ).fadeOut( toggleTime );
		$( '#menus-cover' ).fadeOut( toggleTime );
	}
} );

On iOS, click events have a different definition than a click event that occurs on desktop (but for some reason this doesn't apply to Android too, as @ashley told me in a convo that it works for her). iOS will only listen and recognize a click event if the element has cursor: pointer; applied.


@Paladox: In the future, please provide the browser you tested on (as asked in T161470#3132615), as well as making sure you tested on a stable environment.

While right now I did test on iOS 11, right now at this time iOS 11 is the latest stable version. At the time this bug was published, 10.3 was still in beta (meaning, a version that's still in development and experimental), and so you should've tested on 10.2 and make sure it was producible on there instead.

Finding a bug on a developmental, experimental version doesn't mean anything - things are bound to be unstable. While in this bug it didn't matter (by lucky chance), this doesn't mean it won't apply to future bugs that are reported, and context always matters. Saying you produced it on a dev. version makes it harder for people who are the maintainers figuring out what's going on as well. Thank you.

As an added note.. You can swipe right to close the menu on iOS (although it's a hidden action). This functionality is defined in [[https://github.com/wikimedia/mediawiki-skins-Timeless/blob/master/resources/mobile.js#L44|mobile.js]] as well:

mobile.js
// Include alternative closing method for ios
$( window ).on( 'swiperight', function () {
	if ( $( window ).width() < 851 ) {
		$( '#personal-inner' ).fadeOut( toggleTime );
		$( '.sidebar-inner' ).fadeOut( toggleTime );
		$( '#menus-cover' ).fadeOut( toggleTime );
	}
} );

Change 440246 had a related patch set uploaded (by Isarra; owner: Isarra):
[mediawiki/skins/Timeless@master] Remove nonfunctional jquery mobile stuff

https://gerrit.wikimedia.org/r/440246

Change 440604 had a related patch set uploaded (by Paladox; owner: Isarra):
[mediawiki/skins/Timeless@REL1_31] Remove nonfunctional jquery mobile stuff

https://gerrit.wikimedia.org/r/440604

Change 440246 merged by jenkins-bot:
[mediawiki/skins/Timeless@master] Remove nonfunctional jquery mobile stuff

https://gerrit.wikimedia.org/r/440246

Change 440604 merged by jenkins-bot:
[mediawiki/skins/Timeless@REL1_31] Remove nonfunctional jquery mobile stuff

https://gerrit.wikimedia.org/r/440604

Hi, nope it dosent fix it for me.

Using iOS 11.4 and iPhone X (now).

And used safari

Thanks. I'll have to try something else for this one.

Change 440718 had a related patch set uploaded (by Paladox; owner: Paladox):
[mediawiki/skins/Timeless@master] Fix sidebar closing on iOS

https://gerrit.wikimedia.org/r/440718

Change 440719 had a related patch set uploaded (by Paladox; owner: Paladox):
[mediawiki/skins/Timeless@REL1_31] Fix sidebar closing on iOS

https://gerrit.wikimedia.org/r/440719

Change 440718 merged by jenkins-bot:
[mediawiki/skins/Timeless@master] Fix sidebar closing on iOS

https://gerrit.wikimedia.org/r/440718

Change 440719 merged by jenkins-bot:
[mediawiki/skins/Timeless@REL1_31] Fix sidebar closing on iOS

https://gerrit.wikimedia.org/r/440719

Tested the new fix and it fixes my issue now!

Paladox removed a project: Patch-For-Review.
Paladox removed a subscriber: gerritbot.
RileyBugz subscribed.

I'm on an iPhone 5S with iOS 11.4, and I'm using desktop view (so I can use Timeless), but the only way I can get out of the dropdown boxes is to swipe right.

By the way, it works for me when I go to the link provided at the beginning of the task.