[wp-trac] [WordPress Trac] #39859: wp.media.view.Modal jumps when you open it

[WordPress Trac]

#39859: wp.media.view.Modal jumps when you open it
--------------------------------------------+-----------------------------
 Reporter:  andreiglingeanu                 |      Owner:
     Type:  defect (bug)                    |     Status:  new
 Priority:  normal                          |  Milestone:  Awaiting Review
Component:  Media                           |    Version:
 Severity:  normal                          |   Keywords:
  Focuses:  ui, javascript, administration  |
--------------------------------------------+-----------------------------
 Hello all,

 To be short, this pull request fixes the jumping on the opening of a
 `wp.media` modal (or any modal that inherits it).

 That is, this problem affects every modal in the admin area, just with the
 `wp.media` default size (which is almost full screen) you can't see that
 the body jumps.

 `fw.Modal` (the modal that I'm opening in the video below) inherits from
 `wp.media.view.MediaFrame`, which in turn inherits from
 `wp.media.view.Modal`.

 [**BEFORE**](https://www.screenmailer.com/v/o201KLQ9pKOvBaU) |
 [**AFTER**](https://www.screenmailer.com/v/DgUzmLbJQYaF3c8)

 ----


 A bit more involved description of that change:

 When you open any `wp.media` modal, you are calling
 `wp.media.view.Modal.open` method, which does a strange focus on its
 `$el`.
 [source](https://github.com/WordPress/WordPress/blob/4ca4ff999aba05892c05d26cddf3af540f47b93b
 /wp-includes/js/media-views.js#L6800)

 It turns out, that this incorrect way to focus an element causes the whole
 page to change its scroll position.

 Someone even introduced the
 [_freeze](https://github.com/WordPress/WordPress/blob/4ca4ff999aba05892c05d26cddf3af540f47b93b
 /wp-includes/js/media-views.js#L6777) option in order to prevent that bug,
 but this only causes the user to see more jumps: one at the modal opening
 and another one when you close the modal - see the video.

 Disclaimer: I already did that change in a plugin that uses
 `wp.media.view.Modal` but I did it in a hacky way and I'd like it to be in
 core so that everyone can benefit from it.

 Now I have two questions:

 1. This patch makes the focus to perform in a safe way, but I'm not
 deleting the `_freeze` option for the `wp.media.view.Modal`. Do I need to
 also remove that option and thus make the code a bit simpler?
 2. Do I need to compile my changes to the `src/wp-
 includes/js/media/views/modal.js` and send the new `src/wp-includes/js
 /media-views.js` file as part of my patch? Or having the `src/wp-
 includes/js/media/views/modal.js` changed is enough? The wp build process
 is aware about having to run `grunt build`?

 Thank you for reviewing this.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/39859>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform