Fixed #2918 - Improve focus method to Components

src/components/accordion/Accordion.vue

@@ -196,7 +196,7 @@ export default {
         },
         changeFocusedTab(event, element) {
             if (element) {
-                element.focus();
+                DomHandler.focus(element);
 
                 if (this.selectOnFocus) {
                     const index = parseInt(element.parentElement.parentElement.dataset.index, 10);

src/components/autocomplete/AutoComplete.vue

@@ -278,7 +278,7 @@ export default {
             this.overlayVisible = true;
             this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : (this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1);
 
-            isFocus && this.$refs.focusInput.focus();
+            isFocus && DomHandler.focus(this.$refs.focusInput);
         },
         hide(isFocus) {
             const _hide = () => {
@@ -287,7 +287,7 @@ export default {
                 this.overlayVisible = false;
                 this.focusedOptionIndex = -1;
 
-                isFocus && this.$refs.focusInput && this.$refs.focusInput.focus();
+                isFocus && DomHandler.focus(this.$refs.focusInput);
             }
 
             setTimeout(() => { _hide() }, 0); // For ScreenReaders
@@ -446,7 +446,7 @@ export default {
             }
 
             if (!this.overlay || !this.overlay.contains(event.target)) {
-                this.$refs.focusInput.focus();
+                DomHandler.focus(this.$refs.focusInput);
             }
         },
         onDropdownClick(event) {
@@ -456,7 +456,7 @@ export default {
                 this.hide(true);
             }
             else {
-                this.$refs.focusInput.focus();
+                DomHandler.focus(this.$refs.focusInput);
                 query = this.$refs.focusInput.value;
 
                 if (this.dropdownMode === 'blank')
@@ -544,7 +544,7 @@ export default {
 
             if (this.multiple) {
                 if (ObjectUtils.isEmpty(target.value) && this.hasSelectedOption) {
-                    this.$refs.multiContainer.focus();
+                    DomHandler.focus(this.$refs.multiContainer);
                     this.focusedMultipleOptionIndex = this.modelValue.length;
                 }
                 else {
@@ -625,7 +625,7 @@ export default {
 
             if (this.focusedMultipleOptionIndex > (this.modelValue.length - 1)) {
                 this.focusedMultipleOptionIndex = -1;
-                this.$refs.focusInput.focus();
+                DomHandler.focus(this.$refs.focusInput);
             }
         },
         onBackspaceKeyOnMultiple(event) {
@@ -783,7 +783,7 @@ export default {
             this.updateModel(event, value);
             this.$emit('item-unselect', { originalEvent: event, value: removedOption });
             this.dirty = true;
-            this.$refs.focusInput.focus();
+            DomHandler.focus(this.$refs.focusInput);
         },
         changeFocusedOptionIndex(event, index) {
             if (this.focusedOptionIndex !== index) {

src/components/cascadeselect/CascadeSelect.vue

@@ -200,7 +200,7 @@ export default {
                 this.focusedOptionInfo = { index: (this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1), level: 0, parentKey: '' };
             }
 
-            isFocus && this.$refs.focusInput.focus();
+            isFocus && DomHandler.focus(this.$refs.focusInput);
         },
         hide(isFocus) {
             const _hide = () => {
@@ -209,7 +209,7 @@ export default {
                 this.activeOptionPath = [];
                 this.focusedOptionInfo = { index: -1, level: 0, parentKey: '' };
 
-                isFocus && this.$refs.focusInput && this.$refs.focusInput.focus();
+                isFocus && DomHandler.focus(this.$refs.focusInput);
             }
 
             setTimeout(() => { _hide() }, 0); // For ScreenReaders
@@ -305,7 +305,7 @@ export default {
             this.activeOptionPath = activeOptionPath;
 
             grouped ? this.onOptionGroupSelect(originalEvent, processedOption) : this.onOptionSelect(originalEvent, processedOption, isHide);
-            isFocus && this.$refs.focusInput.focus();
+            isFocus && DomHandler.focus(this.$refs.focusInput);
         },
         onOptionSelect(event, processedOption, isHide = true) {
             const value = this.getOptionValue(processedOption.option);
@@ -325,7 +325,7 @@ export default {
 
             if (!this.overlay || !this.overlay.contains(event.target)) {
                 this.overlayVisible ? this.hide() : this.show();
-                this.$refs.focusInput.focus();
+                DomHandler.focus(this.$refs.focusInput);
             }
 
             this.$emit('click', event);

src/components/listbox/Listbox.vue

@@ -187,7 +187,7 @@ export default {
             return (this.optionGroupLabel ? index - this.visibleOptions.slice(0, index).filter(option => this.isOptionGroup(option)).length : index) + 1;
         },
         onFirstHiddenFocus() {
-            this.list.focus();
+            DomHandler.focus(this.list);
 
             const firstFocusableEl = DomHandler.getFirstFocusableElement(this.$el, ':not(.p-hidden-focusable)');
             this.$refs.lastHiddenFocusableElement.tabIndex = ObjectUtils.isEmpty(firstFocusableEl) ? -1 : undefined;
@@ -198,11 +198,11 @@ export default {
 
             if (relatedTarget === this.list) {
                 const firstFocusableEl = DomHandler.getFirstFocusableElement(this.$el, ':not(.p-hidden-focusable)');
-                firstFocusableEl && firstFocusableEl.focus();
+                DomHandler.focus(firstFocusableEl);
                 this.$refs.firstHiddenFocusableElement.tabIndex = undefined;
             }
             else {
-                this.$refs.firstHiddenFocusableElement.focus();
+                DomHandler.focus(this.$refs.firstHiddenFocusableElement);
             }
 
             this.$refs.lastHiddenFocusableElement.tabIndex = -1;

src/components/tabview/TabView.vue

@@ -231,7 +231,7 @@ export default {
         },
         changeFocusedTab(event, element) {
             if (element) {
-                element.focus();
+                DomHandler.focus(element);
                 this.scrollInView({ element });
 
                 if (this.selectOnFocus) {

src/components/utils/DomHandler.js

@@ -503,6 +503,10 @@ export default  {
         return !!(typeof window !== 'undefined' && window.document && window.document.createElement);
     },
 
+    focus(el, options) {
+        el && document.activeElement !== el && el.focus(options);
+    },
+
     getFocusableElements(element, selector = '') {
         let focusableElements = this.find(element, `button:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
                 [href][clientHeight][clientWidth]:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},

src/components/utils/Utils.d.ts

@@ -44,6 +44,7 @@ export declare class DomHandler {
     static invokeElementMethod(el: HTMLElement, methodName: string, args: any): void;
     static isExist(el: HTMLElement): boolean;
     static isClient(): boolean;
+    static focus(el: HTMLElement, options?: FocusOptions): void;
     static getFocusableElements(el: HTMLElement, selector?: string): any[];
     static getFirstFocusableElement(el: HTMLElement, selector?: string): any;
     static isClickable(el: HTMLElement): boolean;