Datagrid table header cell becomes focused when typing in an input element that updates table records

[camhom]

Describe the bug

Unexpected focusing of the datagrid table cell header is occuring when using @clr/angular 17.2.1

How to reproduce

1. Click on datagrid header table cell
2. Type in an input element which filters the rows of data being used in a datagrid
3. Observe focus change onto clarity design column header when rows change, effectively losing focus on the input field.

Expected behavior

Input element should still be in focus

Versions

Clarity version: "@cds/core": "6.13.0", "@clr/angular": "17.2.1", "@clr/ui": "17.2.1",

Framework version: Angular 17

Device:

• Type: Desktop
• OS: Windows 11
• Browser: Microsoft Edge
• Version: 128.0.2739.54 (Official build) (64-bit)

Additional notes

The bug is not in 17.1.x, which indicates that it was either introduced in 17.2.0 or 17.2.1.

[kevinbuhmann]

If this is a duplicate of #355, I think the workaround is to apply a fixed height to your datagrid.

[camhom]

To clarify this is not a duplicate of #355. The input field that I've referring to is an input element which is outside of the datagrid component. This input uses (ngModelChange) to trigger updates to the list of record rows being provided to the datagrid. i.e. A custom global filter input control.

Here's some chicken scratch code for clarification (for example purposes only, code logic may be incorrect):

example.component.html

<input clrInput
       placeholder="Global Table Filter"
       name="globalFilter"
       [ngModel]="globalFilter$ | async"
       (ngModelChange)="setGlobalFilter($event)">

<clr-datagrid (clrDgRefresh)="onRefresh($event)">
  <clr-dg-column></clr-dg-column>
  ...
  <clr-dg-row *clrDgItems="let row of rows || []">
  ...
  </clr-dg-row>
  ...
</clr-datagrid>       

example.component.ts

setGlobalFilter(value: string) {
  // Do filter logic
  this.rows = this._rows.filter(r => r === value)
}

[kevinbuhmann]

Thanks for that! I have created a reproduction: https://stackblitz.com/edit/3lryrf?file=src%2Fapp%2Fexample.component.ts,src%2Fapp%2Fexample.component.html

[kevinbuhmann]

I can confirm that this was introduced in v17.2.0.

[Jinnie]

It should still be the same root reason as in https://github.com/vmware-clarity/ng-clarity/issues/355 Any manipulation on the datagrid data, that triggers datagrid refresh would end the same.

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.