Select2 in modal: impossible to input text to search in

[manugi]

Hello, I updated Porto Admin to version 4.1.0 but now it’s impossible to enter a text in a Select2 input to search between the values contained in the select.
Please note that the Select2 is in a standard Bootstrap modal popup (not in a Magnific Popup) and the problem appears only in simple Select2: if I use a Select2 multiple the search between the values is working correctly. I already deleted the tabindex=”-1″ attribute.

Can you help me please?

Thank you in advance and best regards,
Emanuele Giglio

---

Template Version: 4.1.0

[Support]

Hello, sorry about that issue, can you please send me the HTML code you used to reproduce that problem?

Thanks.

---

[manugi]

Hello, this is a sample of the code I used:

<a class="modal-with-form mb-1 mt-1 mr-1 btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalPersoneIncontriReteA" href="#">Nuovo incontro di rete <i class="fas fa-plus"></i></a>

<div class="modal" data-focus="false" id="modalPersoneIncontriReteA" role="dialog">
	<div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
		<form id="frmPersoneIncontriReteA" action="" class="form-horizontal" method="post" name="frmPersoneIncontriReteA">
			<div class="modal-content">
				<div class="modal-header alert-primary">
					<h4 class="modal-title">Aggiungi un incontro di rete</h4>
				</div>
				<div class="modal-body">
					<div class="form-group row pb-3">
						<label class="col-sm-3 control-label" for="persona_incontro_rete_rete_id_a">Assistente sociale <span class="required">*</span></label>
						<div class="col-sm-9">
							<select data-plugin-selectTwo class="form-control populate" id="persona_incontro_rete_assistente_sociale_id_a" name="persona_incontro_rete_assistente_sociale_id_a" required>
							<?php while ($rec_assistenti_sociali_a = mysqli_fetch_array($rst_assistenti_sociali_a)) { ?>
							<option value="<?php echo $rec_assistenti_sociali_a["assistente_sociale_id"]; ?>"><?php echo $rec_assistenti_sociali_a["assistente_sociale_cognome_nome"] . " (" . $rec_assistenti_sociali_a["ente_descrizione"] . ")"; ?></option>
							<?php } ?>
							</select>
						</div>
					</div>
					<div class="form-group row pb-3">
						<label class="col-sm-3 control-label" for="persona_incontro_rete_dipendenti_id_a">Educatori <span class="required">*</span></label>
						<div class="col-sm-9">
							<select data-plugin-selectTwo class="form-control populate" id="persona_incontro_rete_dipendenti_id_a" multiple="multiple" name="persona_incontro_rete_dipendenti_id_a" required>
							<?php while ($rec_dipendenti_a = mysqli_fetch_array($rst_dipendenti_a)) { ?>
							<option value="<?php echo $rec_dipendenti_a["dipendente_id"]; ?>"><?php echo $rec_dipendenti_a["dipendente_nome"] . " " . $rec_dipendenti_a["dipendente_cognome"]; ?></option>
							<?php } ?>
							</select>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="submit" class="mb-1 mt-1 mr-1 btn btn-primary" id="btnAggiuntaIncontroRete">Aggiungi</button>
					<button type="reset" class="mb-1 mt-1 mr-1 btn btn-default">Cancella le modifiche</button>
					<button type="button" class="btn btn-default modal-dismiss" data-bs-dismiss="modal">Annulla</button>
				</div>
			</div>
		</form>
	</div>
</div>

As I said, please note that the second select (multiple) is focusable and working correctly but not the first.

Thank you again and regards,
Emanuele

---

[Support]

Hello, my suggestion to avoid any conflict is that you remove the auto initialization attribute in the select and initialize it manually passing the options:

HTML:

<select class="form-control populate" id="persona_incontro_rete_assistente_sociale_id_a" name="persona_incontro_rete_assistente_sociale_id_a" required>
...

JS:
(js/custom.js)

$('#persona_incontro_rete_assistente_sociale_id_a').select2({
	theme: 'bootstrap',
	dropdownParent: $('#modalPersoneIncontriReteA')
});

Hope that helps.

---

[manugi]

Hello,
no, I’m sorry but your solution doesn’t work. I tried to put the code you sent to me in the js/custom.js file or in the page itself but the result is the same. I think there is another sort of problem related to the version 5.2.3 of Bootstrap because i tried to restore the old Bootstrap version 5.0.2 and it works like a charm without your hack.

If there is no problem to the other parts of the website, can I keep the 5.0.2 Bootstrap version?

Thanks again,
Emanuele

---

[Support]

This reply has been marked as private.

[manugi]

Hello,
I tested your solution in a separate page and it works well but it doesn’t work in my real project, I don’t know why.
Anyway I fount another solution. I added the following code to the select2:

data-dropdown-parent="#modalName

e.g:

<select data-dropdown-parent="#modalName" data-plugin-selectTwo class="form-control populate" id="persona_incontro_rete_assistente_sociale_id_a" name="persona_incontro_rete_assistente_sociale_id_a" required>
....
</select>

and it works fine.

It’s a huge work to add this piece of code because I have a thousand of select in my project, but it’s the faster solution and it works with the latest Bootstrap release even when I give a random name to the modals and select2.

Thank you for your help,
Emanuele

---

[Author]

Posts