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 4 years ago

  Hi ElifKaya

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

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  ElifKaya created 4 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

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  liangshiwei created 4 years ago

  Fullstack Developer

  Hi,

  I will check it.

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  liangshiwei created 4 years ago

  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>
  

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  liangshiwei created 4 years ago

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

  

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  ElifKaya created 4 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.

  

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel