Skip to content

Fix Select - active, hover, styling issues on mouseOut #7469

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

Merged
merged 4 commits into from
Jan 24, 2025

Conversation

umeshiscreative
Copy link
Contributor

@umeshiscreative umeshiscreative commented Jan 16, 2025

What does this PR do?

Has fix for the Hover styling on Select component.

Where should the reviewer start?

components/select/select-container.js

What testing has been done on this PR?

Tested with all the theme levels with storybook

How should this be manually tested?

Do Jest tests follow these best practices?

  • screen is used for querying.
  • The correct query is used. (Refer to this list of queries)
  • asFragment() is used for snapshot testing.

Any background context you want to provide?

Reset the onMouse movement

What are the relevant issues?

#7464

Screenshots (if appropriate)

Do the grommet docs need to be updated?

NA

Should this PR be mentioned in the release notes?

NA

Is this change backwards compatible or is it a breaking change?

NA

Signed-off-by: Umesh Verma <umeshiscreative@gmail.com>
@britt6612 britt6612 requested a review from jcfilben January 16, 2025 18:59
@britt6612 britt6612 changed the title Fix Select - active, hover, and focus styling issues Fix Select - active, hover, styling issues on mouseOut Jan 16, 2025
@jcfilben jcfilben added the PRty Biweekly PR reviews by grommet team with hoping of closing such PRs label Jan 16, 2025
@britt6612 britt6612 requested a review from MikeKingdom January 17, 2025 16:39
Copy link
Collaborator

@MikeKingdom MikeKingdom left a comment

Choose a reason for hiding this comment

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

LGTM

@@ -483,6 +490,9 @@ const SelectContainer = forwardRef(
onMouseOver={
!optionDisabled ? onActiveOption(index) : undefined
}
onMouseOut={
!optionDisabled ? onResetActiveOption(index) : undefined
Copy link
Collaborator

Choose a reason for hiding this comment

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

Instead of adding onResetActiveOption what if we just did something like this instead?

Suggested change
!optionDisabled ? onResetActiveOption(index) : undefined
!optionDisabled ? onActiveOption(-1) : undefined

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 thought it would be better to separate both event actions, but I will refactor it.

@jcfilben jcfilben removed the PRty Biweekly PR reviews by grommet team with hoping of closing such PRs label Jan 22, 2025
Copy link
Collaborator

@jcfilben jcfilben left a comment

Choose a reason for hiding this comment

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

Looks good!

@jcfilben jcfilben merged commit 12666e9 into grommet:master Jan 24, 2025
13 of 14 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants