Skip to content

Commit

Permalink
fix(overflow-menu): position jumping (#11448)
Browse files Browse the repository at this point in the history
### Related Ticket(s)

Closes #9827 

### Description

the `refBottom` needs to be compared to the `containerTop`, so that the menu sticks to the bottom of button

Example (using local `yarn pack`:
https://codesandbox.io/p/devbox/test-overflowmenu-t4slfp?file=%2F.codesandbox%2Ftasks.json%3A1%2C241
live demo: https://t4slfp-9000.csb.app/
### Changelog

**New**

- {{new thing}}

**Changed**

- changed `refBottom` to a let and then equal `refBottom = refBottom - containerTop;`
- ^ wondering if this can be cleaned up code wise, but testing locally with overflow-menu it seems successful

**Removed**

- {{removed thing}}

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
  • Loading branch information
ariellalgilmore authored Jan 31, 2024
1 parent d960696 commit 1adb618
Showing 1 changed file with 3 additions and 2 deletions.
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* @license
*
* Copyright IBM Corp. 2019, 2023
* Copyright IBM Corp. 2019, 2024
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
Expand Down Expand Up @@ -187,14 +187,15 @@ abstract class CDSFloatingMenu extends HostListenerMixin(
left: refLeft = 0,
top: refTop = 0,
right: refRight = 0,
bottom: refBottom = 0,
} = triggerPosition;
let { bottom: refBottom = 0 } = triggerPosition;
const { width, height } = this.getBoundingClientRect();
const {
left: containerLeft = 0,
right: containerRight = 0,
top: containerTop = 0,
} = container.getBoundingClientRect();
refBottom = refBottom - containerTop;

const containerComputedStyle =
container.ownerDocument!.defaultView!.getComputedStyle(container);
Expand Down

0 comments on commit 1adb618

Please sign in to comment.