fix: pointer position when using fixed positioning and custom offset (#…

…5246)
BrightspaceUI · Dec 16, 2024 · 83a09e5 · 83a09e5
1 parent c9244c0
commit 83a09e5
Show file tree

Hide file tree

Showing 4 changed files with 3 additions and 2 deletions.
diff --git a/components/dropdown/dropdown-content-mixin.js b/components/dropdown/dropdown-content-mixin.js
@@ -1134,7 +1134,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			}
 		}
 		if (this.openedAbove) {
-			position.bottom = window.innerHeight - targetRect.top + 8;
+			position.bottom = window.innerHeight - targetRect.top + this._verticalOffset - 8;
 		} else {
 			position.top = targetRect.top + targetRect.height + this._verticalOffset - 7;
 		}

diff --git a/components/dropdown/test/dropdown-content.vdiff.js b/components/dropdown/test/dropdown-content.vdiff.js
@@ -67,6 +67,7 @@ describe('dropdown-content', () => {
 		{ name: 'no-padding-no-pointer', content: html`<d2l-dropdown-content no-padding no-pointer opened>${basicText}</d2l-dropdown-content>` },
 		{ name: 'scroll-bottom-shadow', content: html`<d2l-dropdown-content opened>${scroll}</d2l-dropdown-content>` },
 		{ name: 'vertical-offset', dropdownStyles: { left: '50%' }, content: html`<d2l-dropdown-content vertical-offset="100" opened>${basicText}</d2l-dropdown-content>` },
+		{ name: 'vertical-offset-above', dropdownStyles: { bottom: '30px', left: '50%' }, content: html`<d2l-dropdown-content vertical-offset="100" opened>${basicText}</d2l-dropdown-content>` },
 		{ name: 'vertical-offset-edge', dropdownStyles: { left: '50%' }, content: html`<d2l-dropdown-content vertical-offset="100" opened>${longerText}</d2l-dropdown-content>` },
 		{ name: 'vertical-offset-negative', dropdownStyles: { left: '50%' }, content: html`<d2l-dropdown-content vertical-offset="-25" opened>${blockText}</d2l-dropdown-content>` },
 		{ name: 'boundary-left-below', dropdownStyles: { left: '50%', top: '50%' }, content: html`<d2l-dropdown-content boundary="{&quot;left&quot;:50, &quot;below&quot;:20}" opened>${longerText}</d2l-dropdown-content>` },

diff --git a/...onents/dropdown/test/golden/dropdown-content/chromium/vertical-offset-above.png b/...onents/dropdown/test/golden/dropdown-content/chromium/vertical-offset-above.png
diff --git a/components/popover/popover-mixin.js b/components/popover/popover-mixin.js
@@ -469,7 +469,7 @@ export const PopoverMixin = superclass => class extends superclass {
 		}
 
 		if (this._location === 'block-start') {
-			position.bottom = window.innerHeight - openerRect.top + 8;
+			position.bottom = window.innerHeight - openerRect.top + this._offset - 8;
 		} else {
 			position.top = openerRect.top + openerRect.height + this._offset - 7;
 		}