Problem/Motivation

Clicking on + to add a taxonomy term field to the index scrolls the page to the top. A user who is not very familiar with Drupal wouldn't know what happened.

Here's how to reproduce the issue:

1) Go to /admin/config/search/search-api/index//fields. Replace in the URL by the machine name of your index.
2) Click on "Add fields" button.
3) You should see a popup similar to the one shown below:

Popup image

4) Scroll down the page so that you are below the fold.
5) Click on any "(+)" icon. In my case, I clicked on the icon next to "Next steps planned for each goal?" field.
6) JS forces the page to scroll to the top.

Proposed resolution

Page should not scroll to the top.

CommentFileSizeAuthor
#8 3022881-8--ajax-add-fields-click-no-scroll.patch1.29 KBdrunken monkey
#8 3022881-8--ajax-add-fields-click-no-scroll--interdiff.txt628 bytesdrunken monkey
#4 clicking-page-scroll-to-the-top-3022881-4.patch881 bytesmahtabalam
Screen Shot 2018-12-28 at 9.52.57 AM.png311.25 KBneeravbm

Issue fork search_api-3022881

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

  • 3022881-no-refocus Comparecompare
About issue forks

Comments

neeravbm created an issue. See original summary.

drunken monkey’s picture

drunken monkey
he/him
Primary language German
Location Vienna, Austria
commented

Thanks for reporting!
You’re right, this is indeed a bit of a UX problem. However, frontend/JS development is unfortunately not my strong suit, so I have to rely on patches from others in this regard. If you, or someone else, would be willing to provide one for this problem, I’d be happy to review and commit.

drunken monkey’s picture

drunken monkey
he/him
Primary language German
Location Vienna, Austria
commented
Related issues: +#3006647: Use checkboxes to select fields to add to index

Also, see here: #3006647: Use checkboxes to select fields to add to index.

mahtabalam’s picture

mahtabalam
He/Him/His
commented
StatusFileSize
new clicking-page-scroll-to-the-top-3022881-4.patch881 bytes

On most ajax triggered actions, we are losing the focus on the triggering element as it is removed from the dom then re-added. Please apply the patch to fix that issue.
I have tested on local and work as expected.

mahtabalam’s picture

mahtabalam
He/Him/His
commented

@drunken this will also fixed the issue https://www.drupal.org/project/search_api/issues/3006647

mahtabalam’s picture

mahtabalam
He/Him/His
commented
Status: Active » Needs review
borisson_’s picture

borisson_
Primary language Dutch
Location Mechelen, 🇧🇪
commented
Status: Needs review » Reviewed & tested by the community

Yup, this does seem to help, thanks!

drunken monkey’s picture

drunken monkey
he/him
Primary language German
Location Vienna, Austria
commented
Status: Reviewed & tested by the community » Needs review
StatusFileSize
new 3022881-8--ajax-add-fields-click-no-scroll--interdiff.txt628 bytes
new 3022881-8--ajax-add-fields-click-no-scroll.patch1.29 KB

Wow, thank you so much! This has been bugging me for years now, never imagined the solution would be so simple!
However, any reason you didn’t apply the same change to the “Add” button as well? The behavior is the same (and as annoying) there, and the fix seems to work there, too.

Patch attached, please test/review!

borisson_’s picture

borisson_
Primary language Dutch
Location Mechelen, 🇧🇪
commented
Status: Needs review » Reviewed & tested by the community

Even better!

drunken monkey’s picture

drunken monkey
he/him
Primary language German
Location Vienna, Austria
commented
Status: Reviewed & tested by the community » Fixed

Excellent. I also gave it another test in front of a hundred witnesses, so should be fine.
Committed.
Thanks a lot again!

asterovim’s picture

asterovim commented

Thanks a lot ! it's work's.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

wotts made their first commit to this issue’s fork.

wotts’s picture

wotts commented

Hey!

This patch is in master, but unfortanetly we still experience this issue.
I tried a few things, but that doesn't work. Here's what I tried:

          $item['expand_link'] = [
            '#type' => 'link',
            '#title' => '(-) ',
            '#attributes' => [
              'data-disable-refocus' => ['true'],
              'data-refocus-blur' => ['true'],
            ],
            '#url' => $link_url,
            '#ajax' => [
              'wrapper' => $this->formIdAttribute,
              'disable-refocus' => TRUE,
            ],
          ];

Cheers!

scott_euser’s picture

scott_euser commented

Yep as per #15 I could still reproduce it, but I am fixing it in #3484811: Improve the Search API admin UI for adding/editing fields. The problem was drupal ajax attempts to refocus on the expand button, but expand is replaced by the collapse button. We need to maintain a 'data-drupal-selector' element that is consistent between the two so drupal ajax knows its meant to be the same focus target.