Datagrid Custom Filters - How to set focus on open?

[mrmokwa]

Is there a way to set the focus inside the custom filter of the datagrid?
I want to set the focus to my input when I open the filter (just like the build-in filters do), but I couldn't find a way to do it.

Added stackblitz for better understanding
https://stackblitz.com/edit/clarity-light-theme-v5-mmpawe?file=src/app/custom-filter/custom-filter.component.ts

Id column uses build-in filter
Name column uses a custom filter

[Jinnie]

Something like this should do:
https://stackblitz.com/edit/clarity-custom-filter-focus-sample?file=src%2Fapp%2Fapp.component.html

Steps:

1. Add focus method on the filter component that sets the focus where you want it
2. Create a <clr-dg-filter (clrDgFilterOpenChange)=... handler in the app template to wire the filter and the open/close event.
3. Create a function in the app component that checks the open event value and calls the focus method on the component, with a short debounce.

(N.B. had to downgrade the angular version for my copy of the demo, as we have some stackblitz issues with the library versioning in V5)

[mrmokwa]

Yes that's exactly what I did:

In the datagrid component:

focus = (op: boolean, ref: any) => (op ? ref.focus() : null);

    <clr-dg-column [clrDgField]="'nome'">
        Nome
        <clr-dg-filter [clrDgFilter]="nome" (clrDgFilterOpenChange)="focus($event, nome)">
            <app-datagrid-filter property="nome" #nome></app-datagrid-filter>
        </clr-dg-filter>
    </clr-dg-column>

In the custom filter:

focus = () => setTimeout(() => this.input.nativeElement.focus(), 0);