Added fix to avoid showing style on focus when hover behavior is… #470
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
nathalieArnoux
approved these changes
Jan 17, 2025
aprentout
approved these changes
Jan 17, 2025
|
|
||
| .upf-infinite-select__item--disabled-focus { | ||
| &:hover { | ||
| background-color: var(--color-gray-100); |
There was a problem hiding this comment.
Isn't it already handled by the line 33 ?
There was a problem hiding this comment.
Yep you're right, removed it 👌
|
|
||
| &:focus { | ||
| outline: none; | ||
| background-color: white; |
upfluence-bot
added
reviewed/needs-review
reviewed/needs-work
and removed
reviewed/needs-review
reviewed/needs-work
labels
Miexil
reviewed
Jan 20, 2025
| @@ -135,6 +149,19 @@ export default class OSSInfiniteSelect extends Component<InfiniteSelectArgs> { | |||
| } | |||
| } | |||
|
|
|||
| @action | |||
| handleItemHover(index: number) { | |||
phndiaye
reviewed
Jan 21, 2025
| handleItemHover(index: number): void { | ||
| this._focusElementAt(index); | ||
| this._focusElement = index; | ||
| console.log(this._focusElement, index); |
phndiaye
approved these changes
Jan 21, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description:
https://www.loom.com/share/2b8370d959224143b6cb4c0b6c7c9439?sid=beefde54-cce9-47ab-9f99-127d0b81a0a9
Currently, when opening the infinite-select, the first element is focused and keeps its focus even when hovering over an element, making it where 3 elements can have a background grey at the same time.
Now, on opening the select, the first element is no longer focused. Selected item no longer has a grey background either.
When we hover, background styles from hover take over the keyboard navigation styles.
When we navigate with the keyboard, keyboard background styles take over the hover background styles.
What does this PR do?
Related to: #
What are the observable changes?
Good PR checklist