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

6 Answer(s)

• 

  0

  yasin.hallak.89@gmail.com created 2 years ago

  Hi ElifKaya

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

  Save Cancel
• 

  0

  ElifKaya created 2 years ago

  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

  Save Cancel
• 

  0

  liangshiwei created 2 years ago

  Support Team Fullstack Developer

  Hi,

  I will check it.

  Save Cancel
• 

  0

  liangshiwei created 2 years ago

  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>
  

  Save Cancel
• 

  0

  liangshiwei created 2 years ago

  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);
          }
      });
  });
  

  

  Save Cancel
• 

  0

  ElifKaya created 2 years ago

  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.

  

  Save Cancel