Drag-&-drop and Dockbar menu is not working in Chrome using touch laptop / screen

Question

I have been using Liferay 6.2.1 CE GA2 and both issues are reproducible in Chrome (only). I have also verified that you will find both of the above issues been fixed on latest Liferay 6.2.5 CE GA6. I further drilled down and identified that these issue were primarily fixed in Liferay 6.2.2 CE GA3.

My problem is that I am unable to find relevant ticket(s) in which these issues were fixed, as I just require these fixes (can not upgrade). It would be thankful, if someone can point out the exact tickets.

Many thanks in advance.

Answer 1

After hell of research and code debugging, I have been able to resolve both of the issues. Thought of sharing my findings here, as this might be helpful for others.

1. Unable to Drag-&-drop portlets:

Fix: Upgrading alloy zip (\portal-web\third-party\alloy-2.0.0.zip) to 2.0.0.37 or later resolves this issue. Since, this was the only minor upgrade of zip between Liferay 6.2 GA2 - GA6.

2 . Dockbar menus not clickable:

Fix: Resolved it with following custom javascript hack:

var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
var isChrome = !!window.chrome && !isOpera;

/* Run code, if application is running on touch device with chrome */
if(isTouchDevice() && isChrome){
    var docbar_dropdowns = 
        document.querySelectorAll('li.admin-links, li.my-sites, li.user-avatar');

    /* Attach click event */
    if(docbar_dropdowns.length > 0){    
        for(var d = 0; d < docbar_dropdowns.length; d++){
            docbar_dropdowns[d].addEventListener("click", toggleMenu, false);
        }
    }

    /* Toggle menu on click */
    var elementId = null;
    function toggleMenu(event){
        event.stopPropagation();
        if(elementId != null && elementId != this.id)
            hideMenu();

        elementId = this.id;

        if(this.children[1].style.display == "block"){
            this.classList.remove("open");
            this.children[1].style.display = "none";
        }else{
            this.classList.add("open");
            this.children[1].style.display = "block";
        }
    }

    /* Hide previously opened menu */
    function hideMenu(){
        for(var d = 0; d < docbar_dropdowns.length; d++){
            docbar_dropdowns[d].classList.remove("open");
            docbar_dropdowns[d].children[1].style.display = 'none';
        }
    }

    document.body.addEventListener("click", hideMenu, false);
}

/* Detect touch device */
function isTouchDevice() {
    return (('ontouchstart' in window)
    || (navigator.MaxTouchPoints > 0)
    || (navigator.msMaxTouchPoints > 0));
}

NOTE: In our environment, both issues were only reproducible in chrome on touch devices / using mouse on touch laptop.