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. */