Prime NG - Setting OnFocus on p-dropdown makes onChange not fire

Question

I'm setting (onFocus) on a p-dropdown like this, when I do it causes the (onChange) event to not fire, the (onFocus) and (onBlur) events fire, but (onChange) does not. There is no error in the console to be able to chase down. Here's the row containing the problem p-dropdown:

<div class="row col-12 pl-0">
              
                <div class="col-6 pl-0">
                  <span class="p-float-label">
                    <!-- For some reason setting the onBlur and onFocus events to show the "Help" text 
                        Makes the onChange event not fire. Hopefully pTooTip will work correctly when we 
                        get Angular and Prime NG updated to the latest version and we won't need these events 
                        on the DropDown -->
                    <p-dropdown
                    (onChange)="showHideForm($event)"
                    [options]="requirementTypeOptions"
                    formControlName="requirementTypeId"
                    optionLabel="requirementTypeName"
                    optionValue="requirementTypeId"
                    placeholder=""
                    [autoDisplayFirst]="false"
                    (onBlur)="isShowHelpSpaceRequirementTypeTxt = !isShowHelpSpaceRequirementTypeTxt"
                    (onFocus)="isShowHelpSpaceRequirementTypeTxt = !isShowHelpSpaceRequirementTypeTxt"
                    ></p-dropdown>
                 <label>Space Requirement Type</label>
                </span>
                </div>
              <div class="column col-6">
                <small *ngIf="isShowHelpSpaceRequirementTypeTxt">
                  <span class="help-section-text">New: </span>New application on site with ground/ interior space required.<br />
                  <span class="help-section-text">Modifications: </span>Existing equipment on site; changes to ground/interior space are required.<br />
                  <span class="help-section-text">No Changes: </span>Existing equipment on site; no changes to ground space / equipment are required.<br />
                  <span class="help-section-text">Not Required:  </span>New application with no ground/ interior space required
                </small>
              </div>
            
            </div>

Later on in the form, I do the exact same thing, and it works fine, here's the code for that p-dropdown:

<div class="row col-12 pl-0">
                <div class="col-6 pl-0">
                  <span class="p-float-label">
                    <p-dropdown
                    [options]="cabinetInstallationTypeOptions"
                    formControlName="cabinetInstallationTypeId"
                    optionLabel="cabinetInstallationTypeName"
                    optionValue="cabinetInstallationTypeId"
                    placeholder=""
                    [autoDisplayFirst]="false"
                    (onBlur)="isShowHelpCabinetInstallationTypeTxt = !isShowHelpCabinetInstallationTypeTxt"
                    (onFocus)="isShowHelpCabinetInstallationTypeTxt = !isShowHelpCabinetInstallationTypeTxt"
                    (onChange)="showHideForm($event)"
                    >
                    </p-dropdown>
                   <label>Cabinet Installation Type</label>
                  </span>
                </div>
                <div class="col-6">
                  <small *ngIf="isShowHelpCabinetInstallationTypeTxt">
                    Select cabinet installation type here.<br />
                    <b><u>Ground Pad: </u></b>Concrete pad on ground<br />
                    <b><u>Ground Platform: </u></b>Platform above grade<br />
                    <b><u>Interior Tenant Space:  </u></b>Space inside Vertical Bridge building.<br />
                    <b><u>Tenant Shelter: </u></b>New tenant owned shelter<br />
                    <b><u>Wall Mount (Tenant Space): </u></b>Space on wall in Vertical Bridge building
                  </small>
                </div>
              
              </div>

Here's the really weird part... If I set the (onBlur) and (onFocus) actions of the first p-dropdown to do the actions of the second p-dropdown, all the events fire and work as expected.

I tried moving the order of the events in the p-dropdown elements. (just trying anything here, no matter how silly it sounds)

I tried moving the entire row to another spot in the form. Did not work.

I tried duplicating the entire row to another spot in the form, leaving the original row in place, the p-dropdown in the duplicate row worked as expected, the p-dropdown in the original row did not.

I tried moving the (onBlur) and (onFocus) actions of the problem p-dropdown into a function. Did not work.

I tried using a different boolean to show/hide the problem p-dropdown help text in (onFocus) and (onBlur) did not work.

Edit - I created a Stackblitz sample but it works fine. https://stackblitz.com/edit/github-pk6cfq?file=src%2Fapp%2Fapp.component.html

I'm currently working with version "primeng": "^14.2.2"

We can't upgrade this project until we remove: "@angular/flex-layout": "^14.0.0-beta.38"
because of dependencies. And pTooltip doesn't work right.

I'm wondering if that is the issue