Would it be possible to immediately focus the search input field right after clicking on the button?
Description
Details
Status | Subtype | Assigned | Task | ||
---|---|---|---|---|---|
Open | None | T343125 Global language selector review | |||
Resolved | gengh | T343202 Save one click by focusing the language search after click on the language button |
Event Timeline
@AAlhazwani-WMF I'm interested by this task, I would greatly appreciate your guidance on how to proceed with resolving them.
that's great @ShashwatPS! are you looking for more detailed design specs or engineering guidance on how to run wikifunctions locally and submit patches?
@AAlhazwani-WMF Thanks for getting back to me ! I'm having some trouble running Wikifunctions on my computer and submitting changes. Could you help me with the steps to set up Wikifunctions locally and how to send in my changes?
i'm not an engineer, but it might be useful to know where precisely you're running into blockers. in the meantime here's some useful documentation that can guide you through the whole process:
- mediawiki installation https://gerrit.wikimedia.org/g/mediawiki/core/+/HEAD/DEVELOPERS.md
- wikilambda installation https://www.mediawiki.org/wiki/MediaWiki-Docker/Extension/WikiLambda
- wikilambda cheatsheet https://meta.wikimedia.org/wiki/Abstract_Wikipedia/Abstract_developer_cheatsheet
you can also try to reach out on the main chat (source https://meta.wikimedia.org/wiki/Abstract_Wikipedia#Participate)
Main chat: Telegram or IRC [[ irc://irc.libera.chat/wikipedia-abstract | #wikipedia-abstract ]] (bridged together)
Thanks for replying and the resources will ask you for help if i stumble upon somewhere.
This can be easily achieved by playing with tabindex attribute of various elements. Can I get assigned to this issue?
@AAlhazwani-WMF While working on this issue I realized that the input field of "Search MediaWiki" and "Search Language" have the same class and no id through which they can be distinguished. I can add a class to input field of "Search Langauge" but I am not sure if that's the most optimal solution. So if have any reviews let me know.
This is the code through which i am achieving focus on input field.
const inputElement = document.querySelector('input.cdx-text-input__input'); if (inputElement) { inputElement.focus(); }
and this is the result
note that instead of focusing the "search language" input it focuses on "Search MediaWiki".
Yes, adding an id to the global language selector field sounds fine if that's needed, as there will be only one per page.
However, you should be able to add code to resources/ext.wikilambda.languageselector/components/LanguageSelector.vue to hook off the cdx-lookup's opening code directly, rather than having to use querySelector to find a reference to it.
Change #1015934 had a related patch set uploaded (by Genoveva Galarza; author: Genoveva Galarza):
[mediawiki/extensions/WikiLambda@master] Automatically focus language lookup field when clicking language button
Change #1015934 merged by jenkins-bot:
[mediawiki/extensions/WikiLambda@master] Automatically focus language lookup field when clicking language button