fix(datagrid): keep filter overlay open while typing

[dtsanevmw]

Removing the scroll listener right before filter change resolves the issue. Also realigning it with the correct position when the height is changed.

PR Checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)
• If applicable, have a visual design approval

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• Other... Please describe:

What is the current behavior?

When typing in a filter overlay and the items in a datagrid get filtered in lower number, then the height of datagrid changes and depending of the position in the page it triggers a scroll event which closes the filter.

Issue Number: CDE-8, #355

What is the new behavior?

No longer closes on typing.

Does this PR introduce a breaking change?

• Yes
• No

Other information

[github-actions]

👋 @dtsanevmw,

• 🙏 The Clarity team thanks you for opening a pull request
• 🎉 The build for this PR has succeeded
• 🔍 The PR is now ready for review
• 🍿 In the meantime, view a preview of this PR
• 🖐 You can always follow up here. If you're a VMware employee, you can also reach us on our internal #clarity-support Slack channel

Thank you,

🤖 Clarity Release Bot

[kevinbuhmann]

I think fix(datagrid): keep filter overlay open while typing would be a better PR title/commit message.

[kevinbuhmann]

I looked into this a bit more. I think this solution works, but it's "hacky" and likely to be difficult to maintain.

The root issue that the height of the datagrid is sometimes changed when filtering. It's inconsistent because it happens on the page linked in #355 but not in our Storybook. We should fix that bug instead so that the scroll doesn't happen in the first place instead of working around one bug to fix another.

[dtsanevmw]

I got back to that PR and basically we have 2 states of the datagrid. If we have pagination and page size ( items per page ) then we automatically set a height for the whole datagrid and that issue is not appearing. Although when there is no pagination and page size then we don't set that and basically the height of the datagrid can change based on the items inside. So now with the update when we don't have a page size we listen for filter changes and stop listening for scroll events while aligning the popover to it's new position.

[github-actions]

This PR introduces visual changes: 5b29bb7
If these changes are intended and correct, please cherry-pick the above commit to this PR.

git checkout dtsanevmw/cde-8
git fetch https://github.com/vmware-clarity/ng-clarity.git 5b29bb73e9780ce9d4cf64207597cfc3b714b53c
git cherry-pick 5b29bb73e9780ce9d4cf64207597cfc3b714b53c
git push

[dtsanevmw]

Will wait the popover refactor #1435 to be merged