Select2 in modal: impossible to input text to search in

Home Forums Porto Admin – Responsive HTML5 Template Select2 in modal: impossible to input text to search in

  • This topic has 6 replies, 2 voices, and was last updated 1 week, 1 day ago by manugi. This post has been viewed 94 times
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #10042655
    manugi
    Participant

    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
    #10042656
    Support
    Keymaster

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

    Thanks.


    #10042661
    manugi
    Participant

    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


    #10042662
    Support
    Keymaster

    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.


    #10042664
    manugi
    Participant

    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


    #10042665
    Support
    Keymaster
    This reply has been marked as private.
    #10042666
    manugi
    Participant

    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


Viewing 7 posts - 1 through 7 (of 7 total)