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

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

* fix: update tests to get input element from the overlay

* fix: add missing oneEvent import

---------

Co-authored-by: Ugur Saglam <106508695+ugur-vaadin@users.noreply.github.com>

Author: web-padawan

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 { css, 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';
@@ -107,6 +108,21 @@ class PopoverOverlay extends PopoverOverlayMixin(DirMixin(ThemableMixin(PolylitM
       </div>
     `;
   }
+
+  /** @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;
+      }
+    }
+  }
 }
 
 defineCustomElement(PopoverOverlay);

packages/popover/test/basic.test.js

@@ -1,5 +1,5 @@
 import { expect } from '@vaadin/chai-plugins';
-import { esc, fixtureSync, nextRender, nextUpdate, outsideClick } from '@vaadin/testing-helpers';
+import { esc, fixtureSync, nextRender, nextUpdate, oneEvent, outsideClick } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import './not-animated-styles.js';
 import '../vaadin-popover.js';
@@ -91,6 +91,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);
+
+      overlay.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);
+
+      overlay.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', () => {