[Select] Fix custom options menu not opening on Avatar click #34648
Conversation
shivam1646
commented
Oct 6, 2022
•
shivam1646
commented
- I have followed (at least) the PR section of the contributing guide.
- This PR resolves Joy Select : Menu is not opening if you click on the Avatar. #34490
shivam1646
requested review from
michaldudak,
mnajdova and
siriwatknp
as code owners
|
|
Thanks for the PR, really appreciate your time. Can you take a look at my comment and then we can continue this PR once we have the decision? |
|
Hi @siriwatknp just checking in. Any updates on the PR? |
|
@shivam1646 The logic looks good to me. Let's add documentation about |
|
@siriwatknp does this look fine? |
May be: "If you have interactive elements as the select's decorators, call <Select
endDecorator={
<IconButton
onMouseDown={event => {
// the event will not propagate to the select's button.
event.stopPropagation();
}}
onClick={() => {
// click handler goes here.
}}
>...</IconButton>
}
> |
|
@siriwatknp I have updated PR with the documentation. |
…open-joy-select-on-avatar-click
siriwatknp
changed the title
siriwatknp
added
the
component: select
| @@ -52,6 +52,20 @@ Use the `startDecorator` and/or `endDecorator` props to add supporting icons or | |||
|
|
|||
| {{"demo": "SelectDecorators.js"}} | |||
|
|
|||
| If you have interactive elements as the select's decorators, call `stopPropagation()` from the mouse down event to prevent the popup from being opened. | |||
There was a problem hiding this comment.
I guess that developers will need to be careful with the a11y aspect of this. For instance, it might have helped to remove the icon button from the tab sequence in the code snippet. I mean in https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-autocomplete-list.html they seem to encourage that only the root of the select should be focusable (and tabbable).
Removes the button from the tab sequence of the page because its function is redundant with the keyboard operation of the combobox.
