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,


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

    Hi,

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

    shiwei.liang@volosoft.com

Made with ❤️ on ABP v9.1.0-preview. Updated on October 11, 2024, 07:13