[QTBUG-61581] QtQuickControls2 Drawer doesn't close if tapped outside Created: 22 Jun '17  Updated: 05 Oct '18  Resolved: 14 Jul '17

Status: Closed
Project: Qt
Component/s: Quick: Controls 2
Affects Version/s: 5.9.0
Fix Version/s: 5.9.2

Type: Bug Priority: P1: Critical
Reporter: Ekkehard Assignee: J-P Nurmi
Resolution: Done Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified
Environment:

OSX 10.12.5
Qt 5.9
QtCreator 4.3
Android 6.0.1
iOS 10.3.2
Xcode 8.3.3

bug appears on Android and iOS but is working by mouse click on macOS


Issue Links:
Relates
is related to QTBUG-69033 When starting to show a drawer on a t... Open
is related to QTBUG-61698 Modal Overlay don't block multi touch Closed
Commits: e841c0a252099778fcaa01593592a6b92844e04d

 Description   

under 5.8 opening the Drawer I always could close the Drawer by tapping outside of the Drawer

under 5.9 the (opened) Drawer looks the same (space outside Drawer is dimmed),

but tapping outside doesn't always close the Drawer.

sometimes after some taps, sometimes never, sometimes immediately

under iOS I'm getting this after opening the Drawer by dragging:

{{stale focus object QQuickStackView_QML_26(0x17013b080) , doing manual update}}

and this after some taps outside drawer if I was able to close the Drawer:

{{stale focus object QQuickPopupItem(0x17022d4e0) , doing manual update}}
{{stale focus object QQuickRootItem(0x17002e700) , doing manual update}}

under Android no output like this

on MacOS clicking with Mouse works, so it's a touch problem

I verified comparing QtQuickControls2 Gallery APP from 5.8: tap outside Drawer closes Drawer,  Gallery from 5.9: tap outside doesn't close the Drawer

tried explicitely setting modal true or some other close policies, but Drawer wasn't closed reliable

while the Drawer cannot be closed tapping outside, the tap event goes through to the underlying Page and so user can hit a Button by accident.

Found a (ugly looking) workaround and inserted a fake Popup between Drawer and underlying StackView Pages. Now user cannot tap on Buttons from Pages below, but unfortunately also cannot "see" the content below. couldn't figure out a way to make this fake Popup transparent

 

