console log error since 2.1.6 and jquery 3.6

[DeltaGM5]

Hello,

I am having an issue with the last version of maggicsuggest 2.1.6; when I click on the area of the selection and click back outside (anywhere on the body of my page) I got this:

Cannot read property 'indexOf' of undefined: => on this part of the code:

$("body").on('click', function (e) { if (ms.container.hasClass('ms-ctn-focus') && ms.container.has(e.target).length === 0 && $(e.target).attr('class').indexOf('ms-res-item') < 0 && this cause the isssue $(e.target).attr('class').indexOf('ms-close-btn') < 0 && ms.container[0] !== e.target) { handlers._onBlur(); } });

Changing this to 2.1.5 version fix my issue:

$("body").click(function(e) { if(ms.container.hasClass('ms-ctn-focus') && ms.container.has(e.target).length === 0 && e.target.className.indexOf('ms-res-item') < 0 && e.target.className.indexOf('ms-close-btn') < 0 && ms.container[0] !== e.target) { handlers._onBlur(); } });

I am running jquery 3.6; Am I missing something? Maybe the error is on my side

Best regards,

[zergioz]

Checking.

[zergioz]

I ran a test with src="https://code.jquery.com/jquery-3.6.0.js" and it worked well with Version: 2.1.6 Can you provide the code snippet that calls the $function? Thanks. <div id="ms1" class="form-control"></div>

$(function() {
        var ms1 = $('#ms1').magicSuggest({
          data: ['New York','Los Angeles','Chicago','Houston','Philadelphia','Phoenix','San Antonio','San Diego','Dallas','San Jose','Jacksonville']
        });
      });

[DeltaGM5]

Hello, thanks for your feedback, looks like its on my side then (good to know); here is my code; Best regards,

jquery 3.6

• jquery migrate 3.3.2

<input name="get_var_demo[]" class="dataupdate dataeditlist" id="termdataspecial" style="background-color:

fff;border-radius:4px;width:650px;height:150px;border: 1px solid #ccc;">

$(function() {

//var demodata = $(this).val(); var dataff = $('#termdataspecial').magicSuggest({ // get element from database; let's say we have 1,2 and 3 as saved values; value: ["1","2","3"], maxSelection: 100, typeDelay: 5, allowFreeEntries: true, queryParam: 'query', placeholder: 'Index', cls: 'update_1', method: 'get', //data: "old_submit.php" //dataUrlParams: {taxo:demodata} } ); // fire after submit, on every change selection $(dataff).on('selectionchange', function(e,m){ var val = this.getValue(); $.ajax({ type: 'GET', url: 'action_after_submit.php', data: { updatedata: val, id: 'id_to_update' }, success: function (data) { // $.notify('Saved', 'success'); } }); });

dataff.setData('some_url_to_get_json'); });

Le mar. 14 sept. 2021 à 15:33, zergioz @.***> a écrit :

I ran a test with src="https://code.jquery.com/jquery-3.6.0.js" and it worked well with Version: 2.1.6 Can you provide the code snippet that calls the $function? Thanks.

$(function() { var ms1 = $('#ms1').magicSuggest({ data: ['New York','Los Angeles','Chicago','Houston','Philadelphia','Phoenix','San Antonio','San Diego','Dallas','San Jose','Jacksonville'] }); });

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Magicsuggest/magicsuggest/issues/351#issuecomment-919155680, or unsubscribe https://github.com/notifications/unsubscribe-auth/AVTYXAWZ3EDKBXDGCRR2DVTUB5FJVANCNFSM5D7KJ6HA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[zergioz]

This works. Check your implementation.

<p class="lead">
    <div id="demodata" class="form-control"></div>
</p>

<script type="text/javascript">
    $(function() {
        var demodata = $('#demodata').magicSuggest({
        data: ["1","2","3"], // This attribute populated by your php script
        maxSelection: 100,
        typeDelay: 5,
        allowFreeEntries: true,
        queryParam: 'query',
        placeholder: 'Index',
        cls: 'update_1',
        method: 'get',
        });
    });
 </script>

[DeltaGM5]

can you try this html? I got jquery error in console log when i try to go out of the selection (only when its in an html table) if i remove the table, all is working fine on last version.. <table> <tr> <td> <p class="lead"> <div id="demodata" class="form-control">

[zergioz]

That works too, but the field resizes on selection- you need to fix that issue or use divs. I do not get any console errors. I think you might need to clean up your JS.

[DeltaGM5]

Visualy, all looks good. In order to reproduce the bug you need to click on the select and then click back outside anywhere in the body (then jquery error in console log) . I will upload an exemple on live soon. Removing the table fix the bug..

Le mer. 15 sept. 2021 à 08:48, zergioz @.***> a écrit :

That works too, but the field resizes on selection- you need to fix that issue or use divs.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Magicsuggest/magicsuggest/issues/351#issuecomment-919746872, or unsubscribe https://github.com/notifications/unsubscribe-auth/AVTYXAUP7BKF5MRMZZMJ4VTUCA6TFANCNFSM5D7KJ6HA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[zergioz]

I am closing this issue.