[wp-trac] [WordPress Trac] #33267: Customizer Theme details: too many events

[WordPress Trac]

#33267: Customizer Theme details: too many events
--------------------------+----------------------------
 Reporter:  afercia       |      Owner:
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Future Release
Component:  Customize     |    Version:  4.2
 Severity:  normal        |   Keywords:
  Focuses:  javascript    |
--------------------------+----------------------------
 This happen just in the Customizer Theme details modal, not in the Themes
 screen. To reproduce, go in the Customizer and press the "Change" button
 next to the Active Theme title. Choose one of the themes in the left
 sidebar and press the "Theme Details" button.
 When the Theme Details modal opens the first time, there's just one
 `keydown` event attached to the theme overlay:

 [[Image(https://cldup.com/66ZTntnIuP.png)]]

 Now, navigate forth and back clicking on the next and previous arrows in
 the top left to see more themes details. After 10 times, there will be 10
 `keydown` events attached:

 [[Image(https://cldup.com/kNtc6D9dsy.png)]]

 And so on and on, after 15 times, 15 `keydown` events attached, etc.:

 [[Image(https://cldup.com/5tgfv95ieb.png)]]

 What's happening? Every time next and previous are clicked,
 `api.ThemesSection.showDetails()` will replace the html in the modal to
 show the new details and it will also call each time
 `api.ThemesSection.containFocus()`.

 Then, `containFocus()` will attach a new `keydown` event each time it runs
 :( and it will also run each time jQuery UI `:tabbable`. At the end, after
 you navigate a few times in the Themes Details and then you tab inside the
 modal, it's very easy to run `:tabbable` literally hundreds of times for
 each "Tab" key press.

 Notice all this doesn't happen in the Themes screen because the div where
 events are attached to gets completely replaced by jQuery `html()` which
 removes also any data and events. This is not the case in the Customizer
 where events are attached to the theme overlay div which doesn't get
 replaced.

 To my understanding this should be refactored a bit:
 * attach the `keydown` event just once, in the attachEvents() function
 * split containFocus() in two separate functions:
  * a simplified containFocus() to just check the event keys and move focus
  * a new getTabbables() to get the tabbable elements just once for each
 theme details.
 * store the tabbables in a variable to be updated with getTabbables()

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