Merge pull request #6228 from nitrogenous/focus-on-hover-enhancement

Enhancement focusOnHover Prop
primefaces · Mar 27, 2024 · 4ae9526 · 4ae9526
2 parents 709d5c4 + e7359b7
commit 4ae9526
Show file tree

Hide file tree

Showing 21 changed files with 103 additions and 6 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,2 +1 @@
-//Remove '*' during the development.
-*
+*
diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
@@ -23094,6 +23094,14 @@
                             "default": "",
                             "description": "Reference of the focusable input element."
                         },
+                        {
+                            "name": "focusOnHover",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "When enabled, the focus is placed on the hovered option."
+                        },
                         {
                             "name": "highlightOnSelect",
                             "optional": true,
@@ -35723,6 +35731,14 @@
                             "default": "false",
                             "description": "Use flex layout for the items panel."
                         },
+                        {
+                            "name": "focusOnHover",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "When enabled, the focus is placed on the hovered option."
+                        },
                         {
                             "name": "id",
                             "optional": true,
@@ -37376,6 +37392,14 @@
                             "default": "",
                             "description": "Custom template of filter element."
                         },
+                        {
+                            "name": "focusOnHover",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "When enabled, the focus is placed on the hovered option."
+                        },
                         {
                             "name": "header",
                             "optional": true,
@@ -41405,6 +41429,14 @@
                             "default": "contains",
                             "description": "Defines how the items are filtered, valid values are \"contains\" (default) \"startsWith\", \"endsWith\", \"equals\", \"notEquals\", \"in\", \"notIn\", \"lt\", \"lte\", \"gt\" and \"gte\"."
                         },
