Skip to content
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.

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

adding state to track if user is on keyboard to control hover & focus… #652

Merged
merged 2 commits into from Oct 22, 2018

Conversation

hsbacot
Copy link
Contributor

@hsbacot hsbacot commented Oct 12, 2018

Related issues

Fixes https://meetup.atlassian.net/browse/MG-3117

Description

Tracks keyboard usage in state to apply styles based on index when navigating through the list only when a keyboard is used.

@hsbacot hsbacot requested a review from mmcgahan October 12, 2018 15:25
};

class Dropdown extends React.PureComponent<Props, State> {
state = {
isActive: this.props.isActive || false,
isKeyPressed: true,
Copy link
Contributor

Choose a reason for hiding this comment

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

should this be initialized to true? code comment to explain this choice?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I initialized it to have the same shape as State, false would be a better choice

@@ -100,6 +102,9 @@ class Dropdown extends React.PureComponent<Props, State> {
this.closeContent(e);
}, 0);
}
this.setState({
isKeyPressed: true,
});
Copy link
Contributor

Choose a reason for hiding this comment

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

total nitpick, but you can make this a little tighter on one line

this.setState({ isKeyPressed: true });

@@ -122,6 +127,12 @@ class Dropdown extends React.PureComponent<Props, State> {
}
};

onMouseLeave = (e: SyntheticMouseEvent<*>) => {
Copy link
Contributor

Choose a reason for hiding this comment

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

do you need to define the e arg here? i.e. does eslint or flow warn if you skip it? If not, I'd leave it out

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It's not required since it isn't used

@hsbacot hsbacot merged commit c2ad5c2 into master Oct 22, 2018
@chenrui333 chenrui333 deleted the MG-3117_dropdown_hover_styling_removed_on_mouse_leave branch September 16, 2019 21:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
2 participants