Issue #3035316 by seanB, andrewmacpherson, oknate, phenaproxima, rainbreaw:...

Issue #3035316 by seanB, andrewmacpherson, oknate, phenaproxima, rainbreaw: ‘Add media’ in MediaLibraryWidget should be a button, not a link

core/modules/media_library/media_library.libraries.yml

@@ -27,6 +27,7 @@ widget:
   js:
     js/media_library.widget.js: {}
   dependencies:
+    - core/drupal.dialog.ajax
     - core/jquery.ui.sortable
     - core/jquery.once
     - media_library/style

core/modules/media_library/src/Form/AddFormBase.php

@@ -9,10 +9,10 @@
 use Drupal\Core\Entity\EntityTypeManagerInterface;
 use Drupal\Core\Form\FormBase;
 use Drupal\Core\Form\FormStateInterface;
+use Drupal\Core\Url;
 use Drupal\media\MediaInterface;
 use Drupal\media\MediaTypeInterface;
 use Drupal\media_library\Ajax\UpdateSelectionCommand;
-use Drupal\media_library\MediaLibraryState;
 use Drupal\media_library\MediaLibraryUiBuilder;
 use Symfony\Component\DependencyInjection\ContainerInterface;
 
@@ -85,19 +85,17 @@ public function getFormId() {
    *
    * @return \Drupal\media\MediaTypeInterface
    *   The media type.
+   *
+   * @throws \InvalidArgumentException
+   *   If the selected media type does not exist.
    */
   protected function getMediaType(FormStateInterface $form_state) {
     if ($this->mediaType) {
       return $this->mediaType;
     }
 
-    $state = $form_state->get('media_library_state');
-
-    if (!$state) {
-      throw new \InvalidArgumentException('The media library state is not present in the form state.');
-    }
-
-    $selected_type_id = $form_state->get('media_library_state')->getSelectedTypeId();
+    $state = $this->getMediaLibraryState($form_state);
+    $selected_type_id = $state->getSelectedTypeId();
     $this->mediaType = $this->entityTypeManager->getStorage('media_type')->load($selected_type_id);
 
     if (!$this->mediaType) {
@@ -115,6 +113,14 @@ public function buildForm(array $form, FormStateInterface $form_state) {
     $form['#suffix'] = '</div>';
     $form['#attached']['library'][] = 'media_library/style';
 
+    // The media library is loaded via AJAX, which means that the form action
+    // URL defaults to the current URL. However, to add media, we always need to
+    // submit the form to the media library URL, not whatever the current URL
+    // may be.
+    $form['#action'] = Url::fromRoute('media_library.ui', [], [
+      'query' => $this->getMediaLibraryState($form_state)->all(),
+    ])->toString();
+
     // The form is posted via AJAX. When there are messages set during the
     // validation or submission of the form, the messages need to be shown to
     // the user.
@@ -420,7 +426,7 @@ public function updateWidget(array &$form, FormStateInterface $form_state) {
     // contains the vertical tabs. Besides that, we also need to force the media
     // library to create a new instance of the media add form.
     // @see \Drupal\media_library\MediaLibraryUiBuilder::buildMediaTypeAddForm()
-    $state = MediaLibraryState::fromRequest($this->getRequest());
+    $state = $this->getMediaLibraryState($form_state);
     $state->remove('media_library_content');
     $state->set('_media_library_form_rebuild', TRUE);
     $library_ui = $this->libraryUiBuilder->buildUi($state);
@@ -431,6 +437,26 @@ public function updateWidget(array &$form, FormStateInterface $form_state) {
     return $response;
   }
 
+  /**
+   * Get the media library state from the form state.
+   *
+   * @param \Drupal\Core\Form\FormStateInterface $form_state
+   *   The current form state.
+   *
+   * @return \Drupal\media_library\MediaLibraryState
+   *   The media library state.
+   *
+   * @throws \InvalidArgumentException
+   *   If the media library state is not present in the form state.
+   */
+  protected function getMediaLibraryState(FormStateInterface $form_state) {
+    $state = $form_state->get('media_library_state');
+    if (!$state) {
+      throw new \InvalidArgumentException('The media library state is not present in the form state.');
+    }
+    return $state;
+  }
+
   /**
    * Returns the name of the source field for a media type.
    *

core/modules/media_library/src/Form/FileUploadForm.php

@@ -8,9 +8,11 @@
 use Drupal\Core\Field\TypedData\FieldItemDataDefinition;
 use Drupal\Core\File\Exception\FileWriteException;
 use Drupal\Core\File\FileSystemInterface;
+use Drupal\Core\Form\FormBuilderInterface;
 use Drupal\Core\Form\FormStateInterface;
 use Drupal\Core\Render\ElementInfoManagerInterface;
 use Drupal\Core\Render\RendererInterface;
+use Drupal\Core\Url;
 use Drupal\file\FileInterface;
 use Drupal\file\Plugin\Field\FieldType\FileFieldItemList;
 use Drupal\file\Plugin\Field\FieldType\FileItem;
@@ -113,7 +115,7 @@ protected function buildInputElement(array $form, FormStateInterface $form_state
     $item = $this->createFileItem($media_type);
 
     /** @var \Drupal\media_library\MediaLibraryState $state */
-    $state = $form_state->get('media_library_state');
+    $state = $this->getMediaLibraryState($form_state);
     if (!$state->hasSlotsAvailable()) {
       return $form;
     }
@@ -192,6 +194,16 @@ public function processUploadElement(array $element, FormStateInterface $form_st
     $element['upload_button']['#ajax'] = [
       'callback' => '::updateFormCallback',
       'wrapper' => 'media-library-wrapper',
+      // Add a fixed URL to post the form since AJAX forms are automatically
+      // posted to <current> instead of $form['#action'].
+      // @todo Remove when https://www.drupal.org/project/drupal/issues/2504115
+      //   is fixed.
+      'url' => Url::fromRoute('media_library.ui'),
+      'options' => [
+        'query' => $this->getMediaLibraryState($form_state)->all() + [
+          FormBuilderInterface::AJAX_FORM_REQUEST => TRUE,
+        ],
+      ],
     ];
     return $element;
   }

core/modules/media_library/src/Form/OEmbedForm.php

@@ -3,7 +3,9 @@
 namespace Drupal\media_library\Form;
 
 use Drupal\Core\Entity\EntityTypeManagerInterface;
+use Drupal\Core\Form\FormBuilderInterface;
 use Drupal\Core\Form\FormStateInterface;
+use Drupal\Core\Url;
 use Drupal\media\OEmbed\ResourceException;
 use Drupal\media\OEmbed\ResourceFetcherInterface;
 use Drupal\media\OEmbed\UrlResolverInterface;
@@ -121,6 +123,16 @@ protected function buildInputElement(array $form, FormStateInterface $form_state
       '#ajax' => [
         'callback' => '::updateFormCallback',
         'wrapper' => 'media-library-wrapper',
+        // Add a fixed URL to post the form since AJAX forms are automatically
+        // posted to <current> instead of $form['#action'].
+        // @todo Remove when https://www.drupal.org/project/drupal/issues/2504115
+        //   is fixed.
+        'url' => Url::fromRoute('media_library.ui'),
+        'options' => [
+          'query' => $this->getMediaLibraryState($form_state)->all() + [
+            FormBuilderInterface::AJAX_FORM_REQUEST => TRUE,
+          ],
+        ],
       ],
       '#attributes' => [
         'class' => ['media-library-add-form-oembed-submit'],

core/modules/media_library/src/MediaLibraryUiBuilder.php

@@ -306,6 +306,12 @@ protected function buildMediaLibraryView(MediaLibraryState $state) {
 
     $args = [$state->getSelectedTypeId()];
 
+    // Make sure the state parameters are set in the request so the view can
+    // pass the parameters along in the pager, filters etc.
+    $request = $view_executable->getRequest();
+    $request->query->add($state->all());
+    $view_executable->setRequest($request);
+
     $view_executable->setDisplay($display_id);
     $view_executable->preExecute($args);
     $view_executable->execute($display_id);

core/modules/media_library/src/Plugin/Field/FieldWidget/MediaLibraryWidget.php

@@ -2,9 +2,10 @@
 
 namespace Drupal\media_library\Plugin\Field\FieldWidget;
 
-use Drupal\Component\Serialization\Json;
 use Drupal\Component\Utility\NestedArray;
 use Drupal\Component\Utility\SortArray;
+use Drupal\Core\Ajax\AjaxResponse;
+use Drupal\Core\Ajax\OpenModalDialogCommand;
 use Drupal\Core\Entity\EntityTypeManagerInterface;
 use Drupal\Core\Field\FieldDefinitionInterface;
 use Drupal\Core\Field\FieldItemListInterface;
@@ -12,7 +13,6 @@
 use Drupal\Core\Field\WidgetBase;
 use Drupal\Core\Form\FormStateInterface;
 use Drupal\Core\Plugin\ContainerFactoryPluginInterface;
-use Drupal\Core\Url;
 use Drupal\media\Entity\Media;
 use Drupal\media_library\MediaLibraryUiBuilder;
 use Drupal\media_library\MediaLibraryState;
@@ -395,23 +395,32 @@ public function formElement(FieldItemListInterface $items, $delta, array $elemen
     $opener_id = static::$openerIdPrefix . $field_name . $id_suffix;
 
     $state = MediaLibraryState::create($opener_id, $allowed_media_type_ids, $selected_type_id, $remaining);
-    $dialog_options = Json::encode(MediaLibraryUiBuilder::dialogOptions());
 
     // Add a button that will load the Media library in a modal using AJAX.
     $element['media_library_open_button'] = [
-      '#type' => 'link',
-      '#title' => $this->t('Add media'),
+      '#type' => 'submit',
+      '#value' => $this->t('Add media'),
       '#name' => $field_name . '-media-library-open-button' . $id_suffix,
-      '#url' => $url = Url::fromRoute('media_library.ui', [], [
-        'query' => $state->all(),
-      ]),
       '#attributes' => [
-        'class' => ['button', 'use-ajax', 'media-library-open-button'],
-        'data-dialog-type' => 'modal',
-        'data-dialog-options' => $dialog_options,
+        'class' => [
+          'media-library-open-button',
+          'js-media-library-open-button',
+        ],
+        // The jQuery UI dialog automatically moves focus to the first :tabbable
+        // element of the modal, so we need to disable refocus on the button.
+        'data-disable-refocus' => 'true',
       ],
-      // Prevent errors in other widgets from preventing addition.
-      '#limit_validation_errors' => $limit_validation_errors,
+      '#media_library_state' => $state,
+      '#ajax' => [
+        'callback' => [static::class, 'openMediaLibrary'],
+        'progress' => [
+          'type' => 'throbber',
+          'message' => $this->t('Opening media library.'),
+        ],
+      ],
+      '#submit' => [],
+      // Allow the media library to be opened even if there are form errors.
+      '#limit_validation_errors' => [],
       '#access' => $cardinality_unlimited || $remaining > 0,
     ];
 
@@ -526,6 +535,25 @@ public static function removeItem(array $form, FormStateInterface $form_state) {
     $form_state->setRebuild();
   }
 
+  /**
+   * AJAX callback to open the library modal.
+   *
+   * @param array $form
+   *   The form array.
+   * @param \Drupal\Core\Form\FormStateInterface $form_state
+   *   The form state.
+   *
+   * @return \Drupal\Core\Ajax\AjaxResponse
+   *   An AJAX response to open the media library.
+   */
+  public static function openMediaLibrary(array $form, FormStateInterface $form_state) {
+    $triggering_element = $form_state->getTriggeringElement();
+    $library_ui = \Drupal::service('media_library.ui_builder')->buildUi($triggering_element['#media_library_state']);
+    $dialog_options = MediaLibraryUiBuilder::dialogOptions();
+    return (new AjaxResponse())
+      ->addCommand(new OpenModalDialogCommand($dialog_options['title'], $library_ui, $dialog_options));
+  }
+
   /**
    * Validates that newly selected items can be added to the widget.
    *

core/modules/media_library/tests/modules/media_library_test/config/install/core.entity_form_display.node.basic_page.default.yml

@@ -23,7 +23,12 @@ content:
   field_twin_media:
     type: media_library_widget
     weight: 122
-    settings: {  }
+    settings:
+      media_types:
+        - type_three
+        - type_one
+        - type_two
+        - type_four
     third_party_settings: {  }
     region: content
   field_single_media_type:

core/modules/media_library/tests/src/FunctionalJavascript/MediaLibraryTest.php

@@ -204,7 +204,7 @@ public function testWidget() {
     $assert_session->pageTextContains('Empty types media');
 
     // Assert generic media library elements.
-    $assert_session->elementExists('css', '.media-library-open-button[href*="field_unlimited_media"]')->click();
+    $assert_session->elementExists('css', '.media-library-open-button[name^="field_unlimited_media"]')->click();
     $assert_session->assertWaitOnAjaxRequest();
     $assert_session->pageTextContains('Add or select media');
     $this->assertFalse($assert_session->elementExists('css', '.media-library-select-all')->isVisible());
@@ -212,7 +212,7 @@ public function testWidget() {
 
     // Assert that the media type menu is available when more than 1 type is
     // configured for the field.
-    $assert_session->elementExists('css', '.media-library-open-button[href*="field_unlimited_media"]')->click();
+    $assert_session->elementExists('css', '.media-library-open-button[name^="field_unlimited_media"]')->click();
     $assert_session->assertWaitOnAjaxRequest();
     $menu = $assert_session->elementExists('css', '.media-library-menu');
     $this->assertTrue($menu->hasLink('Type One'));
@@ -224,7 +224,7 @@ public function testWidget() {
 
     // Assert that the media type menu is available when no types are configured
     // for the field. All types should be available in this case.
-    $assert_session->elementExists('css', '.media-library-open-button[href*="field_empty_types_media"]')->click();
+    $assert_session->elementExists('css', '.media-library-open-button[name^="field_empty_types_media"]')->click();
     $assert_session->assertWaitOnAjaxRequest();
     $menu = $assert_session->elementExists('css', '.media-library-menu');
     $this->assertTrue($menu->hasLink('Type One'));
@@ -236,7 +236,7 @@ public function testWidget() {
 
     // Assert that the media type menu is not available when only 1 type is
     // configured for the field.
-    $assert_session->elementExists('css', '.media-library-open-button[href*="field_single_media_type"]')->click();
+    $assert_session->elementExists('css', '.media-library-open-button[name^="field_single_media_type"]')->click();
     $assert_session->assertWaitOnAjaxRequest();
     $assert_session->elementTextContains('css', '.media-library-selected-count', '0 of 1 item selected');
     // Select a media item, assert the hidden selection field contains the ID of
@@ -249,14 +249,14 @@ public function testWidget() {
     $page->find('css', '.ui-dialog-titlebar-close')->click();
 
     // Assert the menu links can be sorted through the widget configuration.
-    $assert_session->elementExists('css', '.media-library-open-button[href*="field_twin_media"]')->click();
+    $assert_session->elementExists('css', '.media-library-open-button[name^="field_twin_media"]')->click();
     $assert_session->assertWaitOnAjaxRequest();
     $links = $page->findAll('css', '.media-library-menu a');
     $link_titles = [];
     foreach ($links as $link) {
       $link_titles[] = $link->getText();
     }
-    $expected_link_titles = ['Type One (active tab)', 'Type Two', 'Type Three', 'Type Four'];
+    $expected_link_titles = ['Type Three (active tab)', 'Type One', 'Type Two', 'Type Four'];
     $this->assertSame($link_titles, $expected_link_titles);
     $this->drupalGet('admin/structure/types/manage/basic_page/form-display');
     $assert_session->buttonExists('field_twin_media_settings_edit')->press();
@@ -270,7 +270,7 @@ public function testWidget() {
     $assert_session->assertWaitOnAjaxRequest();
     $assert_session->buttonExists('Hide row weights')->press();
     $this->drupalGet('node/add/basic_page');
-    $assert_session->elementExists('css', '.media-library-open-button[href*="field_twin_media"]')->click();
+    $assert_session->elementExists('css', '.media-library-open-button[name^="field_twin_media"]')->click();
     $assert_session->assertWaitOnAjaxRequest();
     $link_titles = array_map(function ($link) {
       return $link->getText();
@@ -279,7 +279,7 @@ public function testWidget() {
     $page->find('css', '.ui-dialog-titlebar-close')->click();
 
     // Assert media is only visible on the tab for the related media type.
-    $assert_session->elementExists('css', '.media-library-open-button[href*="field_unlimited_media"]')->click();
+    $assert_session->elementExists('css', '.media-library-open-button[name^="field_unlimited_media"]')->click();
     $assert_session->assertWaitOnAjaxRequest();
     $assert_session->pageTextContains('Dog');
     $assert_session->pageTextContains('Bear');
@@ -293,7 +293,7 @@ public function testWidget() {
     $page->find('css', '.ui-dialog-titlebar-close')->click();
 
     // Assert the exposed name filter of the view.
-    $assert_session->elementExists('css', '.media-library-open-button[href*="field_unlimited_media"]')->click();
+    $assert_session->elementExists('css', '.media-library-open-button[name^="field_unlimited_media"]')->click();
     $assert_session->assertWaitOnAjaxRequest();
     $session = $this->getSession();
     $session->getPage()->fillField('Name', 'Dog');
@@ -310,7 +310,7 @@ public function testWidget() {
 
     // Assert the media library contains header links to switch between the grid
     // and table display.
-    $assert_session->elementExists('css', '.media-library-open-button[href*="field_unlimited_media"]')->click();
+    $assert_session->elementExists('css', '.media-library-open-button[name^="field_unlimited_media"]')->click();
     $assert_session->assertWaitOnAjaxRequest();
     $assert_session->elementExists('css', '.media-library-view .media-library-item--grid');
     $assert_session->elementNotExists('css', '.media-library-view .media-library-item--table');
@@ -368,7 +368,7 @@ public function testWidget() {
 
     // Assert the selection is persistent in the media library modal, and
     // the number of selected items is displayed correctly.
-    $assert_session->elementExists('css', '.media-library-open-button[href*="field_twin_media"]')->click();
+    $assert_session->elementExists('css', '.media-library-open-button[name^="field_twin_media"]')->click();
     $assert_session->assertWaitOnAjaxRequest();
     // Assert the number of selected items is displayed correctly.
     $assert_session->elementExists('css', '.media-library-selected-count');
@@ -452,7 +452,7 @@ public function testWidget() {
     $assert_session->pageTextContains('Turtle');
 
     // Open the media library again and select another item.
-    $assert_session->elementExists('css', '.media-library-open-button[href*="field_twin_media"]')->click();
+    $assert_session->elementExists('css', '.media-library-open-button[name^="field_twin_media"]')->click();
     $assert_session->assertWaitOnAjaxRequest();
     $checkboxes = $page->findAll('css', '.media-library-view .js-click-to-select-checkbox input');
     $checkboxes[0]->click();
@@ -464,10 +464,10 @@ public function testWidget() {
     $assert_session->pageTextNotContains('Snake');
 
     // Assert we are not allowed to add more items to the field.
-    $assert_session->elementNotExists('css', '.media-library-open-button[href*="field_twin_media"]');
+    $assert_session->elementNotExists('css', '.media-library-open-button[name^="field_twin_media"]');
 
     // Assert the selection is cleared when the modal is closed.
-    $assert_session->elementExists('css', '.media-library-open-button[href*="field_unlimited_media"]')->click();
+    $assert_session->elementExists('css', '.media-library-open-button[name^="field_unlimited_media"]')->click();
     $assert_session->assertWaitOnAjaxRequest();
     // Nothing is selected yet.
     $this->assertFalse($checkboxes[0]->isChecked());
@@ -487,7 +487,7 @@ public function testWidget() {
     $this->assertFalse($checkboxes[3]->isChecked());
     // Close the dialog, reopen it and assert not is selected again.
     $page->find('css', '.ui-dialog-titlebar-close')->click();
-    $assert_session->elementExists('css', '.media-library-open-button[href*="field_unlimited_media"]')->click();
+    $assert_session->elementExists('css', '.media-library-open-button[name^="field_unlimited_media"]')->click();
     $assert_session->assertWaitOnAjaxRequest();
     $checkboxes = $page->findAll('css', '.media-library-view .js-click-to-select-checkbox input');
     $this->assertFalse($checkboxes[0]->isChecked());
@@ -521,7 +521,7 @@ public function testWidget() {
     $assert_session->pageTextNotContains('Horse');
     $assert_session->pageTextContains('Turtle');
     $assert_session->pageTextNotContains('Snake');
-    $assert_session->elementExists('css', '.media-library-open-button[href*="field_unlimited_media"]')->click();
+    $assert_session->elementExists('css', '.media-library-open-button[name^="field_unlimited_media"]')->click();
     $assert_session->assertWaitOnAjaxRequest();
     $assert_session->pageTextContains('Add or select media');
     // Select all media items of type one (should also contain Dog, again).
@@ -569,7 +569,7 @@ public function testWidgetAnonymous() {
     $this->drupalGet('node/add/basic_page');
 
     // Add to the unlimited cardinality field.
-    $assert_session->elementExists('css', '.media-library-open-button[href*="field_unlimited_media"]')->click();
+    $assert_session->elementExists('css', '.media-library-open-button[name^="field_unlimited_media"]')->click();
     $assert_session->assertWaitOnAjaxRequest();
 
     // Select the first media item (should be Dog).
@@ -617,6 +617,7 @@ public function testWidgetUpload() {
       'access administration pages',
       'access content',
       'create basic_page content',
+      'create type_one media',
       'create type_four media',
       'view media',
     ]);
@@ -624,22 +625,26 @@ public function testWidgetUpload() {
 
     // Visit a node create page and open the media library.
     $this->drupalGet('node/add/basic_page');
-    $assert_session->elementExists('css', '.media-library-open-button[href*="field_twin_media"]')->click();
+    $assert_session->elementExists('css', '.media-library-open-button[name^="field_twin_media"]')->click();
     $assert_session->assertWaitOnAjaxRequest();
     $assert_session->pageTextContains('Add or select media');
 
+    // Assert the upload form is not visible for default tab type_three without
+    // the proper permissions.
+    $assert_session->elementNotExists('css', '.media-library-add-form');
+
+    // Assert the upload form is not visible for the non-file based media type
+    // type_one.
+    $page->clickLink('Type One');
+    $assert_session->assertWaitOnAjaxRequest();
+    $assert_session->elementNotExists('css', '.media-library-add-form');
+
     // Assert the upload form is visible for type_four.
     $page->clickLink('Type Four');
     $assert_session->assertWaitOnAjaxRequest();
     $assert_session->fieldExists('Add files');
     $assert_session->pageTextContains('Maximum 2 files.');
 
-    // Assert the upload form is not visible for type_three.
-    $page->clickLink('Type Three');
-    $assert_session->assertWaitOnAjaxRequest();
-    $assert_session->fieldNotExists('files[upload][]');
-    $assert_session->pageTextNotContains('Maximum 2 files.');
-
     // Create a user that can create media for all media types.
     $user = $this->drupalCreateUser([
       'access administration pages',
@@ -658,16 +663,15 @@ public function testWidgetUpload() {
     $file_system = $this->container->get('file_system');
 
     // Add to the twin media field.
-    $assert_session->elementExists('css', '.media-library-open-button[href*="field_twin_media"]')->click();
+    $assert_session->elementExists('css', '.media-library-open-button[name^="field_twin_media"]')->click();
     $assert_session->assertWaitOnAjaxRequest();
     $assert_session->pageTextContains('Add or select media');
 
-    // Assert the default tab for media type one does not have an upload form.
-    $assert_session->fieldNotExists('files[upload][]');
+    // Assert the upload form is now visible for default tab type_three.
+    $assert_session->elementExists('css', '.media-library-add-form');
+    $assert_session->fieldExists('Add files');
 
-    // Assert we can upload a file to media type three.
-    $page->clickLink('Type Three');
-    $assert_session->assertWaitOnAjaxRequest();
+    // Assert we can upload a file to the default tab type_three.
     $assert_session->elementExists('css', '.media-library-add-form--without-input');
     $assert_session->elementNotExists('css', '.media-library-add-form--with-input');
     $page->attachFileToField('Add files', $this->container->get('file_system')->realpath($png_image->uri));
@@ -720,7 +724,7 @@ public function testWidgetUpload() {
     $assert_session->pageTextContains($png_image->filename);
 
     // Also make sure that we can upload to the unlimited cardinality field.
-    $assert_session->elementExists('css', '.media-library-open-button[href*="field_unlimited_media"]')->click();
+    $assert_session->elementExists('css', '.media-library-open-button[name^="field_unlimited_media"]')->click();
     $assert_session->assertWaitOnAjaxRequest();
     $assert_session->pageTextContains('Add or select media');
 
@@ -775,7 +779,7 @@ public function testWidgetUpload() {
     $assert_session->pageTextContains('Unlimited Cardinality Image');
 
     // Verify we can only upload the files allowed by the media type.
-    $assert_session->elementExists('css', '.media-library-open-button[href*="field_twin_media"]')->click();
+    $assert_session->elementExists('css', '.media-library-open-button[name^="field_twin_media"]')->click();
     $assert_session->assertWaitOnAjaxRequest();
     $assert_session->pageTextContains('Add or select media');
     $page->clickLink('Type Four');
@@ -835,7 +839,7 @@ public function testWidgetOEmbed() {
     $this->drupalGet('node/add/basic_page');
 
     // Add to the unlimited media field.
-    $assert_session->elementExists('css', '.media-library-open-button[href*="field_unlimited_media"]')->click();
+    $assert_session->elementExists('css', '.media-library-open-button[name^="field_unlimited_media"]')->click();
     $assert_session->assertWaitOnAjaxRequest();
     $assert_session->pageTextContains('Add or select media');
 
@@ -880,7 +884,7 @@ public function testWidgetOEmbed() {
 
     // Open the media library again for the unlimited field and go to the tab
     // for media type five.
-    $assert_session->elementExists('css', '.media-library-open-button[href*="field_unlimited_media"]')->click();
+    $assert_session->elementExists('css', '.media-library-open-button[name^="field_unlimited_media"]')->click();
     $assert_session->assertWaitOnAjaxRequest();
     $assert_session->pageTextContains('Add or select media');
     $page->clickLink('Type Five');