diff --git a/core/modules/media_library/js/media_library.click_to_select.es6.js b/core/modules/media_library/js/media_library.click_to_select.es6.js
index 6af9e43085..dae8d1380a 100644
--- a/core/modules/media_library/js/media_library.click_to_select.es6.js
+++ b/core/modules/media_library/js/media_library.click_to_select.es6.js
@@ -24,26 +24,23 @@
             .find('.js-click-to-select-checkbox input');
           $input.prop('checked', !$input.prop('checked')).trigger('change');
         });
+
       $('.js-click-to-select-checkbox input', context)
         .once('media-library-click-to-select')
+        // Adds checked effect to media items.
         .on('change', ({ currentTarget }) => {
           $(currentTarget)
             .closest('.js-click-to-select')
             .toggleClass('checked', $(currentTarget).prop('checked'));
+        })
+        // Adds focus effect to media items.
+        .on('focus blur', ({ currentTarget, type }) => {
+          $(currentTarget)
+            .closest('.media-library-item')
+            .toggleClass('is-focus', type === 'focus');
         });
-    },
-  };
 
-  /**
-   * Adds hover effect to media items.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches behavior to add a class when hovering over media items.
-   */
-  Drupal.behaviors.ClickToSelectHover = {
-    attach(context) {
+      // Adds hover effect to media items.
       $('.js-click-to-select-trigger, .js-click-to-select-checkbox', context)
         .once('media-library-item-hover')
         .on('mouseover mouseout', ({ currentTarget, type }) => {
@@ -53,24 +50,4 @@
         });
     },
   };
-
-  /**
-   * Adds focus effect to media items.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches behavior to add a focus effect to media items.
-   */
-  Drupal.behaviors.ClickToSelectFocus = {
-    attach(context) {
-      $('.js-click-to-select-checkbox input', context)
-        .once('media-library-item-focus')
-        .on('focus blur', ({ currentTarget, type }) => {
-          $(currentTarget)
-            .closest('.media-library-item')
-            .toggleClass('is-focus', type === 'focus');
-        });
-    },
-  };
 })(jQuery, Drupal);
diff --git a/core/modules/media_library/js/media_library.click_to_select.js b/core/modules/media_library/js/media_library.click_to_select.js
index 97f7d37e15..155e4c22f6 100644
--- a/core/modules/media_library/js/media_library.click_to_select.js
+++ b/core/modules/media_library/js/media_library.click_to_select.js
@@ -14,32 +14,23 @@
         var $input = $(event.currentTarget).closest('.js-click-to-select').find('.js-click-to-select-checkbox input');
         $input.prop('checked', !$input.prop('checked')).trigger('change');
       });
+
       $('.js-click-to-select-checkbox input', context).once('media-library-click-to-select').on('change', function (_ref) {
         var currentTarget = _ref.currentTarget;
 
         $(currentTarget).closest('.js-click-to-select').toggleClass('checked', $(currentTarget).prop('checked'));
-      });
-    }
-  };
-
-  Drupal.behaviors.ClickToSelectHover = {
-    attach: function attach(context) {
-      $('.js-click-to-select-trigger, .js-click-to-select-checkbox', context).once('media-library-item-hover').on('mouseover mouseout', function (_ref2) {
+      }).on('focus blur', function (_ref2) {
         var currentTarget = _ref2.currentTarget,
             type = _ref2.type;
 
-        $(currentTarget).closest('.media-library-item').toggleClass('is-hover', type === 'mouseover');
+        $(currentTarget).closest('.media-library-item').toggleClass('is-focus', type === 'focus');
       });
-    }
-  };
 
