Filter lose focus while typing

[Silimim]

Describe the bug

We've found out a problem with filters input and modals, after a modal is opened and closed filters lose their focus after keydown.

Observations:
It seems to happens when dataview changes after filtering, if rows do not change, input don't lose focus.

What i've tried:

• Invalidate the grid
• Reinit filter service
• Set display none and after time set back it's display property
• ResizeGrid method from resize service
• Refresh on DataviewObj

Most close solution:
The only workarout i've found is setting filterTypingDebounce: 750 this allows to write more chars, but after debounce end input still lose focus

Reproduction

Steps:

• Open a BSModal from a button in grid
• Close it
• Type something on filters

Expectation

No response

Environment Info

**Versions:**
angular-slickgrid: 7.7.0
angular: 17.3.11

Validations

• Follow our Code of Conduct
• Read the HOWTO - Quick Start.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[ghiscoding]

Well I see that as a normal behavior since you clicked on the button in the grid to open the modal, by doing so, you changed the focus to the cell so yes the filter focus is lost.

[Silimim]

Sorry maybe i didn't describe it well. I meant the problem is after closing the modal. Clicking on filter input. After the first char the filter loses focus.

The gif was a bit too long and dispersive, sorry.

[ghiscoding]

I can't help without a full repro, please use the Stackblitz link provided on the main readme page and modify any of the example to include this problem.

[Silimim]

Sorry for the late response, i'm hardly trying to repro the error but is harder than i thought. It seems some sort of strange interaction between slickgrid and ngx-bootstrap modals.
While trying to repro i've found out that after closing the modal and typing something an element is getting focused.

Which is one of the following two:

Deleting those elements filters focus works as expected after dataview changes.
Now i'm looking for a better way to prevent this. Also trying to make the repro.

EDIT:

Adding this piece of code works but it's a terrible workaround.

modalRef.onHide.subscribe(() => {
   document.getElementById('OffertaFormazionePersoneGridDTO').querySelectorAll('[tabindex="0"]').forEach((el) => {
                    if (!(el.classList.length > 0)) {
                      const copy = el.cloneNode(true);
                      const parent = el.parentNode;
                      el.remove();
                      setTimeout(() => {
                        parent.appendChild(copy);
                      });
                    }
                  });
                });

[ghiscoding]

This seems to be more of an upstream dependency problem unrelated to my project and with this new info, if you search on the ngx-bootstrap project you will find similar issues like these ones

Longer closing time of modals in 18.0.2 affecting Cypress tests
Modal (feat): On close should return focus to launching element

and if you look at some of their implementation on this line of code, you see that they have a setTimeout that runs after the closing with a delay set by the modal transition which is maybe why the focus is lost after a quick time.

So it really looks like this is unrelated to my project and ngx-boostrap is playing with the set focus and after taking a look at the default filter input in Slickgrid-Universal, I don't have any set focus. So again, it all seems to point at ngx-bootstrap being the culprit and stealing the focus, which I certainly don't support, neither want to troubleshoot external libraries. As per the first issue above, maybe give a try to fix your version of ngx-bootstrap at v18.0.0 (not v18.0.2 because of the issue) and/or maybe try to disable the animation and see if that helps... in summary, I more inclined to close this issue since it all seems to point at the upstream (external) dependency

[Silimim]

I'm pretty sure too that one of the main actors of this problem is ngx-bootstrap but there's some things i'm struggling with.

Filters get blurred not after time (waiting 1 to 10 seconds before typing is not different). But exactly when search result is diffrent from initial result.

For example:

In 10 rows, all containing the char 'R' filter is not losing focus.
In 10 rows, only 6/10 containing the char 'R' filter is losing focus.

Also the DOM activeElement is inside anglar-slickgrid DOM element (as mentioned above). And deleting and reinserting it resolve the problem.

Not assuming the problem is Angular-slickgrid (i'm a big fan of this datagrid). Now i'll try with a different version. I'm using Angular 17 so ngx-bootstrap version is 12 (compatibility table)

[ghiscoding]

Well the thing is that you still haven't provided a full repro and if you can't provide a repro then you are unfortunately on your own to debug it. If I take a look at the Slickgrid-Universal inputFilter.ts file, I do have a blur event listener but this listener is shared by these 3 events (blur, keyup, change) and is only meant to trigger the data filtering, I don't have any other trigger to blur away from the filter other than the one I just mentioned.

Going back to the 3 events I mentioned above, adding a breakpoint into that event listener is a bit tricky. You can add a conditional breakpoint as shown in animated gif below and then look at the call stack to find out who or what triggered the blur and if you're lucky it might help. The other bad thing is that Angular Zone.js wraps all events into a ton of wrappers and it's hard to find the actual listener which is why I went directly to the inputFilter file but that might not the actual culprit.

I seriously can't help without a full repro which you did not provide, so unless there's a repro, I will eventually close this issue. This project is provided for (Open Source) but I certainly don't want to lose a ton of time troubleshooting something without a repro (especially when it looks to be caused by something external to the project).

You can also see this SO to guide on how to add a conditional breakpoint
JavaScript :How to set a Conditional Break Point in Chrome debugger tools

[github-actions]

This issue has been automatically closed because there has been no response to our request for code to reproduce the original error by the original author. With only the information that is currently in the issue, we don't have the means to take action. Please reach out if you have or find the answers we need so that we can investigate further.

[ghiscoding]

@Silimim I'm pretty sure that I've fixed this problem in latest release via this Slickgrid-Universal PR fix: input filter loses focus after edit+filtering with enableExcelCopyBuffer. I found that the issue was occurring when enableExcelCopyBuffer was enabled and an edit cell was clicked then typing in a filter would lose its focus after the first character typing. I found this bug in the Example 3 live demo while testing something else.

So the latest release v8.10.2 includes the fix for this issue (assuming this is the same issue which is likely)

[Silimim]

Oh well that's amazing. This may explain me why the repro was not having the same behaviour. I was not event thinking that enableExcelCopyBuffer could be the problem.
Thanks for your work 🤗