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
adding state to track if user is on keyboard to control hover & focus… #652
Conversation
…ed styles of dropdown list items
src/interactive/Dropdown.jsx
Outdated
}; | ||
|
||
class Dropdown extends React.PureComponent<Props, State> { | ||
state = { | ||
isActive: this.props.isActive || false, | ||
isKeyPressed: true, |
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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
src/interactive/Dropdown.jsx
Outdated
@@ -100,6 +102,9 @@ class Dropdown extends React.PureComponent<Props, State> { | |||
this.closeContent(e); | |||
}, 0); | |||
} | |||
this.setState({ | |||
isKeyPressed: true, | |||
}); |
There was a problem hiding this comment.
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 });
src/interactive/Dropdown.jsx
Outdated
@@ -122,6 +127,12 @@ class Dropdown extends React.PureComponent<Props, State> { | |||
} | |||
}; | |||
|
|||
onMouseLeave = (e: SyntheticMouseEvent<*>) => { |
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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
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.