bug: SelectItems not working on Touch devices with setIsDesktop(true)

[jaysmith2020]

SmartClient Version: v11.0p_2018-01-09/LGPL Development Only (built 2018-01-09)
Browser: Chrome Version 63.0.3239.132 (Official Build) (64-bit)
OS: Ubuntu 16.04 LTS

1) There appears to be a bug on Touch interfaces such as Android Chrome and iPhone where SelectItems don't work as expected when Browser.setIsDesktop(true) is set. I'd expect the select to collapse when the user taps outside the drop-down area. Instead nothing happens. This is especially problematic for multi-select items as there is no way to confirm your selection. The site is effectively frozen.

To reproduce, open Chrome, press F12 to show developer tools, and activate the device toolbar with Ctrl+Shft+M. Make sure Responsive is selected. The cursor should be a circle. Now open the example site, click on a select item to show the options, then click outside the selection list.

Expected behavior: the select item closes.
Observed behavior: select item remains open.

It behaves the same on mobile devices.

The issue appears to be somewhere around _handleTouchStart in ISC_Core.js:

_handleTouchStart : function (DOMevent) {
        var EH = isc.EH;




    EH.DOMevent = DOMevent;
    var    event = EH.getMouseEventProperties(DOMevent);

    if (EH.eventHandledNatively(DOMevent.type, DOMevent.target)) return EH._handledNativelyReturnVal;


    delete event.touchStartReturnValue;

    // maintain touch state for synthetic mouseDown/mouseUp
    this._handledTouch = EH._touchEventStatus.TOUCH_STARTED;

    var returnValue = EH.handleEvent(event.target, EH.TOUCH_START);
    var forceMouseEvents = "isc_EH_screenSpan" === event.target.ID; // hack to work around issue and force doHandleMouseDown to fire.

    if (forceMouseEvents || returnValue !== false) {
        event.originalType = EH.TOUCH_START;


        event.eventType = EH.MOUSE_MOVE;
        EH._handleMouseMove(DOMevent, event);

        event.eventType = EH.MOUSE_DOWN;
        returnValue = EH.doHandleMouseDown(DOMevent, event);

---

2) When selecting an item in a drop-down, again while in a Touch interface with Browser.setIsDesktop(true), the browser enters an infinite loop trying to draw the picklist options. The Chrome developer tools console shows an endless stream of the following:

*12:24:22.198:TMR3:WARN:GridBody:isc_PickListMenu_0_body:row heights not yet available; returning all zeroes
isc.B.push.isc.A.addToMasterLog @ ISC_Core.js:1143
isc_c_Log_addLogMessage @ ISC_Core.js:1142
isc_c_Log_log @ ISC_Core.js:1135
logMessage @ ISC_Core.js:1124
logWarn @ ISC_Core.js:1124
isc_GridRenderer__getDrawnRowHeights @ ISC_Grids.js:646
isc_GridBody_adjustOverflow @ ISC_Grids.js:751
isc_Canvas__completeResizeBy @ ISC_Core.js:2680
isc_Canvas_resizeBy @ ISC_Core.js:2677
isc_c_Class_invokeSuper @ ISC_Core.js:275
isc_GridBody_resizeBy @ ISC_Grids.js:780
isc_GridBody_adjustOverflow @ ISC_Grids.js:767
isc_Canvas__updateHTML @ ISC_Core.js:2267
isc_Canvas_redraw @ ISC_Core.js:2258
isc_c_Class_invokeSuper @ ISC_Core.js:275
isc_GridRenderer_redraw @ ISC_Grids.js:740
isc_c_Class_invokeSuper @ ISC_Core.js:275
isc_GridBody_redraw @ ISC_Grids.js:822
isc_c_Canvas_clearRedrawQueue @ ISC_Core.js:3203
isc_c_Class_fireCallback @ ISC_Core.js:284
isc_c_Timer__fireTimeout @ ISC_Core.js:1422
(anonymous) @ ISC_Core.js:1419
setTimeout (async)
isc_c_Timer_setTimeout @ ISC_Core.js:1419
isc_c_Canvas_scheduleRedraw @ ISC_Core.js:3199
isc_Canvas_markForRedraw @ ISC_Core.js:2251
isc_Arra_map @ ISC_Core.js:454
isc_ListGrid__markBodyForRedraw @ ISC_Grids.js:1075
isc_GridBody_redrawForSelectionChanged @ ISC_Grids.js:747
isc_GridRenderer_selectOnMouseUp @ ISC_Grids.js:709
isc_c_Class_invokeSuper @ ISC_Core.js:275
isc_GridBody_selectOnMouseUp @ ISC_Grids.js:858
isc_GridRenderer_mouseUp @ ISC_Grids.js:706
isc_c_Class_invokeSuper @ ISC_Core.js:275
isc_c_Class_Super @ ISC_Core.js:267
isc_GridBody_mouseUp @ ISC_Grids.js:858
isc_Canvas_handleMouseUp @ ISC_Core.js:3045
isc_c_EventHandler_bubbleEvent @ ISC_Core.js:1715
isc_c_EventHandler__handleMouseUp @ ISC_Core.js:1554
isc_c_EventHandler__handleTouchEnd @ ISC_Core.js:1589
isc_c_EventHandler_dispatch @ ISC_Core.js:1801
(anonymous) @ VM836:3

To reproduce, open Chrome, press F12 to show developer tools, and activate the device toolbar with Ctrl+Shft+M. Make sure Responsive is selected. Open the example site and click the first select item and choose an option. Observe the stream of console messages.

I've uploaded a maven project and the built project here:

https://www.amazon.com/clouddrive/sh...S_-UsA0XMMqnpA

Here's the code:

public class ExampleEntryPoint implements EntryPoint
{
    @Override
    public void onModuleLoad()
    {
        Browser.setIsDesktop(true);

        new ExampleLayout().draw();
    }
}

public class ExampleLayout extends VLayout
{
    public ExampleLayout()
    {
        final SelectItem testSelectItem = new SelectItem("testSelectItem", "Test SelectItem");
        testSelectItem.setValueMap("Option 1", "Option 2", "Option 3");

        final SelectItem testMultiSelectItem = new SelectItem("testMultiSelectItem", "Test MultiSelectItem");
        testMultiSelectItem.setMultiple(true);
        testMultiSelectItem.setValueMap("Option 1", "Option 2", "Option 3");

        final DynamicForm form = new DynamicForm();
        form.setItems(testSelectItem, testMultiSelectItem);

        setMembers(form);
    }
}

[Isomorphic]

You're setting isDesktop on a mobile device - why would you do that? This is one of several problems that would be created by telling the framework to use desktop mode when the device is in fact mobile.

[jaysmith2020]

The original reason was to work around another similar issue with multi-select fields. At that time, setIsDesktop appeared to work. When I have time, I will check to see if the original issue has been resolved.

In any event, if there are known issues with using setIsDesktop on touch screens, and you aren't supporting it, your documentation should really be updated to reflect that.

Thanks for your response.

[jaysmith2020]

In case anyone comes across this in the future, I eventually tracked down the issue as problem with the theme I was using (a copy of graphite).

Specifically, this javascript in the load_skin.js was breaking the multi-select fields:

if (isc.PickListMenu) {
    isc.PickListMenu.addProperties({
        skinUsesCSSTransitions: true
    });
}

Once I removed that code and the call to Browser.setIsDesktop(true), everything worked perfectly.