Refactor #1879

components/lib/autocomplete/AutoComplete.js

@@ -101,7 +101,7 @@ export const AutoComplete = React.memo(React.forwardRef((props, ref) => {
         }
 
         if (!preventInputFocus) {
-            DomHandler.focus(inputRef);
+            DomHandler.focus(inputRef.current);
             hide();
         }
     }
@@ -200,7 +200,7 @@ export const AutoComplete = React.memo(React.forwardRef((props, ref) => {
 
     const onDropdownClick = (event) => {
         if (props.dropdownAutoFocus) {
-            DomHandler.focus(inputRef, props.dropdownAutoFocus);
+            DomHandler.focus(inputRef.current, props.dropdownAutoFocus);
         }
 
         if (props.dropdownMode === 'blank')
@@ -383,7 +383,7 @@ export const AutoComplete = React.memo(React.forwardRef((props, ref) => {
     }
 
     const onMultiContainerClick = (event) => {
-        DomHandler.focus(inputRef);
+        DomHandler.focus(inputRef.current);
 
         props.onClick && props.onClick(event);
     }
@@ -428,7 +428,7 @@ export const AutoComplete = React.memo(React.forwardRef((props, ref) => {
         }
 
         if (props.autoFocus) {
-            DomHandler.focus(inputRef, props.autoFocus);
+            DomHandler.focus(inputRef.current, props.autoFocus);
         }
     });
 
@@ -465,8 +465,8 @@ export const AutoComplete = React.memo(React.forwardRef((props, ref) => {
         });
 
         return (
-            <InputText ref={inputRef} id={props.inputId} type={props.type} name={props.name} defaultValue={value} 
-                role="combobox" aria-autocomplete="list" aria-controls={ariaControls} aria-haspopup="listbox" aria-expanded={overlayVisibleState} 
+            <InputText ref={inputRef} id={props.inputId} type={props.type} name={props.name} defaultValue={value}
+                role="combobox" aria-autocomplete="list" aria-controls={ariaControls} aria-haspopup="listbox" aria-expanded={overlayVisibleState}
                 aria-labelledby={props['aria-labelledby']} aria-label={props['aria-label']}
                 className={className} style={props.inputStyle} autoComplete="off"
                 readOnly={props.readOnly} disabled={props.disabled} placeholder={props.placeholder} size={props.size}
@@ -500,7 +500,7 @@ export const AutoComplete = React.memo(React.forwardRef((props, ref) => {
         return (
             <li className="p-autocomplete-input-token">
                 <input ref={inputRef} type={props.type} disabled={props.disabled} placeholder={props.placeholder}
-                    role="combobox" aria-autocomplete="list" aria-controls={ariaControls} aria-haspopup="listbox" aria-expanded={overlayVisibleState} 
+                    role="combobox" aria-autocomplete="list" aria-controls={ariaControls} aria-haspopup="listbox" aria-expanded={overlayVisibleState}
                     aria-labelledby={props['aria-labelledby']} aria-label={props['aria-label']}
                     autoComplete="off" tabIndex={props.tabIndex} onChange={onInputChange} id={props.inputId} name={props.name}
                     style={props.inputStyle} className={props.inputClassName} maxLength={props.maxLength}

components/lib/calendar/Calendar.js

@@ -122,7 +122,7 @@ export const Calendar = React.memo(React.forwardRef((props, ref) => {
     const reFocusInputField = () => {
         if (!props.inline && inputRef.current) {
             ignoreFocusFunctionality.current = true;
-            DomHandler.focus(inputRef);
+            DomHandler.focus(inputRef.current);
         }
     }
 

components/lib/cascadeselect/CascadeSelect.js

@@ -33,7 +33,7 @@ export const CascadeSelect = React.memo(React.forwardRef((props, ref) => {
 
         updateSelectionPath();
         hide();
-        DomHandler.focus(inputRef);
+        DomHandler.focus(inputRef.current);
     }
 
     const onOptionGroupSelect = (event) => {
@@ -96,7 +96,7 @@ export const CascadeSelect = React.memo(React.forwardRef((props, ref) => {
         }
 
         if (!overlayRef.current || !overlayRef.current.contains(event.target)) {
-            DomHandler.focus(inputRef);
+            DomHandler.focus(inputRef.current);
             overlayVisibleState ? hide() : show();
         }
     }
@@ -154,7 +154,7 @@ export const CascadeSelect = React.memo(React.forwardRef((props, ref) => {
     const hide = () => {
         props.onBeforeHide && props.onBeforeHide();
         setOverlayVisibleState(false);
-        DomHandler.focus(inputRef);
+        DomHandler.focus(inputRef.current);
     }
 
     const onOverlayEnter = () => {

components/lib/checkbox/Checkbox.js

@@ -29,7 +29,7 @@ export const Checkbox = React.memo(React.forwardRef((props, ref) => {
             });
 
             inputRef.current.checked = !checked;
-            DomHandler.focus(inputRef);
+            DomHandler.focus(inputRef.current);
         }
     }
 

components/lib/chips/Chips.js

@@ -66,7 +66,7 @@ export const Chips = React.memo(React.forwardRef((props, ref) => {
     }
 
     const onWrapperClick = () => {
-        DomHandler.focus(inputRef);
+        DomHandler.focus(inputRef.current);
     }
 
     const onKeyDown = (event) => {

components/lib/datatable/RowRadioButton.js

@@ -17,7 +17,7 @@ export const RowRadioButton = React.memo((props) => {
         if (!props.disabled) {
             props.onChange(event);
 
-            DomHandler.focus(inputRef);
+            DomHandler.focus(inputRef.current);
         }
     }
 

components/lib/dropdown/Dropdown.js

@@ -66,7 +66,7 @@ export const Dropdown = React.memo(React.forwardRef((props, ref) => {
             return;
         }
         else if (!overlayRef.current || !(overlayRef.current && overlayRef.current.contains(event.target))) {
-            DomHandler.focus(focusInputRef);
+            DomHandler.focus(focusInputRef.current);
             overlayVisibleState ? hide() : show();
         }
     }
@@ -345,7 +345,7 @@ export const Dropdown = React.memo(React.forwardRef((props, ref) => {
 
         if (!option.disabled) {
             selectItem(event);
-            DomHandler.focus(focusInputRef);
+            DomHandler.focus(focusInputRef.current);
         }
 
         hide();
@@ -550,7 +550,7 @@ export const Dropdown = React.memo(React.forwardRef((props, ref) => {
 
     useMountEffect(() => {
         if (props.autoFocus) {
-            DomHandler.focus(focusInputRef, props.autoFocus);
+            DomHandler.focus(focusInputRef.current, props.autoFocus);
         }
     });
 

components/lib/dropdown/DropdownPanel.js

@@ -25,7 +25,7 @@ export const DropdownPanel = React.memo(React.forwardRef((props, ref) => {
     const onEntered = () => {
         props.onEntered(() => {
             if (props.filter && props.filterInputAutoFocus) {
-                DomHandler.focus(filterInputRef, false);
+                DomHandler.focus(filterInputRef.current, false);
             }
         });
     }
@@ -101,7 +101,7 @@ export const DropdownPanel = React.memo(React.forwardRef((props, ref) => {
 
     const createFilterClearIcon = () => {
         if (props.showFilterClear && props.filterValue) {
-            return <i className="p-dropdown-filter-clear-icon pi pi-times" onClick={() => props.onFilterClearIconClick(() => DomHandler.focus(filterInputRef))}></i>
+            return <i className="p-dropdown-filter-clear-icon pi pi-times" onClick={() => props.onFilterClearIconClick(() => DomHandler.focus(filterInputRef.current))}></i>
         }
 
         return null;

components/lib/inputnumber/InputNumber.js

@@ -199,7 +199,7 @@ export const InputNumber = React.memo(React.forwardRef((props, ref) => {
 
     const onUpButtonMouseDown = (event) => {
         if (!props.disabled && !props.readOnly) {
-            props.autoFocus && DomHandler.focus(inputRef, props.autoFocus);
+            props.autoFocus && DomHandler.focus(inputRef.current, props.autoFocus);
             repeat(event, null, 1);
             event.preventDefault();
         }
@@ -252,7 +252,7 @@ export const InputNumber = React.memo(React.forwardRef((props, ref) => {
 
     const onDownButtonMouseDown = (event) => {
         if (!props.disabled && !props.readOnly) {
-            props.autoFocus && DomHandler.focus(inputRef, props.autoFocus);
+            props.autoFocus && DomHandler.focus(inputRef.current, props.autoFocus);
             repeat(event, null, -1);
 
             event.preventDefault();

components/lib/inputswitch/InputSwitch.js

@@ -14,7 +14,7 @@ export const InputSwitch = React.memo(React.forwardRef((props, ref) => {
         }
 
         toggle(event);
-        DomHandler.focus(inputRef);
+        DomHandler.focus(inputRef.current);
 
         event.preventDefault();
     }

components/lib/mention/Mention.js

@@ -203,7 +203,7 @@ export const Mention = React.memo(React.forwardRef((props, ref) => {
     }
 
     const onItemClick = (event, suggestion) => {
-        DomHandler.focus(inputRef);
+        DomHandler.focus(inputRef.current);
         selectItem(event, suggestion);
     }
 
@@ -393,7 +393,7 @@ export const Mention = React.memo(React.forwardRef((props, ref) => {
 
     return (
         <div ref={elementRef} id={props.id} className={className} style={props.style}>
-            <InputTextarea ref={inputRef} id={props.inputId} aria-labelledby={props['aria-labelledby']} aria-label={props['aria-label']} className={inputClassName} style={props.inputStyle} {...inputProps} 
+            <InputTextarea ref={inputRef} id={props.inputId} aria-labelledby={props['aria-labelledby']} aria-label={props['aria-label']} className={inputClassName} style={props.inputStyle} {...inputProps}
                 onFocus={onFocus} onBlur={onBlur} onKeyDown={onKeyDown} onInput={onInput} onKeyUp={onKeyUp} onChange={onChange} />
             {panel}
         </div>

components/lib/multiselect/MultiSelect.js

@@ -84,7 +84,7 @@ export const MultiSelect = React.memo(React.forwardRef((props, ref) => {
             //escape
             case 27:
                 hide();
-                DomHandler.focus(inputRef);
+                DomHandler.focus(inputRef.current);
                 break;
 
             default:
@@ -105,7 +105,7 @@ export const MultiSelect = React.memo(React.forwardRef((props, ref) => {
     const onClick = (event) => {
         if (!props.disabled && !isPanelClicked(event) && !DomHandler.hasClass(event.target, 'p-multiselect-token-icon') && !isClearClicked(event)) {
             overlayVisibleState ? hide() : show();
-            DomHandler.focus(inputRef);
+            DomHandler.focus(inputRef.current);
             event.preventDefault();
         }
     }
@@ -266,7 +266,7 @@ export const MultiSelect = React.memo(React.forwardRef((props, ref) => {
 
     const onCloseClick = (event) => {
         hide();
-        DomHandler.focus(inputRef);
+        DomHandler.focus(inputRef.current);
         event.preventDefault();
         event.stopPropagation();
     }

components/lib/radiobutton/RadioButton.js

@@ -29,7 +29,7 @@ export const RadioButton = React.memo(React.forwardRef((props, ref) => {
             });
 
             inputRef.current.checked = !props.checked;
-            DomHandler.focus(inputRef);
+            DomHandler.focus(inputRef.current);
         }
     }
 

components/lib/terminal/Terminal.js

@@ -12,7 +12,7 @@ export const Terminal = React.memo(React.forwardRef((props, ref) => {
     const isEmitted = React.useRef(false);
 
     const onClick = () => {
-        DomHandler.focus(inputRef);
+        DomHandler.focus(inputRef.current);
     }
 
     const onInputChange = (e) => {

components/lib/treeselect/TreeSelect.js

@@ -52,7 +52,7 @@ export const TreeSelect = React.memo(React.forwardRef((props, ref) => {
 
     const onClick = (event) => {
         if (!props.disabled && (!overlayRef.current || !overlayRef.current.contains(event.target)) && !DomHandler.hasClass(event.target, 'p-treeselect-close')) {
-            DomHandler.focus(focusInputRef);
+            DomHandler.focus(focusInputRef.current);
             overlayVisibleState ? hide() : show();
         }
     }
@@ -170,7 +170,7 @@ export const TreeSelect = React.memo(React.forwardRef((props, ref) => {
         bindOverlayListener();
 
         if (props.filter && props.filterInputAutoFocus) {
-            DomHandler.focus(filterInputRef);
+            DomHandler.focus(filterInputRef.current, props.filterInputAutoFocus);
         }
 
         props.onShow && props.onShow();

components/lib/utils/DomHandler.js

@@ -1,5 +1,3 @@
-import { ObjectUtils } from "./Utils";
-
 export default class DomHandler {
 
     static innerWidth(el) {
@@ -790,13 +788,13 @@ export default class DomHandler {
 
     /**
      * Focus an input element if it does not already have focus.
-     * 
-     * @param {MutableRefObject} inputRef the input reference
+     *
+     * @param {HTMLElement} el a HTML element
      * @param {boolean} scrollTo flag to control whether to scroll to the element, false by default
      */
-    static focus(inputRef, scrollTo) {
-        const preventScroll = ObjectUtils.isEmpty(scrollTo) ? true : !scrollTo;
-        inputRef && inputRef.current && document.activeElement !== inputRef.current && inputRef.current.focus({ preventScroll: preventScroll });
+    static focus(el, scrollTo) {
+        const preventScroll = scrollTo === undefined ? true : !scrollTo;
+        el && document.activeElement !== el && el.focus({ preventScroll });
     }
 
     static getCursorOffset(el, prevText, nextText, currentText) {

components/lib/utils/Utils.d.ts

@@ -66,6 +66,7 @@ export declare class DomHandler {
     static getFocusableElements(el: HTMLElement, selector?: string): any[];
     static getFirstFocusableElement(el: HTMLElement, selector?: string): any;
     static getLastFocusableElement(el: HTMLElement, selector?: string): any;
+    static focus(el: HTMLElement, scrollTo?: boolean): void;
     static getCursorOffset(el: HTMLElement, prevText?: string, nextText?: string, currentText?: string): { top: any; left: any; };
     static invokeElementMethod(el: HTMLElement, methodName: string, arg: any): void;
     static isClickable(el: HTMLElement): boolean;