WordPress.org

Make WordPress Core

Opened 2 years ago

Last modified 10 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:
PR Number:

Description

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 2 years ago.

Download all attachments as: .zip

Change History (5)

#1 @lucymtc
2 years ago

  • Keywords 2nd-opinion added

#2 @lucymtc
2 years ago

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

#3 @lucymtc
2 years 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 );
    }
});


#4 @syhc
10 months ago

We (at work) have been running into the same problem.

The problem seems to happen when there is more than 1 custom field, and that you have tabbed to a new field before wp.media.model has save the previous field.

Our solution was to add an option to media-views.js AttachmentCompat.save function

this.model.saveCompat( data, {silent:'true'} )
Note: See TracTickets for help on using tickets.