Support Article
Sub-Menus/Cascading menus do not appear or cannot be selected
SA-40435
Summary
Users experience various user interface issues when using Chrome or Firefox on touchscreen laptops for Pega applications.
For example, the following three problems were reported when using laptop models T460s and Lenovo P50 running Windows 7:
- Menu control overlay does not display, but it opens the main landing page.
- Calendar Date Controls do not work on screens. Users must type the date.
- The contex menu gets stuck on the screen and cannot be acted on with the mouse.
- Right-click on Designer Studio objects does not display the Pega context menu. Instead it displays the browser's context menu
The issue occurs is the same whether you use the screen or the mouse.
Error Messages
No error. The user interface freezes.
Steps to Reproduce
1) Use a touch enabled laptop and an application with 'Render in HTML5' checkbox ticked.
2) Launch Designer Studio.
3) Click on Designer Studio menu (top left).
4) Notice how sub-menus with cascading menus are disabled
Root Cause
This is a Pega product limitation with touchscreen-enabled/hybrid devices.
It occurs on laptops running a browser like Firefox or Chrome where the code "ontouchstart" in document.documentElement returns "true" for desktop.
This problem occurs with touchscreen laptops when both touchscreen and mouse functionality are used.
Resolution
Disable the touchscreen functionality in your browser:
Perform the following local-change and restart the browser:
For Firefox:
1. Open a new tab in the browser
2. Type the following in the address bar: "about:config"
3. Hit enter
4. On the next screen, find the ‘Search’ bar
5. Type ‘touch’ in the Search: and hit enter
6. When you see the list of available ‘touch’ menus’ find the setting called ‘dom.w3c_touch_events.enabled’ (tested in Firefox version 54)
7. Double click that settings so that you see the ‘Enter integer value’ popup
8. In the value box, remove the ‘2’ and replace with ‘0’
9. Hit enter so that it applies
10. Restart the browser to be on safe side
For Chrome:
1. Open a new tab in the browser.
2. Type the following in the address bar: "chrome://flags"
3. Hit enter
4. On the next screen, find the ‘experimental features’ list
5. Do a page search for 'touch’
6. You should find 'Touch Events API ' setting (tested in Google Chrome Version 59).
7. Disable Touch events in by selecting the value 'Disabled' in the dropdown list.
8. Restart the browser to be on safe side
Various Pega product enhancement requests were submitted for consideration by Pega Product Management and these have been incorporated into a User Story that is now fixed in 7.3.
Pega is now using pega.cl.isTouchAble generic API instead of custom scripts to identify touch support.
Published August 26, 2017 - Updated October 8, 2020
Have a question? Get answers now.
Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.