From 6ba53ca52d782bb697832ae54bb4d21477ea08a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Mon, 25 Mar 2024 13:48:47 +0300 Subject: [PATCH 1/8] Dropdown Component focusOnHover --- components/lib/dropdown/Dropdown.js | 6 +++--- components/lib/dropdown/DropdownBase.js | 1 + components/lib/dropdown/DropdownItem.js | 3 ++- components/lib/dropdown/DropdownPanel.js | 9 ++++++++- components/lib/dropdown/dropdown.d.ts | 5 +++++ 5 files changed, 19 insertions(+), 5 deletions(-) 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..50e160b252 100644 --- a/components/lib/dropdown/DropdownItem.js +++ b/components/lib/dropdown/DropdownItem.js @@ -39,7 +39,8 @@ export const DropdownItem = React.memo((props) => { 'aria-selected': selected, 'data-p-highlight': selected, 'data-p-focused': focusedOptionIndex === index, - 'data-p-disabled': disabled + 'data-p-disabled': disabled, + onMouseMove: (e) => props?.onMouseMove(e, index) }, getPTOptions('item', { selected, disabled, option, label }) ); diff --git a/components/lib/dropdown/DropdownPanel.js b/components/lib/dropdown/DropdownPanel.js index 2440546c9c..979789e845 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 onMouseMoveChangeHoverItem = (event, index) => { + if (props.focusOnHover) { + props?.changeFocusedOptionIndex?.(event, index); + } + }; + const createGroupChildren = (optionGroup, style) => { const groupChildren = props.getOptionGroupChildren(optionGroup); @@ -95,6 +100,7 @@ export const DropdownPanel = React.memo( ptm={ptm} cx={cx} checkmark={props.checkmark} + onMouseMove={onMouseMoveChangeHoverItem} /> ); }); @@ -166,6 +172,7 @@ export const DropdownPanel = React.memo( ptm={ptm} cx={cx} checkmark={props.checkmark} + onMouseMove={onMouseMoveChangeHoverItem} /> ); } 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 Date: Mon, 25 Mar 2024 14:19:46 +0300 Subject: [PATCH 2/8] MultiSelect component focusOnHover --- components/lib/multiselect/MultiSelect.js | 1 + components/lib/multiselect/MultiSelectBase.js | 1 + components/lib/multiselect/MultiSelectItem.js | 3 ++- components/lib/multiselect/MultiSelectPanel.js | 8 ++++++++ components/lib/multiselect/multiselect.d.ts | 5 +++++ 5 files changed, 17 insertions(+), 1 deletion(-) diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js index 5aad33ae65..f47700d7ba 100644 --- a/components/lib/multiselect/MultiSelect.js +++ b/components/lib/multiselect/MultiSelect.js @@ -1106,6 +1106,7 @@ export const MultiSelect = React.memo( sx={sx} isUnstyled={isUnstyled} metaData={metaData} + changeFocusedOptionIndex={changeFocusedOptionIndex} /> {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..c132363a6b 100644 --- a/components/lib/multiselect/MultiSelectItem.js +++ b/components/lib/multiselect/MultiSelectItem.js @@ -71,7 +71,8 @@ export const MultiSelectItem = React.memo((props) => { role: 'option', 'aria-selected': props.selected, 'data-p-highlight': props.selected, - 'data-p-disabled': props.disabled + 'data-p-disabled': props.disabled, + onMouseMove: (e) => props?.onMouseMove(e, props.index) }, getPTOptions('item') ); diff --git a/components/lib/multiselect/MultiSelectPanel.js b/components/lib/multiselect/MultiSelectPanel.js index f46eb9c95f..f02830f5a9 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 onMouseMoveChangeHoverItem = (event, index) => { + if (props.focusOnHover) { + props?.changeFocusedOptionIndex?.(event, index); + } + }; + const createGroupChildren = (optionGroup, style) => { const groupChildren = props.getOptionGroupChildren(optionGroup); @@ -123,6 +129,7 @@ export const MultiSelectPanel = React.memo( isUnstyled={isUnstyled} ptm={ptm} cx={cx} + onMouseMove={onMouseMoveChangeHoverItem} /> ); }); @@ -201,6 +208,7 @@ export const MultiSelectPanel = React.memo( isUnstyled={isUnstyled} ptm={ptm} cx={cx} + onMouseMove={onMouseMoveChangeHoverItem} /> ); } 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 Date: Mon, 25 Mar 2024 14:38:39 +0300 Subject: [PATCH 3/8] OrderList component focusOnHover --- components/lib/orderlist/OrderList.js | 2 ++ components/lib/orderlist/OrderListBase.js | 1 + components/lib/orderlist/OrderListSubList.js | 12 ++++++++++-- components/lib/orderlist/orderlist.d.ts | 5 +++++ 4 files changed, 18 insertions(+), 2 deletions(-) diff --git a/components/lib/orderlist/OrderList.js b/components/lib/orderlist/OrderList.js index 3f65aba079..921177b779 100644 --- 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} /> ); 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..5f076a6afa 100644 --- a/components/lib/orderlist/OrderListSubList.js +++ b/components/lib/orderlist/OrderListSubList.js @@ -97,6 +97,12 @@ export const OrderListSubList = React.memo( } }; + const onMouseMoveChangeHoverItem = (event, index) => { + if (props.focusOnHover && props.focused) { + props?.changeFocusedOptionIndex?.(index); + } + }; + const createDropPoint = (index, key) => { const droppointProps = mergeProps( { @@ -147,7 +153,8 @@ export const OrderListSubList = React.memo( className: classNames(props.className, cx('item', { selected, focused })), 'aria-selected': selected, 'data-p-highlight': selected, - 'data-p-focused': focused + 'data-p-focused': focused, + onMouseMove: (e) => onMouseMoveChangeHoverItem(e, i) }, getPTOptions(item, 'item') ); @@ -178,7 +185,8 @@ export const OrderListSubList = React.memo( className: classNames(props.className, cx('item', { selected, focused })), 'aria-selected': selected, 'data-p-highlight': selected, - 'data-p-focused': focused + 'data-p-focused': focused, + onMouseMove: (e) => onMouseMoveChangeHoverItem(e, i) }, getPTOptions(item, 'item') ); 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 Date: Mon, 25 Mar 2024 16:03:32 +0300 Subject: [PATCH 4/8] PickList component focusOnHover --- components/lib/picklist/PickList.js | 6 ++++++ components/lib/picklist/PickListBase.js | 1 + components/lib/picklist/PickListItem.js | 3 ++- components/lib/picklist/PickListSubList.js | 7 +++++++ 4 files changed, 16 insertions(+), 1 deletion(-) diff --git a/components/lib/picklist/PickList.js b/components/lib/picklist/PickList.js index a74b599c5e..de7ba1c140 100644 --- 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} /> {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..220e62da2c 100644 --- a/components/lib/picklist/PickListItem.js +++ b/components/lib/picklist/PickListItem.js @@ -60,7 +60,8 @@ export const PickListItem = React.memo((props) => { role: 'option', 'aria-selected': props.selected, 'data-p-highlight': props.selected, - 'data-p-focused': props.focused + 'data-p-focused': props.focused, + onMouseMove: props.onMouseMove }, getPTOptions('item') ); diff --git a/components/lib/picklist/PickListSubList.js b/components/lib/picklist/PickListSubList.js index eba6e2b85a..2b7fc8867d 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 onMouseMoveChangeHoverItem = (index) => { + if (props.focusOnHover && props.focusedList[props.type]) { + props?.changeFocusedOptionIndex?.(index, props.type); + } + }; + const createItems = () => { if (props.list) { return props.list.map((item, index) => { @@ -78,6 +84,7 @@ export const PickListSubList = React.memo( onMouseDown={(event) => props.onOptionMouseDown({ ...event, index, type: props.type })} ptm={ptm} cx={cx} + onMouseMove={() => onMouseMoveChangeHoverItem(index)} /> ); }); From 7070358af6977293e749b8001135d5033a1c1597 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Tue, 26 Mar 2024 14:32:53 +0300 Subject: [PATCH 5/8] Renamed the function name --- components/lib/dropdown/DropdownPanel.js | 6 +++--- components/lib/multiselect/MultiSelectPanel.js | 6 +++--- components/lib/orderlist/OrderListSubList.js | 6 +++--- components/lib/picklist/PickListSubList.js | 4 ++-- 4 files changed, 11 insertions(+), 11 deletions(-) diff --git a/components/lib/dropdown/DropdownPanel.js b/components/lib/dropdown/DropdownPanel.js index 979789e845..7804b715fc 100644 --- a/components/lib/dropdown/DropdownPanel.js +++ b/components/lib/dropdown/DropdownPanel.js @@ -70,7 +70,7 @@ export const DropdownPanel = React.memo( return null; }; - const onMouseMoveChangeHoverItem = (event, index) => { + const changeFocusedItemOnHover = (event, index) => { if (props.focusOnHover) { props?.changeFocusedOptionIndex?.(event, index); } @@ -100,7 +100,7 @@ export const DropdownPanel = React.memo( ptm={ptm} cx={cx} checkmark={props.checkmark} - onMouseMove={onMouseMoveChangeHoverItem} + onMouseMove={changeFocusedItemOnHover} /> ); }); @@ -172,7 +172,7 @@ export const DropdownPanel = React.memo( ptm={ptm} cx={cx} checkmark={props.checkmark} - onMouseMove={onMouseMoveChangeHoverItem} + onMouseMove={changeFocusedItemOnHover} /> ); } diff --git a/components/lib/multiselect/MultiSelectPanel.js b/components/lib/multiselect/MultiSelectPanel.js index f02830f5a9..4ae7e74584 100644 --- a/components/lib/multiselect/MultiSelectPanel.js +++ b/components/lib/multiselect/MultiSelectPanel.js @@ -94,7 +94,7 @@ export const MultiSelectPanel = React.memo( return null; }; - const onMouseMoveChangeHoverItem = (event, index) => { + const changeFocusedItemOnHover = (event, index) => { if (props.focusOnHover) { props?.changeFocusedOptionIndex?.(event, index); } @@ -129,7 +129,7 @@ export const MultiSelectPanel = React.memo( isUnstyled={isUnstyled} ptm={ptm} cx={cx} - onMouseMove={onMouseMoveChangeHoverItem} + onMouseMove={changeFocusedItemOnHover} /> ); }); @@ -208,7 +208,7 @@ export const MultiSelectPanel = React.memo( isUnstyled={isUnstyled} ptm={ptm} cx={cx} - onMouseMove={onMouseMoveChangeHoverItem} + onMouseMove={changeFocusedItemOnHover} /> ); } diff --git a/components/lib/orderlist/OrderListSubList.js b/components/lib/orderlist/OrderListSubList.js index 5f076a6afa..6520d13f82 100644 --- a/components/lib/orderlist/OrderListSubList.js +++ b/components/lib/orderlist/OrderListSubList.js @@ -97,7 +97,7 @@ export const OrderListSubList = React.memo( } }; - const onMouseMoveChangeHoverItem = (event, index) => { + const changeFocusedItemOnHover = (event, index) => { if (props.focusOnHover && props.focused) { props?.changeFocusedOptionIndex?.(index); } @@ -154,7 +154,7 @@ export const OrderListSubList = React.memo( 'aria-selected': selected, 'data-p-highlight': selected, 'data-p-focused': focused, - onMouseMove: (e) => onMouseMoveChangeHoverItem(e, i) + onMouseMove: (e) => changeFocusedItemOnHover(e, i) }, getPTOptions(item, 'item') ); @@ -186,7 +186,7 @@ export const OrderListSubList = React.memo( 'aria-selected': selected, 'data-p-highlight': selected, 'data-p-focused': focused, - onMouseMove: (e) => onMouseMoveChangeHoverItem(e, i) + onMouseMove: (e) => changeFocusedItemOnHover(e, i) }, getPTOptions(item, 'item') ); diff --git a/components/lib/picklist/PickListSubList.js b/components/lib/picklist/PickListSubList.js index 2b7fc8867d..4ca3448f4b 100644 --- a/components/lib/picklist/PickListSubList.js +++ b/components/lib/picklist/PickListSubList.js @@ -57,7 +57,7 @@ export const PickListSubList = React.memo( return null; }; - const onMouseMoveChangeHoverItem = (index) => { + const changeFocusedItemOnHover = (index) => { if (props.focusOnHover && props.focusedList[props.type]) { props?.changeFocusedOptionIndex?.(index, props.type); } @@ -84,7 +84,7 @@ export const PickListSubList = React.memo( onMouseDown={(event) => props.onOptionMouseDown({ ...event, index, type: props.type })} ptm={ptm} cx={cx} - onMouseMove={() => onMouseMoveChangeHoverItem(index)} + onMouseMove={() => changeFocusedItemOnHover(index)} /> ); }); From adbb5bb9c42dab88f94582401cf0aba08e091250 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Tue, 26 Mar 2024 14:36:48 +0300 Subject: [PATCH 6/8] Build API Doc --- .eslintignore | 1 + components/doc/common/apidoc/index.json | 24 ++++++++++++++++++++++++ 2 files changed, 25 insertions(+) create mode 100644 .eslintignore diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000000..72e8ffc0db --- /dev/null +++ b/.eslintignore @@ -0,0 +1 @@ +* diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index 3115eae269..80fab963c2 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, @@ -35497,6 +35505,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, @@ -37150,6 +37166,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, From b30964920d86ec5997320e137dc615199d94de3c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Tue, 26 Mar 2024 14:54:11 +0300 Subject: [PATCH 7/8] Picklist API Update --- components/doc/common/apidoc/index.json | 8 ++++++++ components/lib/picklist/picklist.d.ts | 5 +++++ 2 files changed, 13 insertions(+) diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index 80fab963c2..5e9a31936e 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -41203,6 +41203,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/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. */ From e7359b7a45e66d0212a93fc8f885ec74e0f66d91 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Tue, 26 Mar 2024 15:24:44 +0300 Subject: [PATCH 8/8] Reordered onMouseMove props --- components/lib/dropdown/DropdownItem.js | 4 ++-- components/lib/dropdown/DropdownPanel.js | 4 ++-- components/lib/multiselect/MultiSelectItem.js | 4 ++-- components/lib/multiselect/MultiSelectPanel.js | 4 ++-- components/lib/orderlist/OrderListSubList.js | 8 ++++---- components/lib/picklist/PickListItem.js | 4 ++-- components/lib/picklist/PickListSubList.js | 2 +- 7 files changed, 15 insertions(+), 15 deletions(-) diff --git a/components/lib/dropdown/DropdownItem.js b/components/lib/dropdown/DropdownItem.js index 50e160b252..6f5b841f5d 100644 --- a/components/lib/dropdown/DropdownItem.js +++ b/components/lib/dropdown/DropdownItem.js @@ -35,12 +35,12 @@ 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, 'data-p-focused': focusedOptionIndex === index, - 'data-p-disabled': disabled, - onMouseMove: (e) => props?.onMouseMove(e, index) + 'data-p-disabled': disabled }, getPTOptions('item', { selected, disabled, option, label }) ); diff --git a/components/lib/dropdown/DropdownPanel.js b/components/lib/dropdown/DropdownPanel.js index 7804b715fc..fb669a6499 100644 --- a/components/lib/dropdown/DropdownPanel.js +++ b/components/lib/dropdown/DropdownPanel.js @@ -97,10 +97,10 @@ export const DropdownPanel = React.memo( highlightOnSelect={props.highlightOnSelect} disabled={disabled} onClick={props.onOptionClick} + onMouseMove={changeFocusedItemOnHover} ptm={ptm} cx={cx} checkmark={props.checkmark} - onMouseMove={changeFocusedItemOnHover} /> ); }); @@ -169,10 +169,10 @@ export const DropdownPanel = React.memo( highlightOnSelect={props.highlightOnSelect} disabled={disabled} onClick={props.onOptionClick} + onMouseMove={changeFocusedItemOnHover} ptm={ptm} cx={cx} checkmark={props.checkmark} - onMouseMove={changeFocusedItemOnHover} /> ); } diff --git a/components/lib/multiselect/MultiSelectItem.js b/components/lib/multiselect/MultiSelectItem.js index c132363a6b..d8ad24ad01 100644 --- a/components/lib/multiselect/MultiSelectItem.js +++ b/components/lib/multiselect/MultiSelectItem.js @@ -67,12 +67,12 @@ 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, 'data-p-highlight': props.selected, - 'data-p-disabled': props.disabled, - onMouseMove: (e) => props?.onMouseMove(e, props.index) + 'data-p-disabled': props.disabled }, getPTOptions('item') ); diff --git a/components/lib/multiselect/MultiSelectPanel.js b/components/lib/multiselect/MultiSelectPanel.js index 4ae7e74584..632a7cf66b 100644 --- a/components/lib/multiselect/MultiSelectPanel.js +++ b/components/lib/multiselect/MultiSelectPanel.js @@ -122,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} @@ -129,7 +130,6 @@ export const MultiSelectPanel = React.memo( isUnstyled={isUnstyled} ptm={ptm} cx={cx} - onMouseMove={changeFocusedItemOnHover} /> ); }); @@ -201,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} @@ -208,7 +209,6 @@ export const MultiSelectPanel = React.memo( isUnstyled={isUnstyled} ptm={ptm} cx={cx} - onMouseMove={changeFocusedItemOnHover} /> ); } diff --git a/components/lib/orderlist/OrderListSubList.js b/components/lib/orderlist/OrderListSubList.js index 6520d13f82..d786542bcd 100644 --- a/components/lib/orderlist/OrderListSubList.js +++ b/components/lib/orderlist/OrderListSubList.js @@ -148,13 +148,13 @@ 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 })), 'aria-selected': selected, 'data-p-highlight': selected, - 'data-p-focused': focused, - onMouseMove: (e) => changeFocusedItemOnHover(e, i) + 'data-p-focused': focused }, getPTOptions(item, 'item') ); @@ -182,11 +182,11 @@ 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, - 'data-p-focused': focused, - onMouseMove: (e) => changeFocusedItemOnHover(e, i) + 'data-p-focused': focused }, getPTOptions(item, 'item') ); diff --git a/components/lib/picklist/PickListItem.js b/components/lib/picklist/PickListItem.js index 220e62da2c..fa70279c0f 100644 --- a/components/lib/picklist/PickListItem.js +++ b/components/lib/picklist/PickListItem.js @@ -57,11 +57,11 @@ export const PickListItem = React.memo((props) => { onKeyDown, onFocus, onMouseDown, + onMouseMove: props.onMouseMove, role: 'option', 'aria-selected': props.selected, 'data-p-highlight': props.selected, - 'data-p-focused': props.focused, - onMouseMove: props.onMouseMove + 'data-p-focused': props.focused }, getPTOptions('item') ); diff --git a/components/lib/picklist/PickListSubList.js b/components/lib/picklist/PickListSubList.js index 4ca3448f4b..b15cfe0639 100644 --- a/components/lib/picklist/PickListSubList.js +++ b/components/lib/picklist/PickListSubList.js @@ -82,9 +82,9 @@ 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} - onMouseMove={() => changeFocusedItemOnHover(index)} /> ); });