fix: hide context-menu overlay until rendered (#9329)

Author: sissbruecker

packages/context-menu/src/vaadin-context-menu-mixin.js

@@ -215,7 +215,7 @@ export const ContextMenuMixin = (superClass) =>
      */
     _onVaadinOverlayOpen() {
       this.__alignOverlayPosition();
-      this._overlayElement.style.opacity = '';
+      this._overlayElement.style.visibility = '';
       this.__forwardFocus();
     }
 
@@ -403,7 +403,8 @@ export const ContextMenuMixin = (superClass) =>
           this.__y = this._getEventCoordinate(e, 'y');
           this.__pageYOffset = window.pageYOffset;
 
-          this._overlayElement.style.opacity = '0';
+          // Hide overlay until it is fully rendered and positioned
+          this._overlayElement.style.visibility = 'hidden';
           this._setOpened(true);
         }
       }

packages/context-menu/test/overlay.test.js

@@ -63,10 +63,10 @@ describe('overlay', () => {
     it('should be invisible before open', async () => {
       menu.openOn = 'foobar';
       fire(menu.listenOn, 'foobar', { x: 5, y: 5, sourceEvent: { clientX: 10, clientY: 20 } });
-      expect(window.getComputedStyle(overlay).opacity).to.eql('0');
+      expect(window.getComputedStyle(overlay).visibility).to.eql('hidden');
 
       await oneEvent(overlay, 'vaadin-overlay-open');
-      expect(window.getComputedStyle(overlay).opacity).to.eql('1');
+      expect(window.getComputedStyle(overlay).visibility).to.eql('visible');
     });
 
     it('should be visible when open', async () => {

packages/menu-bar/test/sub-menu.test.js

@@ -125,7 +125,7 @@ describe('sub-menu', () => {
 
   it('should focus the first item on overlay arrow down after open on click', async () => {
     buttons[0].click();
-    await nextRender();
+    await oneEvent(subMenuOverlay, 'vaadin-overlay-open');
     const overlay = subMenuOverlay.$.overlay;
     const item = subMenuOverlay.querySelector('vaadin-menu-bar-item');
     const spy = sinon.spy(item, 'focus');
@@ -135,7 +135,7 @@ describe('sub-menu', () => {
 
   it('should focus the last item on overlay arrow up after open on click', async () => {
     buttons[0].click();
-    await nextRender();
+    await oneEvent(subMenuOverlay, 'vaadin-overlay-open');
     const overlay = subMenuOverlay.$.overlay;
     const items = subMenuOverlay.querySelectorAll('vaadin-menu-bar-item');
     const last = items[items.length - 1];
@@ -237,7 +237,7 @@ describe('sub-menu', () => {
     let item = subMenuOverlay.querySelector('vaadin-menu-bar-item');
     await nextRender();
     arrowLeft(item);
-    await nextRender();
+    await oneEvent(subMenuOverlay, 'vaadin-overlay-open');
     item = subMenuOverlay.querySelector('vaadin-menu-bar-item');
     const spy = sinon.spy(item, 'focus');
     arrowDown(buttons[2]);