Skip to content

Fix Picker jumping back to mouse position when keyboard off bottom #603

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
Jun 11, 2020
Merged

Fix Picker jumping back to mouse position when keyboard off bottom #603

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
c672c1c
Track if the mouse is moving as opposed to checking focus start
snowystinger Jun 9, 2020
b63eb81
remove unused lines from debugging
snowystinger Jun 9, 2020
8f3efad
Handle disabled case, add comment explaining why I'm doing this, fix …
snowystinger Jun 9, 2020
ede1de6
Merge branch 'master' into fix-picker-jumping-back-to-mouse-position
snowystinger Jun 9, 2020
4aa1093
Use modality instead
snowystinger Jun 9, 2020
bb21e84
fix lint
snowystinger Jun 9, 2020
9cba504
Merge branch 'master' into fix-picker-jumping-back-to-mouse-position
snowystinger Jun 9, 2020
7038a1c
Merge branch 'master' into fix-picker-jumping-back-to-mouse-position
snowystinger Jun 10, 2020
90eef2f
Merge branch 'master' into fix-picker-jumping-back-to-mouse-position
snowystinger Jun 10, 2020
465d319
add same logic to useMenuItem
snowystinger Jun 10, 2020
8ed8c38
Merge branch 'master' into fix-picker-jumping-back-to-mouse-position
snowystinger Jun 11, 2020
58304da
Merge branch 'master' into fix-picker-jumping-back-to-mouse-position
devongovett Jun 11, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 8 additions & 6 deletions packages/@react-aria/listbox/src/useOption.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,10 @@
*/

import {HTMLAttributes, Key, RefObject} from 'react';
import {isFocusVisible, useHover, usePress} from '@react-aria/interactions';
import {ListState} from '@react-stately/list';
import {useHover, usePress} from '@react-aria/interactions';
import {mergeProps, useSlotId} from '@react-aria/utils';
import {useSelectableItem} from '@react-aria/selection';
import {useSlotId} from '@react-aria/utils';

interface OptionAria {
/** Props for the option element. */
Expand Down Expand Up @@ -92,19 +92,21 @@ export function useOption<T>(props: AriaOptionProps, state: ListState<T>, ref: R
});

let {pressProps} = usePress({...itemProps, isDisabled});

let {hoverProps} = useHover({
isDisabled: isDisabled || !shouldFocusOnHover,
onHoverStart() {
state.selectionManager.setFocused(true);
state.selectionManager.setFocusedKey(key);
if (!isFocusVisible()) {
Copy link
Member

@devongovett devongovett Jun 10, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wanna add this to useMenuItem as well?

state.selectionManager.setFocused(true);
state.selectionManager.setFocusedKey(key);
}
}
});

return {
optionProps: {
...optionProps,
...pressProps,
...hoverProps
...mergeProps(pressProps, hoverProps)
},
labelProps: {
id: labelId
Expand Down
11 changes: 6 additions & 5 deletions packages/@react-aria/menu/src/useMenuItem.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,10 @@
*/

import {HTMLAttributes, Key, RefObject} from 'react';
import {isFocusVisible, useHover, usePress} from '@react-aria/interactions';
import {mergeProps, useSlotId} from '@react-aria/utils';
import {PressEvent} from '@react-types/shared';
import {TreeState} from '@react-stately/tree';
import {useHover, usePress} from '@react-aria/interactions';
import {useSelectableItem} from '@react-aria/selection';

interface MenuItemAria {
Expand Down Expand Up @@ -149,16 +149,17 @@ export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, re
let {hoverProps} = useHover({
isDisabled,
onHoverStart() {
state.selectionManager.setFocused(true);
state.selectionManager.setFocusedKey(key);
if (!isFocusVisible()) {
state.selectionManager.setFocused(true);
state.selectionManager.setFocusedKey(key);
}
}
});

return {
menuItemProps: {
...ariaProps,
...pressProps,
...hoverProps
...mergeProps(pressProps, hoverProps)
},
labelProps: {
id: labelId
Expand Down