Popover & Tooltip: focus reference element on tab if it's focusable (#9990)

packages/popover/src/main.vue

@@ -84,7 +84,13 @@ export default {
       popper.setAttribute('tabindex', 0);
 
       if (this.trigger !== 'click') {
-        on(reference, 'focusin', this.handleFocus);
+        on(reference, 'focusin', () => {
+          this.handleFocus();
+          const instance = reference.__vue__;
+          if (instance && instance.focus) {
+            instance.focus();
+          }
+        });
         on(popper, 'focusin', this.handleFocus);
         on(reference, 'focusout', this.handleBlur);
         on(popper, 'focusout', this.handleBlur);

packages/tooltip/src/main.js

@@ -117,7 +117,18 @@ export default {
       this.$el.setAttribute('tabindex', 0);
       on(this.referenceElm, 'mouseenter', this.show);
       on(this.referenceElm, 'mouseleave', this.hide);
-      on(this.referenceElm, 'focus', this.handleFocus);
+      on(this.referenceElm, 'focus', () => {
+        if (!this.$slots.default || !this.$slots.default.length) {
+          this.handleFocus();
+          return;
+        }
+        const instance = this.$slots.default[0].componentInstance;
+        if (instance && instance.focus) {
+          instance.focus();
+        } else {
+          this.handleFocus();
+        }
+      });
       on(this.referenceElm, 'blur', this.handleBlur);
       on(this.referenceElm, 'click', this.removeFocusing);
     }