Page MenuHomePhabricator

Save one click by focusing the language search after click on the language button
Closed, ResolvedPublic

Description

Would it be possible to immediately focus the search input field right after clicking on the button?

CleanShot 2023-07-31 at 14.44.52.gif (188×800 px, 72 KB)

Event Timeline

Jdforrester-WMF moved this task from To triage to Backlog on the Abstract Wikipedia team board.

@AAlhazwani-WMF I'm interested by this task, I would greatly appreciate your guidance on how to proceed with resolving them.

@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?

@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:

  1. mediawiki installation https://gerrit.wikimedia.org/g/mediawiki/core/+/HEAD/DEVELOPERS.md
  2. wikilambda installation https://www.mediawiki.org/wiki/MediaWiki-Docker/Extension/WikiLambda
  3. 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.

How can we move forward with its application?

This can be easily achieved by playing with tabindex attribute of various elements. Can I get assigned to this issue?

This can be easily achieved by playing with tabindex attribute of various elements. Can I get assigned to this issue?

sure thing!

@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

Animation8.gif (1×1 px, 342 KB)

note that instead of focusing the "search language" input it focuses on "Search MediaWiki".

@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

Animation8.gif (1×1 px, 342 KB)

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

https://gerrit.wikimedia.org/r/1015934

Jdforrester-WMF changed the task status from Open to In Progress.Mon, Apr 1, 10:38 AM
Jdforrester-WMF moved this task from Backlog to To deploy on the Abstract Wikipedia team board.

Change #1015934 merged by jenkins-bot:

[mediawiki/extensions/WikiLambda@master] Automatically focus language lookup field when clicking language button

https://gerrit.wikimedia.org/r/1015934