Fixed #31483 -- Rewrote change_form.js without jQuery.

The use of $(document).ready() was removed. The script is loaded at the
end of the document. Therefore, the referenced DOM elements are already
available and the script does not need to wait for the full DOM to be
ready before continuing.

Now that the script has no external dependencies, it can be loaded
asynchronously. As such, the async attribute was added to the script
element.

2 files changed, 17 insertions, 8 deletions

diff --git a/django/contrib/admin/static/admin/js/change_form.js b/django/contrib/admin/static/admin/js/change_form.js
index eafc6e5f14..7fc8991727 100644
--- a/django/contrib/admin/static/admin/js/change_form.js
+++ b/django/contrib/admin/static/admin/js/change_form.js
@@ -1,9 +1,17 @@
-(function($) {
+(function() {
     'use strict';
-    $(document).ready(function() {
-        var modelName = $('#django-admin-form-add-constants').data('modelName');
-        if (modelName) {
-            $('form#' + modelName + '_form :input:visible:enabled:first').focus();
+    var inputTags = ['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA'];
+    var modelName = document.getElementById('django-admin-form-add-constants').dataset.modelName;
+    if (modelName) {
+        var form = document.getElementById(modelName + '_form');
+        for (var i = 0; i < form.elements.length; i++) {
+            var element = form.elements[i];
+            // HTMLElement.offsetParent returns null when the element is not
+            // rendered.
+            if (inputTags.includes(element.tagName) && !element.disabled && element.offsetParent) {
+                element.focus();
+                break;
+            }
         }
-    });
-})(django.jQuery);
+    }
+})();
diff --git a/django/contrib/admin/templates/admin/change_form.html b/django/contrib/admin/templates/admin/change_form.html
index fe19b40e85..21b1c9bceb 100644
--- a/django/contrib/admin/templates/admin/change_form.html
+++ b/django/contrib/admin/templates/admin/change_form.html
@@ -68,7 +68,8 @@
             src="{% static 'admin/js/change_form.js' %}"
             {% if adminform and add %}
                 data-model-name="{{ opts.model_name }}"
-            {% endif %}>
+            {% endif %}
+            async>
     </script>
 {% endblock %}