Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

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

    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:

    Code:
    _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:

    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);
        }
    }

    #2
    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.

    Comment


      #3
      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.

      Comment


        #4
        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:

        Code:
        if (isc.PickListMenu) {
            isc.PickListMenu.addProperties({
                skinUsesCSSTransitions: true
            });
        }
        Once I removed that code and the call to Browser.setIsDesktop(true), everything worked perfectly.

        Comment

        Working...
        X