Drawer {
    id: myDrawer
    z: 1
    ....
    // workaround:
    onOpened: {
        fakePopup.open()
    }
    onAboutToHide: {
        fakePopup.close()
    }
    Popup {
        id: fakePopup
        z: 0
        width: appWindow.width
        height: appWindow.height
    }
    // end workaround


 Comments   
Comment by J-P Nurmi [ 22 Jun '17 ]

Perhaps this is related to QTBUG-60602? Is it the Material style shadow that leaks the events through? Does setting 0-elevation prevent the problem?

Drawer {
    Material.elevation: 0
}
Comment by Ekkehard [ 22 Jun '17 ]

just tried:

doesn't help. 

cannot close the Drawer but click Buttons on underlying Page while Drawer still is open

Comment by Camilo José del Real [ 23 Jun '17 ]

The bug QTBUG-60540 mentions the Drawer's bad behavior to close on tactile devices. I noticed updating one of my applications that if a popup is displayed (in my case a menu) can not always be closed in the area near this, it may have something similar to the drawer, perhaps with the external area to the popup. Returning to the subject of the drawer, once the open popup (with the drawer open) is closed, the area around the drawer takes the right behavior (closing the drawer with a tap), it is as if something is losing focus, or control that is behind or around the popup does not capture tactile events.

Comment by Ekkehard [ 26 Jun '17 ]

just found a drawback of my workaround:

as soon as I have closed the Drawer by dragging back with finger on fake Popup,

then I cannot tap outside a Menu to close a Menu. Android back key (Escape) can be used to close Menu.

If Drawer always was closed by BACK key or by tapping on Button to close, Menus can be closed tapping outside.

Also if closing Drawer by dragging with my finger inside the Drawer itself (not on my fake Popup), Menu still is working.

But after first time closing Drawer by dragging with finger on my fake Popup all Menus cannot be closed by tapping outside.

Workaround: adding "Back" MenuItem to close

 

Comment by J-P Nurmi [ 05 Jul '17 ]

while the Drawer cannot be closed tapping outside, the tap event goes through to the underlying Page and so user can hit a Button by accident.

I'm struggling with reproducing the "drawer does not close" -part of the issue, but the modal overlay not blocking multi-touch part was fixed by QTBUG-61698.

Comment by Ekkehard [ 05 Jul '17 ]

thx for your help building QQC2 on top of 5.9.1

Now the Drawer can be closed by tapping outside in most cases

First tests done and noticed 3 bugs:

1. If a Menu was open when Drawer was opened, then tapping onto one of the MenuItems from dimmed Menu on underlying Page, this doesn't close the Drawer, but selects the MenuItem without triggering

2. If a normal Popup (modal:false) is open when Drawer was opened, while Tapping on the area of the Popup below doesn't close the Drawer, but also doesn't execute any Buttons on the Popup

Another probably corrsponding error:

3. Opening a Menu with policy noAutoClose I'm not able to close the Menu when tapping outside (expected), but I'm able to Tap and trigger Buttons from oitside the Menu, while the Menu still remains open

Comment by J-P Nurmi [ 06 Jul '17 ]

1. If a Menu was open when Drawer was opened, then tapping onto one of the MenuItems from dimmed Menu on underlying Page, this doesn't close the Drawer, but selects the MenuItem without triggering
2. If a normal Popup (modal:false) is open when Drawer was opened, while Tapping on the area of the Popup below doesn't close the Drawer, but also doesn't execute any Buttons on the Popup

Ok, I'll take a look.

Another probably corrsponding error:
3. Opening a Menu with policy noAutoClose I'm not able to close the Menu when tapping outside (expected), but I'm able to Tap and trigger Buttons from oitside the Menu, while the Menu still remains open

This sounds like the expected behavior. A non-modal menu does not block user interaction outside.

Comment by Ekkehard [ 06 Jul '17 ]

Thanks looking at 1. and 2.

3.:

seems then I cannot use the noAutoClose Menus on a touch device.

per ex. user opens Menu with noAutoClose. if tapping outside on a list row pushing a details Page on top then the new Page comes up and the Menu from previous Page still is open.

so I should always allow closing a menu by tapping outside

On Android users expect that the first Tap outside of a Menu only closes the Menu and does nothing else.

It was my misunderstanding that noAutoClose would prevent user to trigger buttons or so.

perhaps I should experiment setting such kind of Menu as modal if I really want that the user taps on one of the MenuItems

Comment by J-P Nurmi [ 06 Jul '17 ]

You probably want:

Menu {
    dim: false
    modal: true
}
Comment by Ekkehard [ 06 Jul '17 ]

just tested with modal: true and it works as expected - no unwanted clicks

wanted to ask you if I can can avoid dimming and the answer already is here

So I finally have a solution for all kind of Menus.

Comment by Ekkehard [ 06 Jul '17 ]

works great

as a reference here are my use-cases:

Menu {
    dim: false
    modal: true
    closePolicy: Popup.CloseOnPressOutside | Popup.CloseOnEscape
}

gives me exactly the normal Android Menu UX

 

for situations where the User must tap on one of the MenuItems this does it:

Menu {
    dim: false
    modal: true
    closePolicy: Popup.NoAutoClose
}

and if User must pick a MenuItem, but the last MenuItem is "Back" to close the Menu, then this also supports the Android BACK key for this scenario:

Menu {
    dim: false
    modal: true
    closePolicy: Popup.NoAutoClose | Popup.CloseOnEscape
}
Comment by J-P Nurmi [ 06 Jul '17 ]

Btw, while other popups had a default close policy of (CloseOnPressOutside | CloseOnEscape), Menu had overridden it with (CloseOnPressOutside | CloseOnReleaseOutside | CloseOnEscape) => QTBUG-61608. This is probably because Menu was being developed by one developer, while Popup::closePolicy was added by another at the same time. Anyway, this has been fixed in Qt 5.9.2 so now the default Menu closePolicy does no longer conflict with press and hold.

Comment by Ekkehard [ 07 Jul '17 ]

1. If a Menu was open when Drawer was opened, then tapping onto one of the MenuItems from dimmed Menu on underlying Page, this doesn't close the Drawer, but selects the MenuItem without triggering

2. If a normal Popup (modal:false) is open when Drawer was opened, while Tapping on the area of the Popup below doesn't close the Drawer, but also doesn't execute any Buttons on the Popup

for the first one here's the workaround for me:

ApplicationWindow {
    id: appWindow
    ...
    property bool modalMenuOpen: false
    ....
}

Drawer {
    ...
    interactive: !appWindow.modalMenuOpen
    ...
}
	
Menu {
    modal:true
    dim: false
    closePolicy: Popup.CloseOnPressOutside | Popup.CloseOnEscape
    .....
    onAboutToShow: {
        appWindow.modalMenuOpen = true
    }
    onAboutToHide: {
        appWindow.modalMenuOpen = false
    }
}

Trying to open the non-interactive Drawer closes the Menu from first try, then trying again Drawer opens. feels good from UX

 

so only 2. with a normal non-modal Popup visible while Drawer is opened I have no solution yet

thx for all the help

Generated at Tue Oct 23 13:48:16 UTC 2018 using Jira 7.11.2#711002-sha1:fdc329dee91471a641faabfe39b5ff8c0a5b3f66.