msyavuz commented on code in PR #43966:
URL: https://github.com/apache/superset/pull/43966#discussion_r3957210995
##########
superset-frontend/packages/superset-ui-core/src/components/DropdownContainer/DropdownContainer.tsx:
##########
@@ -330,7 +330,16 @@ export const DropdownContainer = forwardRef(
min-width: 0px;
`}
data-test="container"
- style={style}
+ style={
+ recalculating
+ ? {
+ ...style,
+ // Clamp the transient all-items row to the wrapper width.
+ maxWidth: width,
Review Comment:
`width` defaults to `0` until the first ResizeObserver callback, so if items
change before that fires the row is clamped to `0px` and everything overflows
until the `width > previousWidth` branch re-expands it. Unlikely for
user-driven cross-filters, but `maxWidth: width || undefined` is a free guard.
##########
superset-frontend/packages/superset-ui-core/src/components/DropdownContainer/DropdownContainer.test.tsx:
##########
@@ -178,3 +179,55 @@ test('component renders and functions without throwing
errors', () => {
// Basic functionality test
expect(screen.getByText('Element 1')).toBeInTheDocument();
});
+
+test('clamps the item row to the wrapper width while remeasuring', () => {
+ const resizeRef = { current: null as HTMLDivElement | null };
+ jest.spyOn(resizeDetector, 'useResizeDetector').mockReturnValue({
+ ref: resizeRef,
+ width: 300,
+ });
+
+ let measuredWithClamp = false;
+ const getBoundingClientRect: (this: HTMLElement) => DOMRect = function () {
+ const isItemRow = this.dataset.test === 'container';
+ if (isItemRow && this.children.length === 4) {
+ expect(this).toHaveStyle({
+ maxWidth: '300px',
+ overflow: 'hidden',
+ });
+ measuredWithClamp = true;
+ }
+
+ const itemNumber = isItemRow
+ ? 0
+ : Number(this.textContent?.match(/Element (\d+)/)?.[1]);
+ const right = itemNumber ? itemNumber * 100 : 250;
Review Comment:
The row's `right` is 250 whether or not it's clamped, so this proves the
inline style is present at measure time but not that the index is computed
against the clamped edge (the result is 2 either way). Intended scope, or
should the row rect return `min(content, wrapper - button)`?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
