fix: save focus if target is set while popover is open (#9826)

Author: ugur-vaadin

packages/popover/src/vaadin-popover-overlay.js

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, LitElement } from 'lit';
+import { isElementFocused } from '@vaadin/a11y-base/src/focus-utils.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
@@ -44,6 +45,21 @@ class PopoverOverlay extends PopoverOverlayMixin(
     `;
   }
 
+  /** @protected */
+  updated(props) {
+    super.updated(props);
+
+    if (props.has('restoreFocusNode') && this.opened) {
+      // Save focus to be restored when target is set while opened
+      if (this.restoreFocusNode && isElementFocused(this.restoreFocusNode.focusElement || this.restoreFocusNode)) {
+        this.__focusRestorationController.saveFocus();
+      } else if (!this.restoreFocusNode) {
+        // Do not restore focus when target is cleared while opened
+        this.__focusRestorationController.focusNode = null;
+      }
+    }
+  }
+
   /**
    * @override
    * @protected

packages/popover/test/basic.test.js

@@ -85,6 +85,64 @@ describe('popover', () => {
       await nextUpdate(popover);
       expect(overlay.restoreFocusNode).to.eql(target);
     });
+
+    it('should restore focus when target is set on already opened popover', async () => {
+      // Focus target before opening
+      target.focus();
+
+      // Open popover
+      popover.renderer = (root) => {
+        if (!root.firstChild) {
+          const input = document.createElement('input');
+          root.appendChild(input);
+        }
+      };
+      popover.opened = true;
+      await oneEvent(overlay, 'vaadin-overlay-open');
+
+      // Set target
+      popover.target = target;
+      await nextUpdate(popover);
+
+      popover.querySelector('input').focus();
+
+      // Close popover
+      popover.opened = false;
+      await nextRender();
+
+      expect(document.activeElement).to.equal(target);
+    });
+
+    it('should not restore focus when target is cleared on already opened popover', async () => {
+      // Focus target before opening
+      target.focus();
+
+      // Open popover
+      popover.renderer = (root) => {
+        if (!root.firstChild) {
+          const input = document.createElement('input');
+          root.appendChild(input);
+        }
+      };
+      popover.opened = true;
+      await oneEvent(overlay, 'vaadin-overlay-open');
+
+      // Set target
+      popover.target = target;
+      await nextUpdate(popover);
+
+      popover.querySelector('input').focus();
+
+      // Clear target
+      popover.target = null;
+      await nextUpdate(popover);
+
+      // Close popover
+      popover.opened = false;
+      await nextRender();
+
+      expect(document.activeElement).to.not.equal(target);
+    });
   });
 
   describe('for', () => {