fix (AIQ-5472): Update multiselect input click to toggle menu #146
Conversation
(instead of always setting menu state to open)
cafloyd
requested review from
wickkidd,
rbvea,
atsunechka,
ivan-shtyrlyaev-nitka,
keaglinpolitico,
tcrite1,
dlazarenko-c,
ewalters-politico and
GlebShchipanov
|
Hey @atsunechka and @ivan-shtyrlyaev-nitka - if you have time tomorrow, would you mind taking a look at this PR, since you worked on #142, which is related? This PR is a follow-up to that PR, intended to allow the user to click to toggle between open and closed menu states (right now clicking on the menu only opens it). The solution I have feels clunky, so I'm definitely open to suggestions if there's a better way to achieve this! |
src/SelectMulti.vue
Outdated
| @@ -406,7 +414,7 @@ | |||
| :placeholder="placeholder" | |||
| :aria-placeholder="placeholder" | |||
| @blur="onInputBlur" | |||
| @click="updateMenuState(true)" | |||
| @click="updateMenuState(!open, !open)" | |||
There was a problem hiding this comment.
I don't this it's a good solution.
If we click on input it implies it's focused. and it means we need to have menu opened .
If we need to close menu on second input click - it's a wrong requirement (imo)
There was a problem hiding this comment.
Good point, I'll revert this change!
There was a problem hiding this comment.
Actually, sorry @ivan-shtyrlyaev-nitka I misread this comment - I think it's standard and expected behavior for a second click to close the menu, and it would be confusing to the user if they didn't see that behavior.
Here are recordings of a few examples I found - I wasn't able to find any example where a second click didn't close the menu:
Google:
https://github.com/user-attachments/assets/8e97b96b-e9ae-4884-bd0c-7ec3f4390472
Outlook:
https://github.com/user-attachments/assets/2f78f6b1-c4bb-48d5-a866-61231495e2a1
Github:
https://github.com/user-attachments/assets/79643eec-6123-4ee8-be6b-12cdc0f45105
Jira:
https://github.com/user-attachments/assets/72b79894-bd8b-4326-adae-4071ce32115e
There was a problem hiding this comment.
Thanks for explaining your thinking on this point, @ivan-shtyrlyaev-nitka ! You were right after all and I updated this PR to only support toggle behavior on the icon but not on the input. I also replicated these changes for main with this PR: #147
cafloyd
force-pushed
the
fix/AIQ-5472-1
branch
2 times, most recently
from
40d9a92 to
7699420
Compare
cafloyd
force-pushed
the
fix/AIQ-5472-1
branch
from
7699420 to
8ce7cfa
Compare
Co-authored-by: Ivan Shtyrlyaev <[email protected]>
Description
Updates multiselect input and 'plus' icon click event to toggle menu state between open and closed.
Type of Changes
Updates
Before
Clicking on the input or the 'plus' icon opens the menu, but does not close it upon a second click:
https://github.com/user-attachments/assets/03da37a5-f383-4f16-8bdb-ba3ab506d616
After
Clicking on the input or the 'plus' icon toggles the menu state:
https://github.com/user-attachments/assets/428ac861-8e4e-41de-bffd-9e531a688ec4