Add KSelect dropdown to the Overlay layer

[AlexVelezLl]

Description

Finally, a robust solution is proposed to the many known issues with the KSelect dropdown by teleporting KSelect dropdown to the Overlay layer using Popper.

Issue addressed

Addresses #324 and #690.

Before/after screenshots

Before	After
If a modal had a long form, it bugged because of the overflowY: unset set because the Modal check for KSelects	Now, we can have scrollables modals even if it has a KSelect inside

Screencast showing the behaviour of KSelect in a long modal:

Compartir.pantalla.-.2024-12-26.16_10_21.mp4

Changelog

• Description: Teleport KSelect dropdown to the Overlay layer using Popper.

• Products impact: bugfix.

• **Addresses:**Kmodal should be able to show dropdowns select without making scrollbars appear #324, Investigate KSelect’s dropdown being displayed above the input in some cases even when there is enough space below #690.

• Components: KSelect.

• Breaking: no

• Impacts a11y: no

• Guidance: -.

• Description: Removes internal KModal calculations to modify its content height if it had a KSelect inside.

• Products impact: bugfix.

• **Addresses:**Kmodal should be able to show dropdowns select without making scrollbars appear #324.

• Components: KModal.

• Breaking: no

• Impacts a11y: no

• Guidance: -.

Steps to test

1. Step 1
2. Step 2
3. ...

(optional) Implementation notes

At a high level, how did you implement this?

I have decided to close the dropdown on scroll, just like the KDropdownMenu, to avoid situations like this:

Otherwise we would need to be querying scrollable ancestors elements, and taking into account the height of any absolute/fixed elements like the topbar to automaticlly close the dropdown.

Does this introduce any tech-debt items?

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical and brittle code paths are covered by unit tests
• The change is described in the changelog section above

Reviewer guidance

• Is the code clean and well-commented?
• Are there tests for this change?
• Are all UI components LTR and RTL compliant (if applicable)?
• Add other things to check for here

Comments

[LianaHarris360]

Thank you for finding a solution to this problem! The code looks good and works correctly in most cases, except on the MyDownloads.vue page. The two dropdown menus aren't showing up, and there's an error message in the console related to the k-overlay element.

Since there are only issues with these two, I'm not entirely sure if changes need to be made in Kolibri or KDS to fix it. I just wanted to mention it in case the problem can be solved in KDS, and if not, it might be considered a breaking change.

Just a quick note: since KModal no longer checks for KSelect, I believe we can remove the comment in lib/KSelect/index.vue that says, "BELOW: KModal targets KeenUiSelect by using div.ui-select selector" on line 11.

[LianaHarris360]

This is just out of curiosity, but how was the debounce time 100ms determined?

[AlexVelezLl]

A 100ms delay is a common choice as it falls within the threshold of the shortest perceivable application response delay, as noted here. Although it will always depend on the context. If we were debouncing a user keyboard typing action, to lets say, trigger an api request after the user has finished typing we would rather use a >300 ms debounce delay depending on the context https://stackoverflow.com/questions/42361485/how-long-should-you-debounce-text-input.

[AlexVelezLl]

Thanks @LianaHarris360! Yes, that was a problem because the KSelect's were being mounted before the DOMContentLoaded event was triggered and by that time, the KOverlay layer werent being mounted yet. This will be fixed when #879 is merged. Will ping Richard again since we had already agreed that this was the best solution :). I will then rebase this PR to have this fixed.

Just a quick note: since KModal no longer checks for KSelect, I believe we can remove the comment in lib/KSelect/index.vue that says, "BELOW: KModal targets KeenUiSelect by using div.ui-select selector" on line 11.

Thanks! Just removed it :)

[AlexVelezLl]

I have just rebased the branch with the fix @LianaHarris360! Could you take another look? :)

[LianaHarris360]

The changes are working as they should and the code logic makes sense, thanks for your work on this! @AlexVelezLl