diff --git a/.eslintignore b/.eslintignore
index f9383a07c6..72e8ffc0db 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,2 +1 @@
-//Remove '*' during the development.
-*
\ No newline at end of file
+*
diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
index 40f7b0dd6c..9e0733b909 100644
--- 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
index 19da68f96a..77a7befc25 100644
--- 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={}
- lastFocusableElement={}
+ changeFocusedOptionIndex={changeFocusedOptionIndex}
+ firstFocusableElement={}
+ lastFocusableElement={}
sx={sx}
/>
diff --git a/components/lib/dropdown/DropdownBase.js b/components/lib/dropdown/DropdownBase.js
index 498e0c4722..27369dc56d 100644
--- 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
index b226609ab4..6f5b841f5d 100644
--- 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
index 2440546c9c..fb669a6499 100644
--- 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
index 66e705448e..ff0feb297f 100644
--- a/components/lib/dropdown/dropdown.d.ts
+++ b/components/lib/dropdown/dropdown.d.ts
@@ -355,6 +355,11 @@ export interface DropdownProps extends Omit
{hasTooltip && }
diff --git a/components/lib/multiselect/MultiSelectBase.js b/components/lib/multiselect/MultiSelectBase.js
index a84eb0cc90..ae83183653 100644
--- 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
index 63a21dae8b..d8ad24ad01 100644
--- 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
index f46eb9c95f..632a7cf66b 100644
--- 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
index bc9b4f407b..5c5700e39c 100644
--- a/components/lib/multiselect/multiselect.d.ts
+++ b/components/lib/multiselect/multiselect.d.ts
@@ -699,6 +699,11 @@ export interface MultiSelectProps extends Omit
);
diff --git a/components/lib/orderlist/OrderListBase.js b/components/lib/orderlist/OrderListBase.js
index 0156dcab15..da9e651166 100644
--- 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
index 06f7acdf17..d786542bcd 100644
--- 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
index 3239f88312..8597793541 100755
--- a/components/lib/orderlist/orderlist.d.ts
+++ b/components/lib/orderlist/orderlist.d.ts
@@ -176,6 +176,11 @@ export interface OrderListProps extends Omit
{props.showTargetControls && (
diff --git a/components/lib/picklist/PickListBase.js b/components/lib/picklist/PickListBase.js
index 4d7f413234..2735f84e8c 100644
--- 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
index 4acdf8a178..fa70279c0f 100644
--- 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
index eba6e2b85a..b15cfe0639 100644
--- 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
index 36c825069c..5012283529 100755
--- 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.
*/