fix(select): use host element as portal anchor for positioning

[adrianschmidt-bot]

Summary

Pass the limel-select host element as the anchor prop to the portal, ensuring Popper.js positions the dropdown relative to the select element itself rather than the portal element.

Problem

When a limel-select is placed in a flex row with a taller sibling element:

1. The select stretches to match the sibling's height (default flex behavior)
2. The limel-portal element inside the select's shadow DOM is positioned after other content
3. Popper.js uses the portal element's bounding rect for positioning
4. The dropdown appears offset by the height difference, not directly below the trigger

Solution

By passing the host element (limel-select) as the anchor prop to the portal, Popper.js now positions the dropdown relative to the select element's top edge (where the trigger button is), regardless of how much the select element has stretched due to flex layout.

Regression

• v38.0.0: Dropdown positioned correctly
• v38.48.0: Dropdown offset by adjacent element height

Changes

• Added anchor prop to SelectTemplateProps interface
• Pass anchor prop to limel-portal in MenuDropdown component
• Pass this.host as anchor in Select.render()

Fixes #3858

Summary by CodeRabbit

• Bug Fixes
  • Improved Select dropdown positioning so the menu aligns more reliably with the input outline, reducing visual jitter and misalignment when opening the menu.

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds an optional anchor?: HTMLElement prop to the select template and threads the host element as the anchor through Select → SelectTemplate → MenuDropdown → limel-portal to control dropdown positioning.

Changes

Cohort / File(s)	Summary
Select template & portal wiring src/components/select/select.template.tsx	Added anchor?: HTMLElement to SelectTemplateProps and passed anchor={props.anchor} into MenuDropdown/<limel-portal>.
Select host anchor discovery src/components/select/select.tsx	Added private getAnchorElement(): HTMLElement and supplied its result as the anchor prop when rendering the template.

Sequence Diagram(s)

mermaid
sequenceDiagram
participant Select
participant SelectTemplate
participant MenuDropdown
participant Portal
Select->>SelectTemplate: render(props including anchor)
SelectTemplate->>MenuDropdown: pass anchor prop
MenuDropdown->>Portal: render with anchor
Portal->>Browser: position dropdown relative to anchor

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

• adrianschmidt

🚥 Pre-merge checks | ✅ 6

✅ Passed checks (6 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The pull request title clearly describes the main change: using the host element as the portal anchor for positioning the select dropdown.
Linked Issues check	✅ Passed	The code changes implement the solution described in issue #3858: adding anchor prop to SelectTemplateProps, propagating it through MenuDropdown, and passing the host element as anchor in Select.render().
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the select dropdown positioning issue described in #3858; no out-of-scope modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into main

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

No actionable comments were generated in the recent review. 🎉

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

Documentation has been published to https://lundalogik.github.io/lime-elements/versions/PR-3860/