Fix #1879: Input focus() should not scroll unless autoFocus=true (#2787)

* Fix #1879: Input focus() should not scroll unless autoFocus=true * Fix #1879: Input focus() should not scroll unless autoFocus=true * Fix #1879: Input focus() should not scroll unless autoFocus=true * Fix #1879: Input focus() should not scroll unless autoFocus=true * Fix #1879: Input focus() should not scroll unless autoFocus=true
primefaces · Jul 6, 2022 · 41b4279 · 41b4279
1 parent 899422f
commit 41b4279
Show file tree

Hide file tree

Showing 16 changed files with 49 additions and 37 deletions.
diff --git a/components/lib/autocomplete/AutoComplete.js b/components/lib/autocomplete/AutoComplete.js
@@ -101,7 +101,7 @@ export const AutoComplete = React.memo(React.forwardRef((props, ref) => {
         }
 
         if (!preventInputFocus) {
-            inputRef.current.focus();
+            DomHandler.focus(inputRef);
             hide();
         }
     }
@@ -200,7 +200,7 @@ export const AutoComplete = React.memo(React.forwardRef((props, ref) => {
 
     const onDropdownClick = (event) => {
         if (props.dropdownAutoFocus) {
-            inputRef.current.focus();
+            DomHandler.focus(inputRef, props.dropdownAutoFocus);
         }
 
         if (props.dropdownMode === 'blank')
@@ -383,7 +383,7 @@ export const AutoComplete = React.memo(React.forwardRef((props, ref) => {
     }
 
     const onMultiContainerClick = (event) => {
-        inputRef.current.focus();
+        DomHandler.focus(inputRef);
 
         props.onClick && props.onClick(event);
     }
@@ -427,8 +427,8 @@ export const AutoComplete = React.memo(React.forwardRef((props, ref) => {
             setIdState(UniqueComponentId());
         }
 
-        if (props.autoFocus && inputRef.current) {
-            inputRef.current.focus();
+        if (props.autoFocus) {
+            DomHandler.focus(inputRef, props.autoFocus);
         }
     });
 

diff --git a/components/lib/calendar/Calendar.js b/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;
-            inputRef.current.focus();
+            DomHandler.focus(inputRef);
         }
     }
 

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

diff --git a/components/lib/checkbox/Checkbox.js b/components/lib/checkbox/Checkbox.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useUpdateEffect } from '../hooks/Hooks';
 import { Tooltip } from '../tooltip/Tooltip';
-import { classNames, IconUtils, ObjectUtils } from '../utils/Utils';
+import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils';
 
 export const Checkbox = React.memo(React.forwardRef((props, ref) => {
     const [focusedState, setFocusedState] = React.useState(false);
@@ -29,7 +29,7 @@ export const Checkbox = React.memo(React.forwardRef((props, ref) => {
             });
 
             inputRef.current.checked = !checked;
-            inputRef.current.focus();
+            DomHandler.focus(inputRef);
         }
     }
 

diff --git a/components/lib/chips/Chips.js b/components/lib/chips/Chips.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { KeyFilter } from '../keyfilter/KeyFilter';
 import { Tooltip } from '../tooltip/Tooltip';
-import { classNames, ObjectUtils } from '../utils/Utils';
+import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
 
 export const Chips = React.memo(React.forwardRef((props, ref) => {
     const [focusedState, setFocusedState] = React.useState(false);
@@ -66,7 +66,7 @@ export const Chips = React.memo(React.forwardRef((props, ref) => {
     }
 
     const onWrapperClick = () => {
-        inputRef.current.focus();
+        DomHandler.focus(inputRef);
     }
 
     const onKeyDown = (event) => {

diff --git a/components/lib/datatable/RowRadioButton.js b/components/lib/datatable/RowRadioButton.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { classNames } from '../utils/Utils';
+import { classNames, DomHandler } from '../utils/Utils';
 
 export const RowRadioButton = React.memo((props) => {
     const [focusedState, setFocusedState] = React.useState(false);
@@ -17,7 +17,7 @@ export const RowRadioButton = React.memo((props) => {
         if (!props.disabled) {
             props.onChange(event);
 
-            inputRef.current.focus();
+            DomHandler.focus(inputRef);
         }
     }
 

diff --git a/components/lib/dropdown/Dropdown.js b/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))) {
-            focusInputRef.current.focus();
+            DomHandler.focus(focusInputRef);
             overlayVisibleState ? hide() : show();
         }
     }
@@ -345,7 +345,7 @@ export const Dropdown = React.memo(React.forwardRef((props, ref) => {
 
         if (!option.disabled) {
             selectItem(event);
-            focusInputRef.current.focus();
+            DomHandler.focus(focusInputRef);
         }
 
         hide();
@@ -549,8 +549,8 @@ export const Dropdown = React.memo(React.forwardRef((props, ref) => {
     }, [inputRef, props.inputRef]);
 
     useMountEffect(() => {
-        if (props.autoFocus && focusInputRef.current) {
-            focusInputRef.current.focus();
+        if (props.autoFocus) {
+            DomHandler.focus(focusInputRef, props.autoFocus);
         }
     });
 

diff --git a/components/lib/dropdown/DropdownPanel.js b/components/lib/dropdown/DropdownPanel.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { localeOption } from '../api/Api';
 import { CSSTransition } from '../csstransition/CSSTransition';
 import { Portal } from '../portal/Portal';
-import { classNames, ObjectUtils } from '../utils/Utils';
+import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
 import { VirtualScroller } from '../virtualscroller/VirtualScroller';
 import { DropdownItem } from './DropdownItem';
 
@@ -25,7 +25,7 @@ export const DropdownPanel = React.memo(React.forwardRef((props, ref) => {
     const onEntered = () => {
         props.onEntered(() => {
             if (props.filter && props.filterInputAutoFocus) {
-                filterInputRef.current.focus();
+                DomHandler.focus(filterInputRef, 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(() => filterInputRef.current.focus())}></i>
+            return <i className="p-dropdown-filter-clear-icon pi pi-times" onClick={() => props.onFilterClearIconClick(() => DomHandler.focus(filterInputRef))}></i>
         }
 
         return null;

diff --git a/components/lib/inputnumber/InputNumber.js b/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 && inputRef.current.focus();
+            props.autoFocus && DomHandler.focus(inputRef, 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 && inputRef.current.focus();
+            props.autoFocus && DomHandler.focus(inputRef, props.autoFocus);
             repeat(event, null, -1);
 
             event.preventDefault();

diff --git a/components/lib/inputswitch/InputSwitch.js b/components/lib/inputswitch/InputSwitch.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Tooltip } from '../tooltip/Tooltip';
-import { classNames, ObjectUtils } from '../utils/Utils';
+import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
 
 export const InputSwitch = React.memo(React.forwardRef((props, ref) => {
     const [focusedState, setFocusedState] = React.useState(false);
@@ -14,7 +14,7 @@ export const InputSwitch = React.memo(React.forwardRef((props, ref) => {
         }
 
         toggle(event);
-        inputRef.current.focus();
+        DomHandler.focus(inputRef);
 
         event.preventDefault();
     }

diff --git a/components/lib/mention/Mention.js b/components/lib/mention/Mention.js
@@ -203,7 +203,7 @@ export const Mention = React.memo(React.forwardRef((props, ref) => {
     }
 
     const onItemClick = (event, suggestion) => {
-        inputRef.current.focus();
+        DomHandler.focus(inputRef);
         selectItem(event, suggestion);
     }
 

diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js
@@ -84,7 +84,7 @@ export const MultiSelect = React.memo(React.forwardRef((props, ref) => {
             //escape
             case 27:
                 hide();
-                inputRef.current.focus();
+                DomHandler.focus(inputRef);
                 break;
 
             default:
@@ -105,8 +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();
-            inputRef.current.focus();
-
+            DomHandler.focus(inputRef);
             event.preventDefault();
         }
     }
@@ -267,7 +266,7 @@ export const MultiSelect = React.memo(React.forwardRef((props, ref) => {
 
     const onCloseClick = (event) => {
         hide();
-        inputRef.current.focus();
+        DomHandler.focus(inputRef);
         event.preventDefault();
         event.stopPropagation();
     }

diff --git a/components/lib/radiobutton/RadioButton.js b/components/lib/radiobutton/RadioButton.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Tooltip } from '../tooltip/Tooltip';
-import { classNames, ObjectUtils } from '../utils/Utils';
+import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
 
 export const RadioButton = React.memo(React.forwardRef((props, ref) => {
     const [focusedState, setFocusedState] = React.useState(false);
@@ -29,7 +29,7 @@ export const RadioButton = React.memo(React.forwardRef((props, ref) => {
             });
 
             inputRef.current.checked = !props.checked;
-            inputRef.current.focus();
+            DomHandler.focus(inputRef);
         }
     }
 

diff --git a/components/lib/terminal/Terminal.js b/components/lib/terminal/Terminal.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { TerminalService } from '../terminalservice/TerminalService';
-import { classNames, ObjectUtils } from '../utils/Utils';
+import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
 
 export const Terminal = React.memo(React.forwardRef((props, ref) => {
     const [commandTextState, setCommandTextState] = React.useState('');
@@ -12,7 +12,7 @@ export const Terminal = React.memo(React.forwardRef((props, ref) => {
     const isEmitted = React.useRef(false);
 
     const onClick = () => {
-        inputRef.current.focus();
+        DomHandler.focus(inputRef);
     }
 
     const onInputChange = (e) => {

diff --git a/components/lib/treeselect/TreeSelect.js b/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')) {
-            focusInputRef.current.focus();
+            DomHandler.focus(focusInputRef);
             overlayVisibleState ? hide() : show();
         }
     }
@@ -170,7 +170,7 @@ export const TreeSelect = React.memo(React.forwardRef((props, ref) => {
         bindOverlayListener();
 
         if (props.filter && props.filterInputAutoFocus) {
-            filterInputRef.current.focus();
+            DomHandler.focus(filterInputRef);
         }
 
         props.onShow && props.onShow();

diff --git a/components/lib/utils/DomHandler.js b/components/lib/utils/DomHandler.js
@@ -1,3 +1,5 @@
+import { ObjectUtils } from "./Utils";
+
 export default class DomHandler {
 
     static innerWidth(el) {
@@ -786,6 +788,17 @@ export default class DomHandler {
         return focusableElements.length > 0 ? focusableElements[focusableElements.length - 1] : null;
     }
 
+    /**
+     * Focus an input element if it does not already have focus.
+     * 
+     * @param {MutableRefObject} inputRef the input reference
+     * @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 getCursorOffset(el, prevText, nextText, currentText) {
         if (el) {
             let style = getComputedStyle(el);