Select2 within a modal issues #5486

epiphanybsg created 5 years ago

We have added a Select2 to a modal popup menu which does not allow the user to type or select any options. Almost as if the Z-index is lower than that of the overlay. We resolved the problem by setting the tab index to -1 on the modal, but this disables the ability to close the modal with the escape key.

Here it the relevant code, any ideas on how to keep the escape key functionality?

--------------------------ModalManager.js---------------------------------

function _createContainer(modalId) {
            _removeContainer(modalId);

            var _containerId = modalId + 'Container';
            return $('<div id="' + _containerId + '"></div>')
                .append(
                    '<div id="' + modalId + '" class="modal fade" tabindex="-1" role="modal" aria-hidden="true">' +
                    '  <div class="modal-dialog modal-lg">' +
                    '    <div class="modal-content"></div>' +
                    '  </div>' +
                    '</div>'
                ).appendTo('body');
        }

-----------------------_LocationSelectionModal.cshtml---------------------------

<div class="form-group m-form__group row">
     <label for="LocationSelect" class="col-lg-12">@L("SelectLocation")</label>    
          <div class="col-lg-12">
                <select id="LocationSelect" class="form-control m-select2" style="width:100%;"></select>
          </div>
</div>

<input class="form-control" value="" type="text" name="locationId" required hidden />

-----------------------_LocationSelectionModal.js-----------------------------
(function ($) {
    app.modals.LocationSelectionModal = function () {

        var _ticketsService = abp.services.app.tickets;

        var _modalManager;
        var _$ticketInformationForm = null;

        var _LocationLookupModal = new app.ModalManager({
            viewUrl: abp.appPath + 'Crm/Devices/LocationLookupTableModal',
            scriptUrl: abp.appPath + 'view-resources/Areas/Crm/Views/Devices/_LocationLookupTableModal.js',
            modalClass: 'LocationLookupModal'
        });

        var _serialNumberLookupModal = new app.ModalManager({
            viewUrl: abp.appPath + 'Crm/Devices/SerialNumberLookupModal',
            scriptUrl: abp.appPath + 'view-resources/Areas/Crm/Views/Devices/_SerialNumberLookupModal.js',
            modalClass: 'SerialNumberLookupModal'
        });

        this.init = function (modalManager) {
            _modalManager = modalManager;

			var modal = _modalManager.getModal();            

            _$ticketInformationForm = _modalManager.getModal().find('form[name=TicketInformationsForm]');
            _$ticketInformationForm.validate();
        };

        $('#OpenLocationLookupButton').click(function () {

            var ticket = _$ticketInformationForm.serializeFormToObject();

            _LocationLookupModal.open({ id: ticket.locationId, displayName: ticket.locationName }, function (data) {
                _$ticketInformationForm.find('input[name=locationName]').val(data.device.locationName);
                _$ticketInformationForm.find('input[name=locationId]').val(data.device.locationId);
            });
        });

        $('#ClearLocationNameButton').click(function () {
            _$ticketInformationForm.find('input[name=locationName]').val('');
            _$ticketInformationForm.find('input[name=locationId]').val('');
        });	
		
        $('#OpenSerialNumberLookupButton').click(function () {

            var ticket = _$ticketInformationForm.serializeFormToObject();

            _serialNumberLookupModal.open({ id: ticket.serialNumberId, displayName: ticket.serialNumberName }, function (data) {
                _$ticketInformationForm.find('input[name=serialNumberName]').val(data.device.serialNumber); 
                _$ticketInformationForm.find('input[name=serialNumberId]').val(data.device.id); 
            });
        });
		
        $('#ClearSerialNumberNameButton').click(function () {
                _$ticketInformationForm.find('input[name=serialNumberName]').val(''); 
                _$ticketInformationForm.find('input[name=serialNumberId]').val(''); 
        });		


        this.save = function () {
            if (!_$ticketInformationForm.valid()) {
                return;
            }

            var ticket = _$ticketInformationForm.serializeFormToObject();
        };
    };

    // 
    // select2 initialize
    //    

    $(".m-select2").select2({
        placeholder: 'Jason',
        ajax: {
            url: abp.appPath + "api/services/app/Tickets/GetAllLocationsForLookupTable",
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    searchTerm: params.term, // search term
                    page: params.page
                };
            },
            processResults: function (data, params) {
                params.page = params.page || 1;

                return {
                    results: $.map(data.result, function (item) {
                        return {
                            text: item.name,
                            id: item.value
                        }
                    }),
                    pagination: {
                        more: (params.page * 30) < data.result.length
                    }
                };
            },
            cache: true
        },
        minimumInputLength: 1,
        language: abp.localization.currentCulture.name
    });

})(jQuery);

Select2 within a modal issues #5486

4 Answer(s)