jQuery.ui.sortable iOS can't enter task & can't scroll without sorting

[BrianHenryIE]

I was unable to add a new task because jQuery.ui.sortable is catching the touch events and not passing them to the form fields. As I investigated to fix this, I noticed the tasks are reordering unintentionally sometimes as use my finger to scroll passed them.

I think the best solution would be to disable sorting on mobile until a toggle is clicked. i.e. a right aligned icon in the title bar of each task list that when clicked enables sorting for that list.

How can I disable this today? Wp-project-manager is unusable on mobile without being able to enter new tasks.

[BrianHenryIE]

Potentially, it can be fixed by adding delay: 500 to the todos.sortable({ options: https://github.com/weDevsOfficial/wp-project-manager/blob/develop/assets/js/task.js#L77

[BrianHenryIE]

Hack to fix this:

Save this in your child theme as /js/sortable_fix.js

// Remove 'sortable' function which interferes with scrolling and form inputs on mobile.
var mutationObserver = new MutationObserver(function (e) {
    if(e.length != null && e.length > 0) {
        for(var i = 0; i < e.length; i++) {
            var element =  e[i].target;
            if( jQuery( element ).hasClass( "cpm-todolist-content" ) || jQuery( element ).hasClass( "cpm-todolists" ) ) {
                jQuery(element).sortable("disable");
            }   
        }
    }
});
document.addEventListener("DOMContentLoaded", function(e){
    var tasksLists = document.getElementById('cpm-task-el');
    mutationObserver.observe(tasksLists, { childList: false, subtree:true, attributes: true, characterData: true}); 
});

Add this in functions.php

function sortable_fix() {
    if( wp_is_mobile() ) {
        $sortable_fix_url = get_stylesheet_directory_uri() . '/js/sortable_fix.js';
        wp_enqueue_script( 'internal-ea-mobile-js', $sortable_fix_url, array(), 1, false );
    }
}
add_action( 'admin_enqueue_scripts', 'sortable_fix');

I'm not familiar enough with the JS build system to attempt a pull request on the regular code. A "how to contribute" guide would be useful.

[yeasin1989]

@BrianHenryIE

Thanks for your suggestions. Now you can submit a pull request here https://github.com/weDevsOfficial/wp-project-manager/compare we will check and implement it in future if it works perfectly with our plugin.

Best regards.