I am new to Playwright and Typescript. I am just trying to click a simple dropdown as part of my automated test but the element doesnt get clicked.

Here is the HTML of the element

”’

<div class="rz-dropdown valid form-control" onmousedown="Radzen.activeElement = null" style="width: 228px; height: 55px; border-radius: 1rem; border: none #6E33FF; background-color: #F3F4F6;" tabindex="101" id="NavPartnerSelector" _bl_f3dcba6d-438e-4553-a61b-d5e840cf68b8=""><!--!-->
        <div class="rz-helper-hidden-accessible"><!--!-->
            <input aria-haspopup="listbox" readonly="" type="text" tabindex="-1" aria-label="wpart_m4qzr9x"><!--!-->
        </div><!--!-->

            <span class="rz-dropdown-label rz-inputtext" style="width:100%;"><!--!-->
                <div class="d-flex align-items-center text-truncate" style="height: 40px; " b-1m6v1ajx9g="">Regus UK</div><!--!-->
            </span><!--!-->
<!--!-->
        <!--!--><div class="rz-dropdown-trigger rz-corner-right">
            <span class="rz-dropdown-trigger-icon  rzi rzi-chevron-down"></span>
        </div>

        <div id="popup-NavPartnerSelector" class="rz-dropdown-panel    " style="display:none; box-sizing: border-box"><!--!-->
            <div class="rz-dropdown-items-wrapper" style="height: 600px; border-radius: 1rem; background-color: white; overflow-anchor: none;"><!--!-->
                    <ul class="rz-dropdown-items rz-dropdown-list" role="listbox" _bl_b330b560-8154-446d-bfc7-a8551e92a826=""><!--!-->
<!--!--><div style="height: 0px; flex-shrink: 0;" _bl_65813d22-3c18-47ee-8ee8-39b7ab1c1a56=""></div><div style="height: 0px; flex-shrink: 0;" _bl_c79bb64a-fe84-4ec3-a8c8-08c08e98f09b=""></div>                    </ul><!--!-->   
            </div><!--!-->
        </div><!--!-->
    </div>

”’

Here is my code to click it

import { Page } from 'playwright';

export default class PMSIntegrations {
private page: Page;

constructor(page: Page) {
    this.page = page;
}

async navigateToIntegrations()
  {
    //click settings dropdown and select Integrations
    const settingsDropdown = await this.page.locator('#NavPartnerSelector');
    settingsDropdown.click();
  }
}

It just says “waiting….” when I step through and doesn’t actually click the element.
What am I doing wrong?

Screenshot below