I have implemented the mCustomScrollbar plugin in my backoffice interfaces. It works fine. But in one of my forms, I have a city field that needs the autoplete.

The autoplete also works fine. But when I select one of the item from autoplete source data, the mCustomScrollbar plugin automatically brings me to the top of the scrolling content and I have to click a second time for the item to actually be selected.

This is how I implemented the scrollbar plugin :

$('#mainContent').mCustomScrollbar({
        set_height: height,
        scrollInertia: 500,
        scrollEasing: "easeInOutQuad",
        mouseWheel: 20,
        autoDraggerLength: true,
        advanced: {
            updateOnBrowserResize: true,
            updateOnContentResize: false
        }
    });

And this is how I implemented the autoplete :

el.autoplete({
    source: function (request, response) {
        $.ajax({
            url: activityAutoplete,
            dataType: "json",
            data: request,
            success: function (data) {
                if (data.length == 0) {
                    data.push({
                        label: "Pas de résultat"
                    });
                }
                response(data);
            }
        });
    },
    //If overflow edge of window, the autoplete flips to top of input
    position: { collision: "flip" },
    autofocus: true,
    delay: 150,
    minLength: 1,
    select: function (event, ui) {
        //ui.hide();
        //The following code resizes the input by bluring it.
        setTimeout(function () { el.autoGrowInput(); }, 50);


    },
    appendTo: '#autoplete-tb-city-' + el.parents('.item').attr('id')
});

I hope you'll find something wrong here, i've been working on this for like 3 days !

EDIT: This is the generated autoplete markup.

<ul class="ui-autoplete ui-menu ui-widget ui-widget-content ui-corner-all"   role="listbox" aria-activedescendant="ui-active-menuitem">
    <li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">Angers</a</li>
    <li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">Amiens</a</li>
</ul>

I must add something might be importante : it brings me to top even on RIGHT CLICK !!

Thank you.

I have implemented the mCustomScrollbar plugin in my backoffice interfaces. It works fine. But in one of my forms, I have a city field that needs the autoplete.

The autoplete also works fine. But when I select one of the item from autoplete source data, the mCustomScrollbar plugin automatically brings me to the top of the scrolling content and I have to click a second time for the item to actually be selected.

This is how I implemented the scrollbar plugin :

$('#mainContent').mCustomScrollbar({
        set_height: height,
        scrollInertia: 500,
        scrollEasing: "easeInOutQuad",
        mouseWheel: 20,
        autoDraggerLength: true,
        advanced: {
            updateOnBrowserResize: true,
            updateOnContentResize: false
        }
    });

And this is how I implemented the autoplete :

el.autoplete({
    source: function (request, response) {
        $.ajax({
            url: activityAutoplete,
            dataType: "json",
            data: request,
            success: function (data) {
                if (data.length == 0) {
                    data.push({
                        label: "Pas de résultat"
                    });
                }
                response(data);
            }
        });
    },
    //If overflow edge of window, the autoplete flips to top of input
    position: { collision: "flip" },
    autofocus: true,
    delay: 150,
    minLength: 1,
    select: function (event, ui) {
        //ui.hide();
        //The following code resizes the input by bluring it.
        setTimeout(function () { el.autoGrowInput(); }, 50);


    },
    appendTo: '#autoplete-tb-city-' + el.parents('.item').attr('id')
});

I hope you'll find something wrong here, i've been working on this for like 3 days !

EDIT: This is the generated autoplete markup.

<ul class="ui-autoplete ui-menu ui-widget ui-widget-content ui-corner-all"   role="listbox" aria-activedescendant="ui-active-menuitem">
    <li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">Angers</a</li>
    <li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">Amiens</a</li>
</ul>

I must add something might be importante : it brings me to top even on RIGHT CLICK !!

Thank you.

• javascript
• jquery
• jquery-ui
• autoplete

4 Answers 4

A new version of custom scrollbars have an advanced option autoScrollOnFocus.

Example:

        $($element).find('> .scrollbars').mCustomScrollbar({
            horizontalScroll: false,
            autoDraggerLength: true,
            autoHideScrollbar: true,
            advanced:{
                autoScrollOnFocus: false,
                updateOnContentResize: true,
                updateOnBrowserResize: true
            }
        });

I was facing the same issue with autoplete. Selecting any autoplete items scrolls the window to the top.

I saw your ment here, and I think you got the solution.

Using hint you mentioned in the above link, I went through mcustomscrollbar.js code and just mented out lines 533 and 534 and yeppy it worked for me.

Thanks for the hint. Cheers !!

might be an anchor-related problem? what is the href on the generated items for auto-plete? it would be helpful if you can provide the html markup of the generated auto-plete.

maybe try adding this (not tested)...

$( [auto-plete suggestions] ).live("click", function(e){
e.preventDefault();
});

I faced similar issue. The issue was on first time item selection it was focusing on autoplete input element, so what i did was just focus on autoplete input element on success of ajax and it solved my problem.

$('#'+id of input element).focus();