[wp-trac] [WordPress Trac] #40909: Focus in attachment custom fields is lost when updating the value.

[WordPress Trac]

#40909: Focus in attachment custom fields is lost when updating the value.
--------------------------+-----------------------------
 Reporter:  lucymtc       |      Owner:
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Media         |    Version:  4.7.5
 Severity:  normal        |   Keywords:
  Focuses:                |
--------------------------+-----------------------------
 I ran into a bug related to attachment custom fields in the media modal as
 well as the attachment edit screen.
 It's an accessibility issue where the focus of the text inputs is lost
 when their value is modified, needing to click twice to update their
 value. Reproducible when having multiple custom fields.

 This is caused by a re-render of the view used for this region, which is
 `wp.media.view.AttachmentCompat`

 In the initialize function the view re-renders when the model changes.
 {{{
 initialize: function() {
         this.listenTo( this.model, 'change:compat', this.render );
 }
 }}}

 Steps to reproduce:
 - Create some custom attachment fields using the appropriated hooks
 `attachment_fields_to_edit` and `attachment_fields_to_save`
 - Open the Medial Modal through Add Media button and click on an image to
 view details.
 - Click on the one of the custom fields input and type any text.
 - Then directly click on the next custom field input.
 - Focus gets lost and needs to click again in the input in order to modify
 the value.

 I don't see the reason for the view needing to be re-rendered, removing
 the listener fixes the issue.
 If re-rendering is needed for a particular reason, a possible solution
 would be to keep track of the last focused input and re-focus on re-
 render.

 The code was added in this commit https://github.com/WordPress/wordpress-
 develop/commit/57b09463e67

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