PrimeNG: I'm unable to insert characters into a text field. p-inputtext (inside a p-columnfilterformelement )

Question

Using the PrimeNG components I am trying to filter values in a table column using a p-columnFilter component. The Table is inside a modal. My code is as follows:

<th>
    <div class="flex justify-content-center align-items-center">
        Sample
        <p-columnFilter type="text" field="sample" display="menu">
        </p-columnFilter>
    </div>
</th>

When I activate the menu, I am unable to enter any text into the input within the PrimeNg-generated menu:

<input type="text" pinputtext="" class="p-inputtext p-component ng-star-inserted">

Although the input is highlighted, no characters can be entered. It appears that the input is enabled but I am cannot type anything into it.

Answer 1

I found a solution and am going to share it in the hopes of helping someone else who is having the same issue. The problem was with the modal, not with the input. The following is the CSS for the modal that fixes the problem:

.modal-dialog{
    position:absolute !important;
}