Fix: Recalculate popover position on lazy content #1129
Conversation
Adds a slotchange event handler to the slot in UUIPopoverContainerElement. This ensures the popover updates when its slotted content changes by calling #initUpdate within a requestAnimationFrame.
There was a problem hiding this comment.
Pull Request Overview
This PR enhances UUIPopoverContainerElement by recalculating its position whenever the slot content changes, ensuring the popover stays correctly positioned with lazy-loaded or dynamic content.
- Introduces a private
#onSlotChangemethod that usesrequestAnimationFrameto trigger#initUpdate. - Updates the
rendermethod to attach the@slotchangeevent listener to the<slot>element.
Comments suppressed due to low confidence (2)
packages/uui-popover-container/lib/uui-popover-container.element.ts:354
- [nitpick] Consider adding a brief JSDoc comment above
#onSlotChangeto explain its role in triggering reposition logic when slot content changes.
#onSlotChange() {
packages/uui-popover-container/lib/uui-popover-container.element.ts:361
- There aren’t any tests covering the slotchange handler; consider adding a unit or integration test that simulates slot content updates and verifies
#initUpdateis called.
return html`<slot @slotchange=${this.#onSlotChange}></slot>`;
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-1129.westeurope.azurestaticapps.net |
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-1129.westeurope.azurestaticapps.net |
madsrasmussen
changed the title
|
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-1129.westeurope.azurestaticapps.net |
| protected override firstUpdated(_changedProperties: PropertyValues): void { | ||
| super.firstUpdated(_changedProperties); | ||
|
|
||
| this.#sizeObserver = new ResizeObserver(entries => { |
There was a problem hiding this comment.
Does firstUpdated gets triggerede again when a component has been shortly out of the DOM?
I'm thinking that the sizeObserver gets disconnected on disconnectedCallback, and then I would be afraid that it never sets up the sizeObserver again.
This pull request introduces enhancements to the
UUIPopoverContainerElementclass inpackages/uui-popover-container/lib/uui-popover-container.element.ts. The changes focus on improving responsiveness and handling size changes dynamically by adding aResizeObserver.