Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ContextMenu: fix menu height on async render (T1258881) #28553

Open
wants to merge 1 commit into
base: 24_2
Choose a base branch
from

Conversation

anna-shakhova
Copy link

No description provided.

@@ -531,6 +531,7 @@ class ContextMenu extends MenuBase {

_renderSubmenuItems(node, $itemFrame: dxElementWrapper): void {
this._renderItems(this._getChildNodes(node), $itemFrame);
this._planPostRenderActions();
Copy link
Contributor

@ksercs ksercs Dec 16, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see that this function is called on render in async strategy, so now it's called twice? Doesn't it have side affects?
It's more expected for me if we call it once after everything is rendered

@@ -1130,6 +1133,10 @@ class ContextMenu extends MenuBase {
hide(): Promise<unknown> {
return this.toggle(false);
}

_postProcessRenderItems() {
this._dimensionChanged(false);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks not very logical that we call dimensionChanged after all items are rendered. Cannot we split the code another way? Like extract necessary code from _dimensionChanged to a new method and reuse it here

assert.roughEqual($nestedSubmenuItemsContainer.outerHeight(), $scrollableContainer.outerHeight(), .1);
done();
});

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change

const DX_SCROLLABLE_CONTENT_CLASS = 'dx-scrollable-container';
const DX_MENU_ITEM_CLASS = 'dx-menu-item';

const ITEMS_CONTAINER_PADDING = 1;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now it's not used in the code


const $itemsContainer = instance.itemsContainer();
const $rootItem = $itemsContainer.find(`.${DX_MENU_ITEM_CLASS}`).eq(0);
$($itemsContainer).trigger($.Event('dxhoverstart', { target: $rootItem.get(0) }));
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hover cannot be used on mobile devices. Feel free to do smth like

        if(!isDeviceDesktop(assert)) {
            assert.ok(true, 'not actual for mobile devices');
            return;
        }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants