Delete prompt and show combobox options

[andrewtavis]

Terms

• I have searched open and closed feature requests
• I agree to follow activist's Code of Conduct

Description

In #455 we added in the ComboboxTopics component that can be seen on the home page at the top right. Further changes were done in 8a4553c where the the prompt is deleted when the user clicks on the combobox and the options are also shown. One thing that wasn't implemented was similar behavior when the user tabs into the combobox. As of now the text is focussed such that they can easily delete it, but seeing the options would be a better user experience.

I was referencing this comment in a discussion when working on 8a4553c, but the tab functionality wasn't working. Specifically deleting the prompt and opening the drawer was conflicting with other functionality.

Contribution

It would be great if someone wanted to pick up the last part of this! Would be happy to discuss and support however I can, and can also work on this again myself at a later time 😊

[UnknownSean8]

Hi, I would like to work on this. Thanks

[andrewtavis]

Hey @UnknownSean8! Thanks for your interest in activist and helping out! Assigning you now, and let me know if there are any questions I can help with!

[UnknownSean8]

No problem! I am new to the project, I can't seem to find the topic dropdown (as in on the website itself). May I know where it is? Let me know if you prefer me to ask questions through Matrix or any other medium as well.

Edit: I found the page already, found it in the Matrix Dev chat.

[andrewtavis]

Great that you figured it out, @UnknownSean8! Happy to answer more here on GitHub as they come so we can document it :)

[UnknownSean8]

Okay, thanks @andrewtavis. Just wondering do you plan to update the HeadlessUI version to the newest version at some point or do you want to keep the current implementation?

Headless implemented the open-on-focus feature, which opens the options in both onClick and onTab in #2686

The demo can be found here. Demo

[andrewtavis]

Hey @UnknownSean8! Would be totally fine for us to update to the newest version :) Do you want me to do that for you, or do you want to send that along with the changes? If you do update yourself, I'd ask for the update to be done with yarn as other methods have a tendency to be buggy given our setup.

Let me know!

[UnknownSean8]

Hi @andrewtavis, thank you for the help. Unfortunately, I think the new "immediate" feature is still not in the latest production but only in the testing repo.

I've implemented the changes using the current implementation. Tabbing into the combo box will now have the same functionality as clicking into it. I've also updated HeadlessUI dependency in the meantime using yarn.

Do let me know if there are any changes.

Thanks!

[andrewtavis]

All sounds amazing, @UnknownSean8! Really happy to have you working on this 😊 I think we're ready for a PR and we can then take it from there!

[andrewtavis]

Tested live and all's working as expected - closed by #640 🚀 Thanks @UnknownSean8!

If you had interest in looking into another similar issue, one that would be great to talk with you about is #527 (in collaboration with a long term collaborator). This is the other main topic component that we have, but it's more for selecting them when setting up an account or making an organization/event (or filtering in the left sidebar). In a similar way we've been trying to leverage Headless UI for some accessibility, in this case Tabs as we need left and right arrow navigation, but sadly the default behavior looks to be getting into the way of the functionality we had planned.

Let me know if you'd have interest! If you agree the default's would be hard to get away from we could plan out how to implement the topic selection from the options in an accessible way 😊