Unable to Replace Image in Image widget is using "Insert from URL"

[dufresnesteven]

Version:
5.3-RC5-46725

Tested in:
Chrome (Version 78.0.3904.97 (Official Build) (64-bit))

Steps to Reproduce:

• Visit Customize Page
• Click "Widgets"
• Click "Add Widget"
• Select "Image" widget
• Select "Add Image"
• Choose to "Insert From URL"
• Insert any image url [Example (​https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png)]
• Click "Add Widget"
• Click "Replace Image"

Notice that the window to replace the image does not open as expected.

Additional Information:

• Works properly if the user has used an image from their Media Library

If the user does the same action on a mobile device, works properly -> Line in question -> (wp.media.isTouchDevice

e.url.focus())

• Reproduced on a number of different themes

Console:

[media-widgets.min.js?m=1572623339h&ver=5.3-RC5-46725:1 Uncaught TypeError: e.url.focus is not a function

at i.embedContent (VM915 media-widgets.min.js:1)
at p (VM868 backbone.min.js:1)
at f (VM868 backbone.min.js:1)
at l (VM868 backbone.min.js:1)
at h.Collection.n.trigger (VM868 backbone.min.js:1)
at i.<computed> [as trigger] (VM843 media-views.min.js:1)
at i.trigger (VM843 media-views.min.js:1)
at i.render (VM843 media-views.min.js:1)
at i.mode (VM843 media-views.min.js:1)
at i.render (VM843 media-views.min.js:1)]

[audrasjb]

Hi @dufresnesteven, Welcome to WordPress Trac and thank you for opening this ticket,

Self-assigning the ticket for review.

[afercia]

I think this happens after [45499].

A possible fix would be changing view.url.focus() to view.url.input.focus().

However, it is preferable to not move focus in the first place, as that's an assumption on a user flow that may not be the intended one. See #43169.

I'd lean towards removing the code responsible for moving focus from src/js/_enqueues/wp/widgets/media.js.

[afercia]

48588.diff​ avoids to move focus to the "Insert from URL" field, along the lines of the changes introduced in #43169 for the media views. By doing so, it avoids the reference to the backbone.js view.url which isn't the input field any longer after [45499].

[afercia]

In 46745:

Widgets: Avoid to move focus to the Image Widget "Insert from URL" field.

Fixes a bug after [45499], where the backbone view element isn't the input field any longer. Also, managing focus programmatically is often an assumption on a specific user flow and should generally be avoided, see #43169.

Props dufresnesteven.
See #43169.
Fixes #48588.

[afercia]

Reopening for 5.3.1 consideration.

[SergeyBiryukov]

In 46781:

Widgets: Avoid to move focus to the Image Widget "Insert from URL" field.

Fixes a bug after [45499], where the backbone view element isn't the input field any longer. Also, managing focus programmatically is often an assumption on a specific user flow and should generally be avoided, see #43169.

Props dufresnesteven, afercia.
Merges [46745] to the 5.3 branch.
See #43169.
Fixes #48588.

[SergeyBiryukov]

#48795 was marked as a duplicate.