Implement a dropdownParent feature

[zoglo]

Description

The implementation would allow specifying a dropdownParent and if provided, all dropdowns would be appended to it. Additionally, each dropdown is still positioned absolute to the parent (I scratched the idea of position: fixed in favor of following the KISS principle and positioning calculation).

This would implement and fix the following:

• dropdown visibility height #930
• Behaviour of dropout elements on mobile device #1131
• Dropdown parent must be configurable to avoid overflows #1288
• Dropdown - Body appendTo option #1309
• What's the equivalent to Select2's DropdownParent: 'body in Choices? #1340

This isn't a feature I need right now (not in the next release and I don't really want to delay that one 🙈), but I experimented with implementing it. It still requires significant selector adjustments for the CSS to work correctly (currently, dropdown styles aren’t fully applied).

Maybe someone else might want to build on this functionality in the future. This PR could serve as a head start and provide some documentation for that purpose.

Screenshots (if appropriate)

Types of changes

• Chore (tooling change or documentation change)
• Refactor (non-breaking change which maintains existing functionality)
• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist

• My code follows the code style of this project.
• I have added new tests for the bug I fixed/the new feature I added.
• I have modified existing tests for the bug I fixed/the new feature I added.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.

[Xon]

@zoglo I've merged in the most recent main and fixed the unit tests. I can definitely see that the showDropdown() changes look rather raw

[zoglo]

@zoglo I've merged in the most recent main and fixed the unit tests. I can definitely see that the showDropdown() changes look rather raw

They are raw, I know. Afair, it needed more work on the positioning, the CSS + keyboard navigation.
It definitely isn't a task that is done in a few minutes.

But thanks for checking out @Xon

[zoglo]

@zoglo I've merged in the most recent main and fixed the unit tests. I can definitely see that the showDropdown() changes look rather raw

Should look less raw now :')

[Xon]

I'm not sure why the merge reports CI action is failing, but I'll aim to test this PR at the end of this week or early next week

[bravopdv]

I managed to get Choices.js working perfectly inside a table (or any container) with overflow-x: auto without the dropdown being cut off.
Previously, the dropdown was trapped by the container's stacking context. By using the new CSS Anchor Positioning API, we can "teleport" the dropdown using position: fixed while keeping it visually glued to the input.
References:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/anchor-name

Use anchor to set the dropdown position:

.choices {
    /* anchor-name: --choices-anchor !important; */
}

.choices__list--dropdown {
    position: fixed !important;
    /* position-anchor: --choices-anchor !important; */
    top: anchor(bottom) !important;
    left: anchor(left) !important;
    width: anchor-size(width) !important;
}

For now, make sure it has this config:

const instance = new Choices($el[0], {
    position: 'bottom',
});

If you need multiple instances:

const uniqueId = `anchor-${Math.random().toString(36).substring(2, 9)}`;

const container = instance.containerOuter.element;
container.style.anchorName = `--${uniqueId}`;

const dropdown = container.querySelector('.choices__list--dropdown');
if (dropdown) dropdown.style.positionAnchor = `--${uniqueId}`;

Maybe it works without the position: 'bottom' limitation (not tested):

@position-try --flip-upward {
    top: auto;
    bottom: anchor(top);
}

.choices__list--dropdown {
    position-try-fallbacks: --flip-upward;
}

[zoglo]

Might be a good idea once it's baseline in like 2 years 🤔

[Xon]

@zoglo Can you rebase on the latest main? I've gotten npm publishing working and it required changing some of the dev dependencies and workflows

[zoglo]

@Xon should be done now, something went wrong when rebasing the first time

[Xon]

@zoglo I've done a first pass review and it looks ok. But can you write some e2e tests (ie using playwright) to explore the use of this feature and confirm it is working as expected?

[Xon]

I plan to get a v11.2.2 bugfix release out, and then I'll look to include this for a v11.3.0 release

[tnelson0406]

eagerly awaiting this feature :)