Page MenuHomePhabricator

Improve country dropdown for the "country of origin" filter in the advanced search for works.
Open, In Progress, Needs TriagePublicFeature

Description

Feature summary: This improvement will allow to type to select a country in the country dropdown of the "country of origin" filter available in the advanced search for works.

Use case(s): Currently, the dropdown menu for "Country of origin" filter in the advanced search for works doesn't allow to type to select. The type to select feature has been already implemented for the authors "Nationality" filter (see the task: T393278 and the code of the feature), so there is no need to program the functionality from scratch, but only implement the already existing Javascript functionality in this other context.

Benefits: This improvement in the dropdown menu will improve and speed up advanced search.

Event Timeline

Hi,I’d like to work on this improvement. I understand that the goal is to enable type-to-select functionality for the “Country of origin” dropdown in the advanced search for works, similar to what’s already implemented in the authors’ “Nationality” filter (T393278).
I’ll review the existing implementation of that feature and adapt the same JavaScript logic for the “Country of origin” context.
Please let me know if I can go ahead with this task. Thanks

I have gone through the “Nationality” filter implementation (Task: T393278) and noticed that the type-to-select functionality is already available in the codebase.

I will be reusing the existing JavaScript and apply it to the “Country of origin” dropdown in the advanced search for works, so users can easily type to find a country instead of scrolling.

This change should make the advanced search faster and more user-friendly.
Could I please be assigned to the task so I can get started?

Thanks in advance! 😊

Hello, everyone!
@Sandijigs I see you already have another ticket assigned, so I'll go ahead and assign this one to @Oluwatumininu.m
Happy coding!

This comment was removed by Oluwatumininu.m.
Oluwatumininu.m changed the task status from Open to In Progress.Oct 9 2025, 2:05 AM
Oluwatumininu.m claimed this task.

Hi @Pepe_piton @Nat_WDU I have completed the task and made a pull request. Could you help look through?
https://gitlab.wikimedia.org/toolforge-repos/paulina/-/merge_requests/14

I discovered a new issue while solving this issue and I have fixed it. I will include the before and after videos whilst creating a new PR.

The "Country of Origin" dropdown type-to-select feature currently matches countries anywhere in the name (e.g., typing "N" shows Afghanistan before Nigeria).

I have improved this behavior so that the filter prioritizes countries that START with the typed letters.

What I did:

  1. Found the code responsible for filtering or matching country names in the dropdown.
  2. Updated the logic so that countries whose names start with the typed query appear first.
    • Used toLowerCase().startsWith(query.toLowerCase()) to check for prefix matches.
    • Optionally, I still included other matches (that contain the query later), but listed them after the prefix matches.
  3. Ensured the alphabetical order of countries remains consistent.
  4. Tested that typing "N" now shows countries like "Namibia", "Nepal", "Nigeria" first.

@Nat_WDU @Pepe_piton
https://gitlab.wikimedia.org/toolforge-repos/paulina/-/merge_requests/90

Completed the task, Kindly review!
Reused the existing javascript functionality of Nationality filter.

PS: The bulk code changes in script of layout.html is only due to indentation as I put the existing script inside a function!

Changes preview attached in the MR

Hi @shreya-bhagat,

The approach looks good, but I'm unable to reproduce the expected behavior on my Ubuntu environment on Firefox and Chrome.
This is how I see the dropdown.

image.png (917×768 px, 345 KB)

Could it be that there are still missing files to push to the PR?
Which OS and browser environment are you testing this on?

Looking forward to hear from you.
David

Hello @DidiCoronel!
I think just before pushing I made a mistake in the css file. I've fixed that now, have a look: https://gitlab.wikimedia.org/toolforge-repos/paulina/-/merge_requests/90/diffs?diff_id=136659&start_sha=f7156e42826322923b25e9e1091c5a51585ba6e1

Hope it works fine now. I use chrome browser on Ubuntu 24.04.3

so sorry for the inconvenience!

Hello @DidiCoronel!
I think just before pushing I made a mistake in the css file. I've fixed that now, have a look: https://gitlab.wikimedia.org/toolforge-repos/paulina/-/merge_requests/90/diffs?diff_id=136659&start_sha=f7156e42826322923b25e9e1091c5a51585ba6e1

Hope it works fine now. I use chrome browser on Ubuntu 24.04.3

so sorry for the inconvenience!

@shreya-bhagat, now I do see the correct styles.

I discovered a new issue while solving this issue and I have fixed it. I will include the before and after videos whilst creating a new PR.

The "Country of Origin" dropdown type-to-select feature currently matches countries anywhere in the name (e.g., typing "N" shows Afghanistan before Nigeria).

I have improved this behavior so that the filter prioritizes countries that START with the typed letters.

What I did:

  1. Found the code responsible for filtering or matching country names in the dropdown.
  2. Updated the logic so that countries whose names start with the typed query appear first.
    • Used toLowerCase().startsWith(query.toLowerCase()) to check for prefix matches.
    • Optionally, I still included other matches (that contain the query later), but listed them after the prefix matches.
  3. Ensured the alphabetical order of countries remains consistent.
  4. Tested that typing "N" now shows countries like "Namibia", "Nepal", "Nigeria" first.

