Make WordPress Core

Opened 13 months ago

Last modified 11 months ago

#40909 new defect (bug)

Focus in attachment custom fields is lost when updating the value.

Reported by: lucymtc Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 4.7.5
Component: Media Keywords: dev-feedback
Focuses: Cc:


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

Attachments (1)

Screen Shot 2017-06-02 at 14.03.31.png (80.6 KB) - added by lucymtc 13 months ago.

Download all attachments as: .zip

Change History (4)

#1 @lucymtc
13 months ago

  • Keywords 2nd-opinion added

#2 @lucymtc
12 months ago

  • Keywords dev-feedback added; 2nd-opinion removed

#3 @lucymtc
11 months ago

A temp fix for anyone that needs it is overriding initialize to stop listening for re-rendering.

 * Extends wp.media.view.AttachmentCompat
 * Override initialize to stop listening the compat change to
 * prevent re-rendering the attachment compat view.
 * Fixes issue losing focus on atatchment custom fields in the modal.

var OriginalAttachmentCompat = wp.media.view.AttachmentCompat;
wp.media.view.AttachmentCompat = OriginalAttachmentCompat.extend({

    initialize: function() {
        OriginalAttachmentCompat.prototype.initialize.apply( this, arguments );

        this.stopListening( this.model, 'change:compat', this.render );

Note: See TracTickets for help on using tickets.