buttonTitle & buttonText ignore delimiter length

mabgfounder commented 8 years ago

I had a problem where the last character was being dropped off the displayed button text/title after users selected an option in the multiselect. The problem turned out to be that when the delimiterText option was set to "," (string containing a single coma) the last character was being dropped off. For example:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="/Content/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="/Content/bootstrap-multiselect.css" />
</head>
<body>
    <form>
        <select class="form-control form-control-multi" id="Foos" multiple="multiple" name="Foos">
            <option value="101">ABC0015/101</option> <!-- Selecting only this option will display 'ABC0015/101' in button -->
            <option value="103">ABC0016/102 </option> <!-- This option works because of space -->
            <option value="106">BC0017/103</option> <!-- This option fails even with shorter string -->
        </select>
    </form>

    <script type="text/javascript" src="/Scripts/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="/Scripts/bootstrap.min.js"></script>
    <script type="text/javascript" src="/Scripts/bootstrap-multiselect.js"></script>

    <script type="text/javascript">
    $('#Foos').multiselect({
        delimiterText: ',', // changing this to a string with length = 2 works around the problem
    });
    </script>
</body>
</html>

I believe the proper fix is to have the multiselect's buttonTitle and buttonText use the delimiter.length instead of a hard coded 2. Here is a patch that I think will correct the problem.

Index: bootstrap-multiselect.js
===================================================================
--- bootstrap-multiselect.js    (revision 191)
+++ bootstrap-multiselect.js    (working copy)
@@ -263,7 +263,7 @@
                         selected += label + delimiter;
                     });

-                    return selected.substr(0, selected.length - 2);
+                    return selected.substr(0, selected.length - delimiter.length);
                 }
             },
             /**
@@ -285,7 +285,7 @@
                         var label = ($(this).attr('label') !== undefined) ? $(this).attr('label') : $(this).text();
                         selected += label + delimiter;
                     });
-                    return selected.substr(0, selected.length - 2);
+                    return selected.substr(0, selected.length - delimiter.length);
                 }
             },
             /**

This is my first issue report on GitHub. I apologize if formatting is messed up.

mabgfounder commented 8 years ago

I just noticed the revision numbers in the patch. Those are for the project I am planning to use multiselect in. They have no relation to the multiselect repository.

davidstutz commented 8 years ago

Thanks for the note,will add the fix!

davidstutz commented 8 years ago

Fixed.

TexasSwede commented 7 years ago

I am having that same problem now, a year later. The last character of the last selected item is cut off, both in the button itself and if I hover over it. multiselectmissingcharacter

I am using the example code straight off the page:

$('#example-getting-started').multiselect({
       buttonClass:"btn btn-link",
       includeSelectAllOption: true,
       delimiterText: ';'
});

I also tried using delimiterText: "\n" and getting the same result.

shuhratjan commented 5 years ago

@TexasSwede Have you solved this problem? if yes, could you share with solution way?

davidstutz / bootstrap-multiselect

buttonTitle & buttonText ignore delimiter length #683