Problem/Motivation

After editing an image with the entity browser and clicking save or closing the modal, the form submit button gets focused and the page scrolls to the bottom. This happens only while editing, not while adding new entities.

CommentFileSizeAuthor
#8 3053181-edit-save-button-focus-8-interdiff.txt444 bytessasanikolic
#8 3053181-edit-save-button-focus-8.patch386 bytessasanikolic
#7 3053181-edit-save-button-focus-6.patch407 bytessasanikolic

Issue fork entity_browser-3053181

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:

About issue forks

Comments

sasanikolic created an issue. See original summary.

oknate’s picture

oknate
Location Greater New York City Area
commented

+1 on this! I was noticing this this morning. This would be great to fix. I suspect it has something to do with the ajax update of the underlying element. It loses the focus because the element it was focused on was removed.

sasanikolic’s picture

sasanikolic commented

I also believe that for accessibility reasons, we should return the focus to the element that was focused before the entity browser modal was opened:
- Before opening the modal, save a reference to document.activeElement. After closing the modal, focus the reference to the previous activeElement.

sasanikolic’s picture

sasanikolic commented

I did some debugging here, but could not find a triggering element in the event object of the dialogopen/beforecreate functions.
I also tried to have a click event listener on edit/change buttons, but that also didn't work as expected. Any idea where to write a fix for that @oknate?

sasanikolic’s picture

sasanikolic commented

EDIT: sorry for the doublepost.

sasanikolic’s picture

sasanikolic commented
Related issues: +#1824636: Do not move the cursor to the top of the page on ajax calls
sasanikolic’s picture

sasanikolic commented
StatusFileSize
new 3053181-edit-save-button-focus-6.patch407 bytes

This is a patch with a workaround, that disables the focus on the "Save" button. With that at least the page doesn't jump after saving.

Tried adding the test, but unfortunately it seems that there's no way to check for focused elements in a js test?
Got this error:

1) Drupal\Tests\entity_browser\FunctionalJavascript\EntityReferenceWidgetTest::testEntityReferenceWidget
Symfony\Component\CssSelector\Exception\ExpressionErrorException: Pseudo-class "focus" not supported.
sasanikolic’s picture

sasanikolic commented
Issue summary: View changes
Parent issue: » #1824636: Do not move the cursor to the top of the page on ajax calls
Related issues: -#1824636: Do not move the cursor to the top of the page on ajax calls +#3080834: Focus any element on ajax calls
StatusFileSize
new 3053181-edit-save-button-focus-8.patch386 bytes
new 3053181-edit-save-button-focus-8-interdiff.txt444 bytes

Wrong line. Fixed it here.

Also, created a core issue for d.o. and added a patch there.

sasanikolic’s picture

sasanikolic commented
Status: Active » Needs review
renrhaf’s picture

renrhaf
Primary language French
Location 📍 Strasbourg 🐦🦜
commented
Status: Needs review » Reviewed & tested by the community

Thanks sasanikolic for the patch. We noticed this issue in our project, then applied this patch and noted that the focus was no more set to the bottom of the form which is great for us ! Setting this to RTBC.

  • oknate committed e8c73f8 on 8.x-2.x authored by sasanikolic 
    Issue #3053181 by sasanikolic: Maintain focus on clicked item after...

  • oknate committed f0fb4f6 on 8.x-1.x authored by sasanikolic 
    Issue #3053181 by sasanikolic: Maintain focus on clicked item after...
oknate’s picture

oknate
Location Greater New York City Area
commented
Status: Reviewed & tested by the community » Fixed

Committed, thanks!

🎉

Status: Fixed » Closed (fixed)

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

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