Input in an angular modal will not allow me to type

I am trying to create a search on a table inside of a modal, however when the modal opens I am not able to even click in the search input field.

What I am attempting to do is have a list of hospitals. On that list of hospitals, a user has the ability to click a 'detail' view. That detail view will then bring up a dialog box with addtional information and with that, displays a list of departments. Some hospitals have 40 plus departments, thus I would like to add a search box to that so that it helps the users narrow down the view. The following shows what I currently have. If you need more please let me know and I can provide what ever you need.

facility-modal.component.html

<div class="modal-body">
        <div class="row">
            <div class="col-md-12">

                <h3 class="p-0 text-muted">Facility Information</h3>
                <!-- Facility Information -->
                <table class="table table-striped">
                    <tr>
                        <td>Speed Code</td>
                        <td>Address</td>
                        <td>City</td>
                        <td>Phone Number</td>
                    </tr>
                    <tr>
                        <td>{{facility.speedCode}}</td>
                        <td>{{facility.address}}</td>
                        <td>{{facility.city}}</td>
                        <td>{{facility.primaryNumber}}</td>
                    </tr>
                </table>

                <hr class="my-3" />
                <h3 class="p-0 text-muted">Departments</h3>
                <form>
                    <div class="form-group">
                        <input class="form-control" type="text" name="searchText" placeholder="Search departments..."
                               [(ngModel)]="searchText"/>
                    </div>
                </form>
                <table class="table table-striped table-hover">
                    <tr>
                        <td>Name</td>
                        <td>Phone</td>
                        <td>Fax</td>
                        <td>Diversion</td>
                        <td>Diversion Notes</td>
                    </tr>

                    <tr *ngFor="let dept of departments | filter:searchText">
                        <td>{{dept.descr}}</td>
                        <td>{{dept.phone}}</td>
                        <td>{{dept.fax}}</td>
                        <td>{{dept.diversion}}</td>
                        <td>{{dept.diversionNotes}}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

facility-modal.component.ts

import {Component, OnInit, Inject, Optional, Input} from '@angular/core';
import {RescuenetDepartment, RescuenetFacility} from '../../../shared/models/rescuenet-facility.model';
import {RescuenetService} from '../../../shared/services/rescuenet.service';

@Component({
  selector: 'app-facility-modal',
  templateUrl: './facility-modal.component.html',
  styleUrls: ['./facility-modal.component.scss']
})
export class FacilityModalComponent implements OnInit {

  @Input() public facility: RescuenetFacility;
  departments: RescuenetDepartment[];
  searchText;

  constructor(private rescuenetService: RescuenetService) {

  }

  ngOnInit() {
    this.departments = this.rescuenetService.getDepartments(this.facility.id);
    console.log(this.facility);
    console.log(this.departments);
  }
}

This is how I call the modal

facilities.component.ts

    open() {
        const config = {
            keyboard: true,
            class: 'modal-xl',
            initialState: { facility: this.activeRow }
        };
        const modal = this.modalService.show(FacilityModalComponent, config);

Any help would be amazing.

Thanks!

Apologies for answering my own question, however I figured it out and wanted to share.

On my facility-modal.component.html file, I had the top part as

<div class="modal-dialog modal-xl" role="dialog">
    <div class="modal-header">
        <h6 class="modal-title" id="modal-title">
            {{facility.name}}
        </h6>
    </div>

    <div class="modal-body">
        <div class="row">
            <div class="col-md-12">

                <h3 class="p-0 text-muted">Facility Information</h3>
                <!-- Facility Information -->
                <table class="table table-striped">
                    <tr>
                        <td>Speed Code</td>
                        <td>Address</td>
                        <td>City</td>
                        <td>Phone Number</td>
                    </tr>
                    <tr>
                        <td>{{facility.speedCode}}</td>
                        <td>{{facility.address}}</td>
                        <td>{{facility.city}}</td>
                        <td>{{facility.primaryNumber}}</td>
                    </tr>
                </table>

                <hr class="my-3" />
                <h3 class="p-0 text-muted">Departments</h3>
                <form>
                    <div class="form-group">
                        <input class="form-control" type="text" name="searchText" placeholder="Search departments..."
                               [(ngModel)]="searchText" />
                    </div>
                </form>
                <table class="table table-striped table-hover">
                    <tr>
                        <td>Name</td>
                        <td>Phone</td>
                        <td>Fax</td>
                        <td>Diversion</td>
                        <td>Diversion Notes</td>
                    </tr>

                    <tr *ngFor="let dept of departments | filter:searchText">
                        <td>{{dept.descr}}</td>
                        <td>{{dept.phone}}</td>
                        <td>{{dept.fax}}</td>
                        <td>{{dept.diversion}}</td>
                        <td>{{dept.diversionNotes}}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

I removed the class="modal-dialog modal-xl" portion from the top part since I was passing in the the class from the configuration section shown here:

open() {
        const config = {
            keyboard: true,
            class: 'modal-xl',
            initialState: { facility: this.activeRow }
        };
        const modal = this.modalService.show(FacilityModalComponent, config);

Once I removed that, I was able to type in the search and get things working properly. My guess is that I was creating some type of modal on top of another modal, thus resulting in the focus being on the sudo modal on top.

Just thought I would share what I found

Thanks!