@Oluwatumininu.m, I think this is an improvement for the behavior of the combobox and was able to verify it work as intended. Although I do have a question about the PR, there are two divs with class "combobox-container" added here. Are both actually needed? May have more questions or comments later.

@shreya-bhagat, now I do see the correct styles.

thanks @DidiCoronel for the feedback!

please let me know if any other modifications are required

I discovered a new issue while solving this issue and I have fixed it. I will include the before and after videos whilst creating a new PR.

The "Country of Origin" dropdown type-to-select feature currently matches countries anywhere in the name (e.g., typing "N" shows Afghanistan before Nigeria).

I have improved this behavior so that the filter prioritizes countries that START with the typed letters.

What I did:

  1. Found the code responsible for filtering or matching country names in the dropdown.
  2. Updated the logic so that countries whose names start with the typed query appear first.
    • Used toLowerCase().startsWith(query.toLowerCase()) to check for prefix matches.
    • Optionally, I still included other matches (that contain the query later), but listed them after the prefix matches.
  3. Ensured the alphabetical order of countries remains consistent.
  4. Tested that typing "N" now shows countries like "Namibia", "Nepal", "Nigeria" first.

@Oluwatumininu.m, I think this is an improvement for the behavior of the combobox and was able to verify it work as intended. Although I do have a question about the PR, there are two divs with class "combobox-container" added here. Are both actually needed? May have more questions or comments later.

Thank you very much for the feedback!

This was a duplication issue that I missed.

I have removed the duplicate div and made a commit. I'll be expecting more comments and feedback.

Good evening @Pepe_piton @Nat_WDU @DidiCoronel
i made a merge request related this issue:https://gitlab.wikimedia.org/toolforge-repos/paulina/-/merge_requests/136
changes made:

  • Reused nationality JS.
  • Added combobox-container CSS.
  • Added submit validation.

Please check my work and share feedback so I can improve.

I discovered a new issue while solving this issue and I have fixed it. I will include the before and after videos whilst creating a new PR.

The "Country of Origin" dropdown type-to-select feature currently matches countries anywhere in the name (e.g., typing "N" shows Afghanistan before Nigeria).

I have improved this behavior so that the filter prioritizes countries that START with the typed letters.

What I did:

  1. Found the code responsible for filtering or matching country names in the dropdown.
  2. Updated the logic so that countries whose names start with the typed query appear first.
    • Used toLowerCase().startsWith(query.toLowerCase()) to check for prefix matches.
    • Optionally, I still included other matches (that contain the query later), but listed them after the prefix matches.
  3. Ensured the alphabetical order of countries remains consistent.
  4. Tested that typing "N" now shows countries like "Namibia", "Nepal", "Nigeria" first.

@Oluwatumininu.m, I think this is an improvement for the behavior of the combobox and was able to verify it work as intended. Although I do have a question about the PR, there are two divs with class "combobox-container" added here. Are both actually needed? May have more questions or comments later.

Thank you very much for the feedback!

This was a duplication issue that I missed.

I have removed the duplicate div and made a commit. I'll be expecting more comments and feedback.

Hi @Oluwatumininu.m, I see the <div> is commented out. If it's not actually needed I'd recommend you remove/delete it completely.

@Afanyulionel, may I ask what linting tool are you using? I see a lot of code style changes which are not related to the task which makes it a but difficult to review. Would it be possible for you to remove all code style changes from your PR?

I discovered a new issue while solving this issue and I have fixed it. I will include the before and after videos whilst creating a new PR.

The "Country of Origin" dropdown type-to-select feature currently matches countries anywhere in the name (e.g., typing "N" shows Afghanistan before Nigeria).

I have improved this behavior so that the filter prioritizes countries that START with the typed letters.

What I did:

  1. Found the code responsible for filtering or matching country names in the dropdown.
  2. Updated the logic so that countries whose names start with the typed query appear first.
    • Used toLowerCase().startsWith(query.toLowerCase()) to check for prefix matches.
    • Optionally, I still included other matches (that contain the query later), but listed them after the prefix matches.
  3. Ensured the alphabetical order of countries remains consistent.
  4. Tested that typing "N" now shows countries like "Namibia", "Nepal", "Nigeria" first.

@Oluwatumininu.m, I think this is an improvement for the behavior of the combobox and was able to verify it work as intended. Although I do have a question about the PR, there are two divs with class "combobox-container" added here. Are both actually needed? May have more questions or comments later.

Thank you very much for the feedback!

This was a duplication issue that I missed.

I have removed the duplicate div and made a commit. I'll be expecting more comments and feedback.

Hi @Oluwatumininu.m, I see the <div> is commented out. If it's not actually needed I'd recommend you remove/delete it completely.

Thank you David, I have taken it out completely.

@shreya-bhagat, @Aradhya05, @Dipanshu1223 code looks ok and I was able to see the new dropdown type-to-search behavior on your PRs.

@shreya-bhagat, @Aradhya05, @Dipanshu1223 code looks ok and I was able to see the new dropdown type-to-search behavior on your PRs.

Thank you for the feedback! @DidiCoronel