Open Closed

Select2 does not work when there is another static modal in the same page #7910


User avatar
0
yasin.hallak.89@gmail.com created
  • ABP Framework version: v8.2.2
  • UI Type: MVC
  • Database System: EF Core (PostgreSQL) /
  • Tiered (for MVC) or Auth Server Separated (for Angular): no
  • Exception message and full stack trace:

On my edit modal which is created by suite I have the folowing select2 element

<div class="mb-3">
                <label class="form-label" asp-for="Cycle.CenterIds">@L["Centers"].Value</label>

                <select asp-for="Cycle.CenterIds"
                        class="auto-complete-select"
                        multiple="multiple"
                        data-maximum-selection-length="1"
                        data-autocomplete-api-url="/api/app/centers"
                        data-autocomplete-display-property="name"
                        data-autocomplete-value-property="id"
                        data-autocomplete-items-property="items"
                        data-autocomplete-filter-param-name="filter">
                    @foreach (var center in Model.SelectedCenters)
                    {
                    <option selected value="@center.Value">@center.Text</option>
                    } 
                </select>
                <span class="text-danger field-validation-valid" data-valmsg-for="Cycle.CenterIds" data-valmsg-replace="true"></span>
            </div>

On my Index page I have a static modal :

<abp-modal id="MonthlyReportDateModal" size="Small" static="true">
	<form autocomplete="off">
		<abp-modal-header title="@L["MonthlyReport"].Value"></abp-modal-header>
		<abp-modal-body>
			<div class="d-none">
				<input id="MonthlyReportCycleId" />
			</div>
			<input id="MonthlyReportDate" class="form-control" placeholder="@L["SelectMonth"]" />
		</abp-modal-body>
		<abp-modal-footer buttons="@(AbpModalButtons.Cancel|AbpModalButtons.Save)"></abp-modal-footer>
	</form>
</abp-modal>

On my index.js I Initializaing this static modal

const MonthlyReportDatePSModal = new bootstrap.Modal('#MonthlyReportDateModal');

If I removed the static moda from index.cshtml the select2 works well as expected,

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

1 Answer(s)
  • User Avatar
    0
    liangshiwei created
    Fullstack Developer

    Hi,

    could you please share a minimum reproducible project with me? i will check it thanks.

    shiwei.liang@volosoft.com

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v10.8.0-preview. Updated on September 09, 2026, 11:56
1
ABP Assistant
🔐 You need to be logged in to use the chatbot. Please log in first.