[clr-datagrid] focus issues when details pane is opened

[alexey-shakura]

Describe the bug

When details pane is open and I'm trying to use my custom search I see focus unstable behaviour – sometimes focus remains on input sometimes itsn't.

How to reproduce

https://stackblitz.com/edit/clarity-light-theme-clr12-cds5-1kpvnx?file=src/app/app.component.ts

Steps to reproduce the behavior:

1. Open details of item 4
2. Type '4' in search
3. The data should be changed.
4. Type '4' again (so final input value would be '44')
5. Notice how focus is lost from the search input

Expected behavior

While I'm using search input I expect to see it on focus

Versions

Clarity project:

• [ ] Clarity Core
• [x] Clarity Angular/UI

Clarity version:

• [ ] v3.x
• [ ] v4.x
• [x] v5.x

Framework:

• [x] Angular
• [ ] React
• [ ] Vue
• [ ] Other:

Framework version: Angular 12

Device:

• Type: MacBook
• OS: macOS
• Browser: chrome
• Version: 98

Additional notes

[Jinnie]

This is a hybrid case between using mouse and keyboard interchangeably. If you are only a keyboard user, you won't be able to escape the detail without closing it. It features a focus trap, so you can safely navigate between the two contexts - the grid and detail. In the same time, the detail is not really modal, as it does not cover and disable interaction with other items on the page. Though the two scenarios - keyboard and mouse are working rather okay, the mixed scenario is not. It is also problematic because you have high chance to filter out the element whose detail you are observing in this moment. I can't think of a solution that does not require overall reconsideration of the focus trap and modality of the current solution. We track A11Y issues internally with our A11Y team and we have issues that address the problems of the dialog modality. I'll link this issue there. Thanks for the feedback.

[alexey-shakura]

@Jinnie I see that we have clrDgDisablePageFocus input, as I understand this is to overcome similar situation – does it makes sense to extend it ?

[Jinnie]

Looking at it more carefully, the scenario is not correct. You are using live, smart datagrid with *clrDgItems. This can be used with static data, which is loaded at once to the datagrid. But you are doing filtering on the initial data. Which is the scenario for a "server-driven" datagrid. With a server-driven datagrid, you have the full control over the presented data, as well as the responsibility to do all sorting, filtering and pagination user-side. Please, check our server-driven docs and update the example to use ngFor instead of clrDgItems and handle the pagination manually. https://angular.clarity.design/documentation/datagrid/server-driven

[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.