Repository: wagtail/wagtail
File: client/src/entrypoints/admin/core.js (JavaScript)

Code before:
  });
}

window.enableDirtyFormCheck = enableDirtyFormCheck;

$(() => {
  // Add class to the body from which transitions may be hung so they don't appear to transition as the page loads
  $('body').addClass('ready');

  // Enable nice focus effects on all fields. This enables help text on hover.
  // eslint-disable-next-line func-names
  $(document).on('focus mouseover', 'input,textarea,select', function () {
    $(this).closest('.field').addClass('focused');
    $(this).closest('fieldset').addClass('focused');
    $(this).closest('li').addClass('focused');
  });

  // eslint-disable-next-line func-names
  $(document).on('blur mouseout', 'input,textarea,select', function () {
    $(this).closest('.field').removeClass('focused');
    $(this).closest('fieldset').removeClass('focused');
    $(this).closest('li').removeClass('focused');
  });

  /* Functions that need to run/rerun when active tabs are changed */
  function resizeTextAreas() {
    // eslint-disable-next-line func-names
    $('textarea[data-autosize-on]').each(function () {
      // eslint-disable-next-line no-undef
      autosize.update($(this).get());
    });
  }

  // Resize autosize textareas on page load and tab changed
  $(document).ready(resizeTextAreas);
  $(document).on('wagtail:tab-changed', () => {
    resizeTextAreas();
  });

  // eslint-disable-next-line func-names
  $('.dropdown').each(function () {
    const $dropdown = $(this);

    $('.dropdown-toggle', $dropdown).on('click', (e) => {
      e.stopPropagation();
      $dropdown.toggleClass('open');

      if ($dropdown.hasClass('open')) {
        // If a dropdown is opened, add an event listener for document clicks to close it
        $(document).on('click.dropdown.cancel', (e2) => {
          const relTarg = e2.relatedTarget || e2.toElement;

Review comment (performance):
thought: this feels the right type of change to slowly move away from jQuery. Could this be accomplished with vanilla JS? 🤔 

Code after:
  });
}

window.enableDirtyFormCheck = enableDirtyFormCheck;

$(() => {
  // Add class to the body from which transitions may be hung so they don't appear to transition as the page loads
  $('body').addClass('ready');

  // Enable nice focus effects on all fields. This enables help text on hover.
  // eslint-disable-next-line func-names
  $(document).on('focus mouseover', 'input,textarea,select', function () {
    $(this).closest('.field').addClass('focused');
    $(this).closest('fieldset').addClass('focused');
    $(this).closest('li').addClass('focused');
  });

  // eslint-disable-next-line func-names
  $(document).on('blur mouseout', 'input,textarea,select', function () {
    $(this).closest('.field').removeClass('focused');
    $(this).closest('fieldset').removeClass('focused');
    $(this).closest('li').removeClass('focused');
  });

  /* Functions that need to run/rerun when active tabs are changed */
  function resizeTextAreas() {
    // eslint-disable-next-line func-names
    $('textarea[data-autosize-on]').each(function () {
      // eslint-disable-next-line no-undef
      autosize.update($(this).get());
    });
  }

  // Resize textareas on page load and when tab changed
  $(document).ready(resizeTextAreas);
  document.addEventListener('wagtail:tab-changed', resizeTextAreas);

  // eslint-disable-next-line func-names
  $('.dropdown').each(function () {
    const $dropdown = $(this);

    $('.dropdown-toggle', $dropdown).on('click', (e) => {
      e.stopPropagation();
      $dropdown.toggleClass('open');

      if ($dropdown.hasClass('open')) {
        // If a dropdown is opened, add an event listener for document clicks to close it
        $(document).on('click.dropdown.cancel', (e2) => {
          const relTarg = e2.relatedTarget || e2.toElement;

          // Only close dropdown if the click target wasn't a child of this dropdown