Open Closed

use of select2 on abp-modal is broken after version upgraded to v5.1.1 and v5.3.0 from v4.3.3 #3316


User avatar
0
ElifKaya created

Hello,

Select2 error was not fixed, even after upgrading the version to 5.3.0. Can you review our previous question from this link? https://support.abp.io/QA/Questions/2577/use-of-select2-on-abp-modal-is-broken-after-version-upgraded--to-v511

Thanks,

Check the docs before asking a question: https://docs.abp.io/en/commercial/latest/ Check the samples, to see the basic tasks: https://docs.abp.io/en/commercial/latest/samples/index The exact solution to your question may have been answered before, please use the search on the homepage.

If you're creating a bug/problem report, please include followings:

ABP Framework version: v5.3.0

UI type: / MVC /

DB provider: EF Core

Tiered (MVC) or Identity Server Separated (Angular): yes / no

Exception message and stack trace:

Steps to reproduce the issue:"


6 Answer(s)
  • User Avatar
    0
    yasin.hallak.89@gmail.com created

    Hi ElifKaya

    It'solved the problem https://support.abp.io/QA/Questions/2348/Select2-BS5-Modal-Problem

  • User Avatar
    0
    ElifKaya created

    Hi,

    In the CmsKit example, you are using the select component with abp-dynamic-form in a normal html page. We want to use it in abp-modal. Still, I went through your example and tried it as in the CmsKit. Select component it has been enabled. However, we are using different features of select component. We could also add a new item to the select list dynamically as below. But this is working in normal pages but not in abp-modal. But, it is broken after we upgraded ABP version to 5.1.1.

    The component class in your example does not have a new option insert feature. Can you show an example like this? We can also achieve this when we use bootstrap modal instead of abp-modal, but we want to achieve it with abp-modal.

    We actually handled this using multiple ListBoxFor. We can also limit upper as 1. But we still hope to be able to use it as select component as before.

    Thanks

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    I will check it.

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    There is no problem

    customModal.onOpen(function() {
        var modalId = customModal.getModalId() + 'Container';
        $("#customSelect").select2({
            tags: true,
            dropdownParent: $("#" + modalId),
            insertTag: function(data, tag) {
                data.push(tag);
            },
            multiple: "multiple",
            maximumSelectionLength:1
        });
    })
    
    <select class="custom-select form-control" id="customSelect" asp-items="@Model.SelectListItems" title="Custom select"></select>
    
  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    If you don't want to set multiple and maximumSelectionLength

    You can try this:

    customModal.onOpen(function() {
        var modalId = customModal.getModalId() + 'Container';
        $("#customSelect").select2({
            tags: true,
            dropdownParent: $("#" + modalId +" .modal.fade"),
            insertTag: function(data, tag) {
                data.push(tag);
            }
        });
    });
    

  • User Avatar
    0
    ElifKaya created

    If you don't want to set multiple and maximumSelectionLength

    You can try this:

    customModal.onOpen(function() { 
        var modalId = customModal.getModalId() + 'Container'; 
        $("#customSelect").select2({ 
            tags: true, 
            dropdownParent: $("#" + modalId +" .modal.fade"), 
            insertTag: function(data, tag) { 
                data.push(tag); 
            } 
        }); 
    }); 
    

    Actually, we were using it as in the first example and we were getting an error. It fixed when I Adding ".modal.fade" as you showed. Thank you so much.

Made with ❤️ on ABP v9.1.0-preview. Updated on December 12, 2024, 07:15