From b5c4a572d9e652a22a1cc44e0c245b3e26c834a5 Mon Sep 17 00:00:00 2001 From: AnotiaWang Date: Sat, 16 Mar 2024 16:04:39 +0800 Subject: [PATCH] fix: dropdown content position fixes #276 --- .../composables/useDropdownClasses.ts | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/src/components/FwbDropdown/composables/useDropdownClasses.ts b/src/components/FwbDropdown/composables/useDropdownClasses.ts index aa0e1c16..df544f0a 100644 --- a/src/components/FwbDropdown/composables/useDropdownClasses.ts +++ b/src/components/FwbDropdown/composables/useDropdownClasses.ts @@ -53,6 +53,26 @@ export function useDropdownClasses (props: UseDropdownClassesProps): { placementStyles.value = placementCalculators[props.placement.value](boundingRect) } + // Watch for changes in the content element, and recalculate placement classes + // to ensure the dropdown is always positioned correctly + const observer = new MutationObserver(() => { + calculatePlacementClasses() + }) + + watch( + props.contentRef, + (value) => { + if (value) { + observer.observe(value, { + childList: true, + subtree: true, + }) + } else { + observer.disconnect() + } + }, + ) + const contentClasses = computed(() => { return classNames( defaultDropdownClasses,