Merge pull request #15252 from craftcms/bugfix/15245-set-focus-within…

…-amends

Bugfix/15245 set focus within amends

CHANGELOG.md

@@ -8,6 +8,7 @@
 - Fixed a bug where asset indexes attempted to link to assets without URLs. ([#15235](https://github.com/craftcms/cms/pull/15235))
 - Fixed a bug where queue job tracking and element activity tracking could stop working after a user session expired and then was reauthenticated.
 - Fixed an error that occurred if an element select input was initialized without a `name` value.
+- Fixed a bug where Selectize inputs could be immediately focused and marked as dirty when opening an element editor slideout, if they were the first focusable element in the field layout. ([#15245](https://github.com/craftcms/cms/issues/15245))
 
 ## 4.10.2 - 2024-06-18
 

src/templates/_includes/forms/selectize.twig

@@ -197,6 +197,13 @@
                     this.$control_input.attr(attr.name, attr.value);
                 });
 
+            {% if not multi %}
+                // we need some sort of class here to be able to prevent Garnish.setFocusWithin()
+                // from auto-focusing and therefore opening the selectized field if it's the first one in a slideout
+                // see https://github.com/craftcms/cms/issues/15245
+                this.$control_input.addClass('prevent-autofocus');
+            {% endif %}
+
             // allow autocomplete;
             // despite what the documentation says, the "autofill_disable" seems to be ON by default,
             // and there's no "proper" way to disable it

src/web/assets/garnish/src/Garnish.js

@@ -487,10 +487,22 @@ Garnish = $.extend(Garnish, {
    */
   setFocusWithin: function (container) {
     const $container = $(container);
-    const $firstFocusable = $(container).find(
-      ':focusable:not(.checkbox):first'
+    let $firstFocusable = $(container).find(
+      ':focusable:not(.checkbox):not(.prevent-autofocus):first'
     );
 
+    // if the first visible .field container is not the parent of the first focusable element we found
+    // just focus on the container;
+    // this can happen if e.g. you have an entry without a title and the first field is a ckeditor field;
+    // in such case the second (or further) element would get focus on initial load, which can be confusing
+    // see https://github.com/craftcms/cms/issues/15245
+    if (
+      $container.find('.field:visible:first')[0] !==
+      $firstFocusable.parents('.field')[0]
+    ) {
+      $firstFocusable = [];
+    }
+
     if ($firstFocusable.length > 0) {
       $firstFocusable.trigger('focus');
     } else {