Click is not handled in Clarity data grid filter

[derkoe]

Current behavior

The click() on the filter icon on a Clarity data grid will not trigger a click event.

Desired behavior

cy.get(".datagrid-filter-toggle").first().click(); should trigger the click event and open the filter dialog

Test code to reproduce

describe('Clarity filter', () => {
  it('can be opened and closed', () => {
    cy.visit('https://clarity.design/documentation/datagrid/built-in-filters')
    cy.get(".datagrid-filter-toggle").first().scrollIntoView();
    cy.get(".datagrid-filter-toggle").first().click();
    cy.get(".datagrid-filter-close-wrapper > .clr-smart-close-button").click();
  })
});

Repository: https://github.com/derkoe/cypress-clarity-datagrid-issue

Cypress Version

10.11.0

Node version

v16.18.1

Operating System

Linux

Debug Logs

Debug log was too big - I commited it into the repository:
https://github.com/derkoe/cypress-clarity-datagrid-issue/blob/909739e582bbfb899427068dcd981290bd9ace67/debug.log

Other

The event handler is an Angular @HostListener - here is the code https://github.com/vmware-clarity/ng-clarity/blob/15caf8e81fc46e49a8189aa6cf46c9cc49449a45/projects/angular/src/utils/popover/popover-open-close-button.ts#L31

[derkoe]

It also does not work when you change the code to:

    cy.document().then((doc) => doc.querySelector(".datagrid-filter-toggle").click());

but it works when you trigger the click twice (one time via .click() and one time via the DOM):

    cy.get(".datagrid-filter-toggle").first().click();
    cy.document().then((doc) => doc.querySelector(".datagrid-filter-toggle").click());

[marktnoonan]

Thanks for reporting this, I see you have a workaround for now. Not a very satisfying one though.

I'm routing this to the e2e team to investigate further, since you've provided a consistent reproduction.

Notes from my debugging:

• options passed to click like force: true or position had no effect (except Cypress correctly failing the click when position was out of bounds of the element).
• targeting the svg via shadow() had no effect,
• got some strange results attempting to type into the button to attempt to fire the click that way, it appears to try and type into the path inside the svg in the button.

When I modified the DOM to include just a plain text node, we got this result, which seems to say the button itself is not typeable even though it is.

• OP links to some code for @HostListener and at least on the browser side it looks like a regular click handler. I confirmed by adding my own click handler that Cypress clicking on the button does nothing, me clicking the same button fired both the Angular listener and my own that was doing a console log. Hovering the Cypress command log shows the expected element was located and looks like it clicked successfully, but we don't trigger the listeners.

[derkoe]

I found out that sometime the click actually works - which breaks the workaround.

So, I've fixed the workaround with:

  cy.get(".datagrid-filter-toggle").first().click();
  cy.document().then((doc) => {
    if (!doc.querySelector('.datagrid-filter')) {
      doc.querySelector('.datagrid-filter-toggle').click();
    }
  });