-  Drupal.behaviors.ClickToSelectFocus = {
-    attach: function attach(context) {
-      $('.js-click-to-select-checkbox input', context).once('media-library-item-focus').on('focus blur', function (_ref3) {
+      $('.js-click-to-select-trigger, .js-click-to-select-checkbox', context).once('media-library-item-hover').on('mouseover mouseout', function (_ref3) {
         var currentTarget = _ref3.currentTarget,
             type = _ref3.type;
 
-        $(currentTarget).closest('.media-library-item').toggleClass('is-focus', type === 'focus');
+        $(currentTarget).closest('.media-library-item').toggleClass('is-hover', type === 'mouseover');
       });
     }
   };
diff --git a/core/modules/media_library/src/Form/AddFormBase.php b/core/modules/media_library/src/Form/AddFormBase.php
index 0c4bd9de13..a7a79f9fd0 100644
--- a/core/modules/media_library/src/Form/AddFormBase.php
+++ b/core/modules/media_library/src/Form/AddFormBase.php
@@ -50,6 +50,13 @@ abstract class AddFormBase extends FormBase {
    */
   protected $mediaType;
 
+  /**
+   * The media view builder.
+   *
+   * @var \Drupal\Core\Entity\EntityViewBuilderInterface
+   */
+  protected $viewBuilder;
+
   /**
    * Constructs a AddFormBase object.
    *
@@ -61,6 +68,7 @@ abstract class AddFormBase extends FormBase {
   public function __construct(EntityTypeManagerInterface $entity_type_manager, MediaLibraryUiBuilder $library_ui_builder) {
     $this->entityTypeManager = $entity_type_manager;
     $this->libraryUiBuilder = $library_ui_builder;
+    $this->viewBuilder = $this->entityTypeManager->getViewBuilder('media');
   }
 
   /**
@@ -125,8 +133,10 @@ public function buildForm(array $form, FormStateInterface $form_state) {
       '#type' => 'status_messages',
     ];
 
-    $form['#attributes']['class'][] = 'media-library-add-form';
-    $form['#attributes']['class'][] = 'js-media-library-add-form';
+    $form['#attributes']['class'] = [
+      'media-library-add-form',
+      'js-media-library-add-form',
+    ];
 
     $added_media = $form_state->get('media');
     if (empty($added_media)) {
@@ -144,7 +154,12 @@ public function buildForm(array $form, FormStateInterface $form_state) {
         $form['media'][$delta] = $this->buildEntityFormElement($media, $form, $form_state, $delta);
       }
 
-      $form['selection'] = $this->buildSelection($form, $form_state);
+      $media_ids = array_filter(explode(',', $form_state->getValue('current_selection')));
+      if ($media_ids) {
+        $media_items = $this->entityTypeManager->getStorage('media')->loadMultiple($media_ids);
+        $form['selection'] = $this->buildCurrentSelectionArea($media_items, $form, $form_state);
+      }
+
       $form['actions'] = $this->buildActions($form, $form_state);
     }
 
@@ -269,6 +284,8 @@ protected function buildEntityFormElement(MediaInterface $media, array $form, Fo
   /**
    * Returns a render array containing the current selection.
    *
+   * @param \Drupal\media\MediaInterface[] $media_items
+   *   The current selection of media items.
    * @param array $form
    *   The complete form.
    * @param \Drupal\Core\Form\FormStateInterface $form_state
@@ -277,16 +294,7 @@ protected function buildEntityFormElement(MediaInterface $media, array $form, Fo
    * @return array
    *   A render array containing the current selection.
    */
-  protected function buildSelection(array $form, FormStateInterface $form_state) {
-    $media_ids = array_filter(explode(',', $form_state->getValue('current_selection')));
-
-    if (!$media_ids) {
-      return [];
-    }
-
-    $media_items = $this->entityTypeManager->getStorage('media')->loadMultiple($media_ids);
-    $view_builder = $this->entityTypeManager->getViewBuilder('media');
-
+  protected function buildCurrentSelectionArea($media_items, array $form, FormStateInterface $form_state) {
     $selection = [
       '#type' => 'container',
       '#attributes' => [
@@ -295,36 +303,47 @@ protected function buildSelection(array $form, FormStateInterface $form_state) {
         ],
       ],
     ];
-
     foreach ($media_items as $media_id => $media) {
-      $selection[$media_id] = [
+      $selection[$media_id] = $this->buildSelectedItemElement($media);
+    }
+    return $selection;
+  }
+
+  /**
+   * Returns a render array containing the current selection.
+   *
+   * @param \Drupal\media\MediaInterface $media
+   *   The media item.
+   *
+   * @return array
+   *   A render array of a selected media item.
+   */
+  protected function buildSelectedItemElement($media) {
+    return [
+      '#type' => 'container',
+      '#attributes' => [
+        'class' => [
+          'media-library-item',
+          'js-media-library-item',
+          'js-click-to-select',
+        ],
+      ],
+      'select' => [
         '#type' => 'container',
         '#attributes' => [
           'class' => [
-            'media-library-item',
-            'js-media-library-item',
-            'js-click-to-select',
+            'js-click-to-select-checkbox',
           ],
         ],
-        'select' => [
-          '#type' => 'container',
-          '#attributes' => [
-            'class' => [
-              'js-click-to-select-checkbox',
-            ],
-          ],
-          'select_checkbox' => [
-            '#type' => 'checkbox',
-            '#title' => $this->t('Select @name', ['@name' => $media->label()]),
-            '#title_display' => 'invisible',
-            '#return_value' => $media_id,
-          ],
+        'select_checkbox' => [
+          '#type' => 'checkbox',
+          '#title' => $this->t('Select @name', ['@name' => $media->label()]),
+          '#title_display' => 'invisible',
+          '#return_value' => $media->id(),
         ],
-        'rendered_entity' => $view_builder->view($media, 'media_library'),
-      ];
-    }
-
-    return $selection;
+      ],
+      'rendered_entity' => $this->viewBuilder->view($media, 'media_library'),
+    ];
   }
 
   /**
@@ -535,19 +554,11 @@ public function updateWidget(array &$form, FormStateInterface $form_state) {
       return $form;
     }
 
-    // Merge added and selected media.
-    $selected_media_ids = array_filter(explode(',', $form_state->getValue('current_selection')));
-    $added_media = $form_state->get('media') ?: [];
-    $added_media_ids = array_map(function (MediaInterface $media) {
-      return $media->id();
-    }, $added_media);
-    $media_ids = array_merge($selected_media_ids, $added_media_ids);
-
     // Pass the selection to the field widget based on the current widget ID.
     $opener_id = MediaLibraryState::fromRequest($this->getRequest())->getOpenerId();
     if ($field_id = MediaLibraryWidget::getOpenerFieldId($opener_id)) {
       return (new AjaxResponse())
-        ->addCommand(new InvokeCommand("[data-media-library-widget-value=\"$field_id\"]", 'val', [implode(',', $media_ids)]))
+        ->addCommand(new InvokeCommand("[data-media-library-widget-value=\"$field_id\"]", 'val', [implode(',', $this->getAllSelectedMediaIds($form, $form_state))]))
         ->addCommand(new InvokeCommand("[data-media-library-widget-update=\"$field_id\"]", 'trigger', ['mousedown']))
         ->addCommand(new CloseDialogCommand());
     }
@@ -568,4 +579,24 @@ protected function getSourceFieldName(MediaTypeInterface $media_type) {
       ->getName();
   }
 
+  /**
+   * Get all selected media IDs from the form state.
+   *
+   * @param array $form
+   *   The complete form.
+   * @param \Drupal\Core\Form\FormStateInterface $form_state
+   *   The current form state.
+   *
+   * @return int[]
+   *   An array containing the selected media IDs.
+   */
+  protected function getAllSelectedMediaIds(array &$form, FormStateInterface $form_state) {
+    $selected_media_ids = array_filter(explode(',', $form_state->getValue('current_selection')));
+    $added_media = $form_state->get('media') ?: [];
+    $added_media_ids = array_map(function (MediaInterface $media) {
+      return $media->id();
+    }, $added_media);
+    return array_merge($selected_media_ids, $added_media_ids);
+  }
+
 }