Removed highlight from Dropdown components #16789
Conversation
✅ Deploy Preview for v11-carbon-react ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for carbon-elements ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
There was a problem hiding this comment.
Hey @guidari, looks like its not working for filterable multiselect, Please check the attached video.
Screen.Recording.2024-06-19.at.1.01.30.PM.mov
|
@preetibansalui Fixed the arrow click |
|
Thanks @guidari for the changes, Its looking perfect. Just want to confirm one minor thing that I notice in multiselect. If we select something in multiselect and reopen this, It won't have any item as highlighted while for filterable, dropdown and combobox on reopen they have highlighted options. @Kritvi-bhatia17 Can you please confirm if this behaviour is correct? Screen.Recording.2024-06-20.at.1.48.06.PM.mov |
There was a problem hiding this comment.
@preetibansalui that's a configurable option through selectionFeedback, so I think this is okay
tay1orjones
added
status: one more review 👀
and removed
status: ready for review 👀
labels
There was a problem hiding this comment.
Hi @guidari, nice work just a few comments:
-
I might not have clearly mentioned this in the issue, but when there is no option selected in the combobox, the parent option should have a focus border of 2px. (figma link)
-
I am unable to verify/crosscheck whether this overlapping focus border is 1px or 2px. Please cross-check. Please verify the same for the multi-select as well.
-
The focus border is supposed to be removed from the child option when it is not selected. In this case, as one option is already selected, the focus border should also appear on the child option (the way it is currently now), similar to what you have done for the filterable-multiselect. (example link)
-
In the filterable-multiselect, I am unsure whether the last selected option interacted with should have the focus state or if it should be the first option that appears when opening the dropdown. For now, let's continue with the current interaction as seen in the current storybook.
Please cross-check these minor points with the fluid states as well.
Let me know if you have any doubts. Thank you, Gui! 🔥
There was a problem hiding this comment.
Hi Gui!! Thanks for fixing those minor points 🙌🏻.
Can you please look at the following points:
-
Can you please reconfirm if this is resolved now? I am unable to see it on my end. The same issue is occurring for fluid multi-select.
3. The focus border is supposed to be removed from the child option when it is not selected. In this case, as one option is already selected, the focus border should also appear on the child option (the way it is currently now), similar to what you have done for the filterable-multiselect. (example link)
-
'When no option is selected in the combobox, the parent option should have a 2px focus border.' This same rule should be applied to the fluid combo box as well.
- In both multi-select and filterable multi-select, when I select an option, click the cross, and then open the dropdown again, the focus state reappears. I'm not sure why this is happening. Can you please check this?
Screen.Recording.2024-07-13.at.1.58.02.PM.mov
|
Although this is not related to this issue, when I click on multi-select, the component appears in the middle instead of the top left like all other components. Any idea why this bug is occurring? 
|
|
Fixed the issues @Kritvi-bhatia17
It is only for testing purpouse. So the user can test the Floating UI when the |
|
Sorry, I came late to this issue. Just wanted to ask if this is correct for the Invalid and Warning states.
|
* fix: removed highlight from first item * test: fixed tests to match new behaviour * test: fixed fluid components tests * fix: fixed click on arrow * fix: fixed focus state * fix: fixed filterable multiselect focus * fix: fixed focus state for combobox * fix: fixed scss * fix: fixed multiselect focus state * fix: removed console.log * fix: fixex arrowDown to open the menu * fix: fixed tests * fix: fixed issues --------- Co-authored-by: Kritvi <[email protected]>
github-merge-queue
bot
removed this pull request from the merge queue due to failed status checks
5998863
Closes #16512
Removed the selection from first items after the Dropdown is open.
Changed tests to match the expected behaivour.
Testing / Reviewing
Combobox,MultiSelectandFilterableMultiselectare not focusing on the first element.