Dropdown flickers after switchting tabs

JohnJVTK commented 4 years ago

Hello !

I'm using multiple-select for months in my company after switching to bootstrap 4. I'm currently experienced a bug after migrating from 1.3.1 to 1.5.2. I have a select with 5000+ records (suppliers for my company) in a multi tabs form. If the select is in the 1st tab, everything is fine but if it's in the 2nd and I swap from 1st to 2nd, the displayed records flickers and I'm stuck with the first 7 elements. FYI the bug disappears if I filter by tapping a single letter then remove it. There is no bug if I display only 100 records.

I wrote this simple code to explain the bug :


@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>TabsMultipleSelect</title>

    <!-- Styles -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/solid.css" integrity="sha384-QokYePQSOwpBDuhlHOsX0ymF6R/vLk/UQVz3WHa6wygxI5oGTmDTv8wahFOSspdm" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/fontawesome.css" integrity="sha384-vd1e11sR28tEK9YANUtpIOdjGW14pS87bUBuOIoBILVWLFnS+MCX9T6MMf0VdPGq" crossorigin="anonymous">
    <link href="https://unpkg.com/multiple-select@1.5.2/dist/multiple-select.min.css" rel="stylesheet">

    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/multiple-select@1.5.2/dist/multiple-select.min.js"></script>
</head>
<body>
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="nav-item"><a class="nav-link active" href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">Tab 1</a></li>
        <li role="presentation" class="nav-item"><a class="nav-link" href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">Tab 2</a></li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
        <!-- Onglet Fournisseur -->
        <div role="tabpanel" class="tab-pane active" id="tab1">
        </div>
        <div role="tabpanel" class="tab-pane" id="tab2">
            <select>
                @for (var i = 1; i <= 5000; i++)
                {
                    <option>@i</option>
                }
            </select>
        </div>
    </div>

    <script type="text/javascript">
        $("select").multipleSelect();
    </script>
</body>
</html>

Sorry but English is not my native language. Any help appreciated.

wenzhixin commented 4 years ago

Please provide an Online Example to show your problem, thanks!

JohnJVTK commented 4 years ago

Here it is : http://multiple-select-live.wenzhixin.net.cn/code/JohnJVTK/1666

wenzhixin commented 4 years ago

@JohnJVTK After debugging the problem and find that we need to listen to the shown.bs.tab event of tabs, and use the refresh method to solve the problem. http://multiple-select-live.wenzhixin.net.cn/code/wenzhixin/1915 Hope this can solve your problem.

JohnJVTK commented 4 years ago

Thank you everything works fine now !

Btw I modified your code so that it can apply in the whole application (cause I have 20+ multiselect). I put this only once in my global javascript file (site.js) :

$('[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        const tabId = $(e.target).attr('aria-controls');
        $('#' + tabId + ' select.ms-offscreen').multipleSelect('refresh');
});

http://multiple-select-live.wenzhixin.net.cn/code/JohnJVTK/1952

wenzhixin / multiple-select

Dropdown flickers after switchting tabs #526