+                        {
+                            "name": "focusOnHover",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "When enabled, the focus is placed on the hovered option."
+                        },
                         {
                             "name": "id",
                             "optional": true,

diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js
@@ -1251,9 +1251,9 @@ export const Dropdown = React.memo(
                         onOptionClick={onOptionClick}
                         ptm={ptm}
                         resetFilter={resetFilter}
-                        setFocusedOptionIndex={setFocusedOptionIndex}
-                        firstFocusableElement={<span {...firstHiddenFocusableElementProps}></span>}
-                        lastFocusableElement={<span {...lastHiddenFocusableElementProps}></span>}
+                        changeFocusedOptionIndex={changeFocusedOptionIndex}
+                        firstFocusableElement={<span {...firstHiddenFocusableElementProps} />}
+                        lastFocusableElement={<span {...lastHiddenFocusableElementProps} />}
                         sx={sx}
                     />
                 </div>

diff --git a/components/lib/dropdown/DropdownBase.js b/components/lib/dropdown/DropdownBase.js
@@ -200,6 +200,7 @@ export const DropdownBase = ComponentBase.extend({
         optionDisabled: null,
         optionGroupChildren: 'items',
         selectOnFocus: false,
+        focusOnHover: true,
         autoOptionFocus: false,
         optionGroupLabel: null,
         optionGroupTemplate: null,

diff --git a/components/lib/dropdown/DropdownItem.js b/components/lib/dropdown/DropdownItem.js
@@ -35,6 +35,7 @@ export const DropdownItem = React.memo((props) => {
             className: classNames(option.className, cx('item', { selected, disabled, label, index, focusedOptionIndex, highlightOnSelect })),
             style: props.style,
             onClick: (e) => onClick(e, index),
+            onMouseMove: (e) => props?.onMouseMove(e, index),
             'aria-label': label,
             'aria-selected': selected,
             'data-p-highlight': selected,

diff --git a/components/lib/dropdown/DropdownPanel.js b/components/lib/dropdown/DropdownPanel.js
@@ -14,7 +14,6 @@ export const DropdownPanel = React.memo(
         const mergeProps = useMergeProps();
         const { ptm, cx, sx } = props;
         const context = React.useContext(PrimeReactContext);
-        const virtualScrollerRef = React.useRef(null);
 
         const filterInputRef = React.useRef(null);
         const isEmptyFilter = !(props.visibleOptions && props.visibleOptions.length) && props.hasFilter;
@@ -71,6 +70,12 @@ export const DropdownPanel = React.memo(
             return null;
         };
 
+        const changeFocusedItemOnHover = (event, index) => {
+            if (props.focusOnHover) {
+                props?.changeFocusedOptionIndex?.(event, index);
+            }
+        };
+
         const createGroupChildren = (optionGroup, style) => {
             const groupChildren = props.getOptionGroupChildren(optionGroup);
 
@@ -92,6 +97,7 @@ export const DropdownPanel = React.memo(
                         highlightOnSelect={props.highlightOnSelect}
                         disabled={disabled}
                         onClick={props.onOptionClick}
+                        onMouseMove={changeFocusedItemOnHover}
                         ptm={ptm}
                         cx={cx}
                         checkmark={props.checkmark}
@@ -163,6 +169,7 @@ export const DropdownPanel = React.memo(
                         highlightOnSelect={props.highlightOnSelect}
                         disabled={disabled}
                         onClick={props.onOptionClick}
+                        onMouseMove={changeFocusedItemOnHover}
                         ptm={ptm}
                         cx={cx}
                         checkmark={props.checkmark}

diff --git a/components/lib/dropdown/dropdown.d.ts b/components/lib/dropdown/dropdown.d.ts
@@ -355,6 +355,11 @@ export interface DropdownProps extends Omit<React.DetailedHTMLProps<React.InputH
      * @defaultValue false
      */
     selectOnFocus?: false;
+    /**
+     * When enabled, the focus is placed on the hovered option.
+     * @defaultValue true
+     */
+    focusOnHover?: boolean | undefined;
     /**
      * Whether to focus on the first visible or selected element.
      * @defaultValue false

diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js
@@ -1107,6 +1107,7 @@ export const MultiSelect = React.memo(
                         sx={sx}
                         isUnstyled={isUnstyled}
                         metaData={metaData}
+                        changeFocusedOptionIndex={changeFocusedOptionIndex}
                     />
                 </div>
                 {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} pt={ptm('tooltip')} {...props.tooltipOptions} />}

diff --git a/components/lib/multiselect/MultiSelectBase.js b/components/lib/multiselect/MultiSelectBase.js
@@ -221,6 +221,7 @@ export const MultiSelectBase = ComponentBase.extend({
         filterInputAutoFocus: true,
         filterLocale: undefined,
         selectOnFocus: false,
+        focusOnHover: true,
         autoOptionFocus: false,
         filterMatchMode: 'contains',
         filterPlaceholder: null,

diff --git a/components/lib/multiselect/MultiSelectItem.js b/components/lib/multiselect/MultiSelectItem.js
@@ -67,6 +67,7 @@ export const MultiSelectItem = React.memo((props) => {
             onClick: onClick,
             onFocus: onFocus,
             onBlur: onBlur,
+            onMouseMove: (e) => props?.onMouseMove(e, props.index),
             tabIndex: tabIndex,
             role: 'option',
             'aria-selected': props.selected,

diff --git a/components/lib/multiselect/MultiSelectPanel.js b/components/lib/multiselect/MultiSelectPanel.js
@@ -94,6 +94,12 @@ export const MultiSelectPanel = React.memo(
             return null;
         };
 
+        const changeFocusedItemOnHover = (event, index) => {
+            if (props.focusOnHover) {
+                props?.changeFocusedOptionIndex?.(event, index);
+            }
+        };
+
         const createGroupChildren = (optionGroup, style) => {
             const groupChildren = props.getOptionGroupChildren(optionGroup);
 
@@ -116,6 +122,7 @@ export const MultiSelectPanel = React.memo(
                         template={props.itemTemplate}
                         selected={selected}
                         onClick={props.onOptionSelect}
+                        onMouseMove={changeFocusedItemOnHover}
                         tabIndex={tabIndex}
                         disabled={disabled}
                         className={props.itemClassName}
@@ -194,6 +201,7 @@ export const MultiSelectPanel = React.memo(
                         template={props.itemTemplate}
                         selected={selected}
                         onClick={props.onOptionSelect}
+                        onMouseMove={changeFocusedItemOnHover}
                         tabIndex={tabIndex}
                         disabled={disabled}
                         className={props.itemClassName}

diff --git a/components/lib/multiselect/multiselect.d.ts b/components/lib/multiselect/multiselect.d.ts
@@ -699,6 +699,11 @@ export interface MultiSelectProps extends Omit<React.DetailedHTMLProps<React.Inp
      * @defaultValue false
      */
     selectOnFocus?: false;
+    /**
+     * When enabled, the focus is placed on the hovered option.
+     * @defaultValue true
+     */
+    focusOnHover?: boolean | undefined;
     /**
      * Whether to focus on the first visible or selected element.
      * @defaultValue false

diff --git a/components/lib/orderlist/OrderList.js b/components/lib/orderlist/OrderList.js
@@ -477,6 +477,8 @@ export const OrderList = React.memo(
                     isUnstyled={isUnstyled}
                     ptm={ptm}
                     cx={cx}
+                    changeFocusedOptionIndex={changeFocusedOptionIndex}
+                    {...props}
                 />
             </div>
         );

diff --git a/components/lib/orderlist/OrderListBase.js b/components/lib/orderlist/OrderListBase.js
@@ -100,6 +100,7 @@ export const OrderListBase = ComponentBase.extend({
         moveBottomIcon: null,
         dataKey: null,
         autoOptionFocus: true,
+        focusOnHover: true,
         breakpoint: '960px',
         onChange: null,
         itemTemplate: null,

diff --git a/components/lib/orderlist/OrderListSubList.js b/components/lib/orderlist/OrderListSubList.js
@@ -97,6 +97,12 @@ export const OrderListSubList = React.memo(
             }
         };
 
+        const changeFocusedItemOnHover = (event, index) => {
+            if (props.focusOnHover && props.focused) {
+                props?.changeFocusedOptionIndex?.(index);
+            }
+        };
+
         const createDropPoint = (index, key) => {
             const droppointProps = mergeProps(
                 {
@@ -142,6 +148,7 @@ export const OrderListSubList = React.memo(
                                 draggable: 'true',
                                 onClick: (e) => props.onItemClick({ originalEvent: e, value: item, index: i }),
                                 onMouseDown: props.onOptionMouseDown,
+                                onMouseMove: (e) => changeFocusedItemOnHover(e, i),
                                 onDragStart: (e) => onDragStart(e, i),
                                 onDragEnd: onDragEnd,
                                 className: classNames(props.className, cx('item', { selected, focused })),
@@ -175,6 +182,7 @@ export const OrderListSubList = React.memo(
                                 role: 'option',
                                 onClick: (e) => props.onItemClick({ originalEvent: e, value: item, index: i }),
                                 onMouseDown: props.onOptionMouseDown,
+                                onMouseMove: (e) => changeFocusedItemOnHover(e, i),
                                 className: classNames(props.className, cx('item', { selected, focused })),
                                 'aria-selected': selected,
                                 'data-p-highlight': selected,

diff --git a/components/lib/orderlist/orderlist.d.ts b/components/lib/orderlist/orderlist.d.ts
@@ -176,6 +176,11 @@ export interface OrderListProps extends Omit<React.DetailedHTMLProps<React.HTMLA
      * @defaultValue true
      */
     autoOptionFocus?: boolean | undefined;
+    /**
+     * When enabled, the focus is placed on the hovered option.
+     * @defaultValue true
+     */
+    focusOnHover?: boolean | undefined;
     /**
      * Inline style of the list element.
      */

diff --git a/components/lib/picklist/PickList.js b/components/lib/picklist/PickList.js
@@ -652,6 +652,9 @@ export const PickList = React.memo(
                     sourceFilterIcon={props.sourceFilterIcon}
                     ptm={ptm}
                     cx={cx}
+                    focusedList={focused}
+                    changeFocusedOptionIndex={changeFocusedOptionIndex}
+                    focusOnHover={props.focusOnHover}
                 />
 
                 <PickListTransferControls
@@ -706,6 +709,9 @@ export const PickList = React.memo(
                     targetFilterIcon={props.targetFilterIcon}
                     ptm={ptm}
                     cx={cx}
+                    focusedList={focused}
+                    changeFocusedOptionIndex={changeFocusedOptionIndex}
+                    focusOnHover={props.focusOnHover}
                 />
 
                 {props.showTargetControls && (

diff --git a/components/lib/picklist/PickListBase.js b/components/lib/picklist/PickListBase.js
@@ -115,6 +115,7 @@ export const PickListBase = ComponentBase.extend({
         tabIndex: 0,
         dataKey: null,
         autoOptionFocus: true,
+        focusOnHover: true,
         breakpoint: '960px',
         itemTemplate: null,
         sourceItemTemplate: null,

diff --git a/components/lib/picklist/PickListItem.js b/components/lib/picklist/PickListItem.js
@@ -57,6 +57,7 @@ export const PickListItem = React.memo((props) => {
             onKeyDown,
             onFocus,
             onMouseDown,
+            onMouseMove: props.onMouseMove,
             role: 'option',
             'aria-selected': props.selected,
             'data-p-highlight': props.selected,

diff --git a/components/lib/picklist/PickListSubList.js b/components/lib/picklist/PickListSubList.js
@@ -57,6 +57,12 @@ export const PickListSubList = React.memo(
             return null;
         };
 
+        const changeFocusedItemOnHover = (index) => {
+            if (props.focusOnHover && props.focusedList[props.type]) {
+                props?.changeFocusedOptionIndex?.(index, props.type);
+            }
+        };
+
         const createItems = () => {
             if (props.list) {
                 return props.list.map((item, index) => {
@@ -76,6 +82,7 @@ export const PickListSubList = React.memo(
                             onClick={props.onItemClick}
                             onKeyDown={props.onItemKeyDown}
                             onMouseDown={(event) => props.onOptionMouseDown({ ...event, index, type: props.type })}
+                            onMouseMove={() => changeFocusedItemOnHover(index)}
                             ptm={ptm}
                             cx={cx}
                         />

diff --git a/components/lib/picklist/picklist.d.ts b/components/lib/picklist/picklist.d.ts
@@ -264,6 +264,11 @@ export interface PickListProps {
      * @defaultValue true
      */
     autoOptionFocus?: boolean | undefined;
+    /**
+     * When enabled, the focus is placed on the hovered option.
+     * @defaultValue true
+     */
+    focusOnHover?: boolean | undefined;
     /**
      * Inline style of the element.
      */