Facility > Users - The Options drop-down is not functioning correctly when there are multiple users

[pcenov]

Observed behavior

See the video. If there are a lot of users so that there is a scrollbar being displayed and you scroll down when you click the Options drop-down the scrollbar is pushed back up the page and you need to scroll down again to click the Options.

Steps to reproduce the issue

1. Install the latest 0.16 develop build
2. Go to the Facility > Users
3. Scroll down the Users table and click the Options drop-down

Video

https://user-images.githubusercontent.com/79847249/185077713-7d8f73b6-ab97-44d9-af7a-45b4f55e921f.mp4

Usage Details

Windows 10 and Ubuntu 20 - Chrome, Firefox, Edge

[pcenov]

@radinamatic

[Kej-r03]

Hi, I was working on this issue, and I find that the issue is most probably in the KDropdownMenu component, as the same issue is faced elsewhere too where KDropdownMenu is used. But I am unable to locate the file where the component is defined in the codebase. It would be great if you can help me out with its location.

[rtibbles]

@akolson I think you mentioned something on slack that is pertinent to this - do you know how this might be fixed?

[akolson]

@rtibbles yes, I suspect this is the same issue under discussion on slack, just manifesting in a different way. Below is my comment from slack on its potential fix;

Regarding Amelia's comment on positioning of the menu, we could achieve this behavior by adding support for the constrainToScrollParent prop in KDropdownMenu . This is a Keen Ui's UiPopover prop that by default is set to true to prevent overflows. Under the hood, we are using it to support the KDropdownMenu component. I think it would be a good to have an override to the default behavior. Below is a extract from keen UI regarding the prop:

@Kej-r03 for your next steps, you will need to make the fix in Kolibri Design System(KDS), our UI library. Because fixes in KDS are propagated across all platforms, you will need to do the following;

1. Fix and test your changes locally. To test your changes locally, follow the instructions detailed here
2. Once you have successfully resolved the issue locally, proceed to open a pull request and follow the instructions below. Thanks @MisRob for the detailed notes on this.

1. Prepare a Kolibri PR for testing KDS change in Kolibri
2. Updated Kolibri's core/package.json KDS dependency to the last commit of your KDS PR (this will be a commit on your fork, so its URL will be something like https://github.com/<your GH username>/kolibri-design-system#<commit hash>).
3. Run yarn install to update yarn.lock
4. Open a temporary Kolibri PR with updated core/package.json and yarn.lock. Indicate that the PR is only for testing. As an author of KDS changes to be tested, in either of these two related PRs, please mention some areas that may be prone to regression to @radinamatic so that she knows what places to test in Kolibri. Please add @radinamatic as a reviewer of your PR too.
5. Close Kolibri PR after QA

This issue is related to https://github.com/learningequality/kolibri-design-system/issues/432

cc @thanksameeelian

[akolson]

Hi @Kej-r03, Any progress regarding this issue? Incase you are experiencing any blockers, we are happy to help. Thanks

[thanksameeelian]

@pcenov i picked up this issue but have been unable to replicate it. i was wondering if you might be able to re-review the scenario when you have a chance, to see if it's still occurring for you. here's a screen recording of one of my attempts to replicate - if i'm accidentally missing part of the process that's potentially triggering this issue, please let me know 🙂

https://github.com/learningequality/kolibri/assets/43046460/f9fe6172-04c7-433b-85f8-8b343d923724

[pcenov]

@thanksameeelian @radinamatic I'm also no longer able to replicate this one - must have been fixed by some other changes.

[radinamatic]

Closing as not extant anymore! 🚀