Merge branch '5.x' into 5.9

# Conflicts:
#	src/web/assets/cp/dist/cp.js
#	src/web/assets/cp/dist/cp.js.map

Author: brandonkelly

CHANGELOG.md

@@ -4,6 +4,8 @@
 
 - Fixed a bug where the Live Preview drag bar wasn’t easily draggable when a nested slideout was open. ([#17781](https://github.com/craftcms/cms/issues/17781))
 - Fixed a bug where nested slideouts within Live Preview weren’t getting resized when the window was resized.
+- Fixed a bug where element index table column sort buttons weren’t being focused after activation. ([#18021](https://github.com/craftcms/cms/pull/18021))
+- Fixed a bug where component select inputs could show a “Choose” button even if disabled. ([#18032](https://github.com/craftcms/cms/issues/18032))
 
 ## 5.8.19 - 2025-10-28
 

packages/craftcms-playwright/README.md

@@ -30,7 +30,7 @@ All commands should be run from the cms repo’s location
 ## Notes
 
 - it uses the same fixtures mechanism as our Codeception tests (`*Fixture.php` files from `<cms repo directory>/tests/fixtures` are copied over to the ddev env and have their namespace adjusted)
-- it uses ddev with MySQL 8 as a default, but can be switched to PostgreSQL by editing `<cms repo directory>/tests-playwright/ddev-config/config.local.yaml` file
+- it uses ddev with MySQL 8 as a default, but can be switched to PostgreSQL by editing `<cms repo directory>/tests-playwright/ddev-config/config.local.yaml` file; remember to also check your `<cms repo directory>/tests-playwright/.env` file; 
 - tests are located here: `<cms repo directory>/tests-playwright/tests`
 
 > [!TIP]

src/services/Users.php

@@ -170,13 +170,13 @@ class Users extends Component
     public const EVENT_AFTER_ASSIGN_USER_TO_DEFAULT_GROUP = 'afterAssignUserToDefaultGroup';
 
     /**
-     * @event UserSavePhotoEvent The event that is triggered before a user photo is saved.
+     * @event UserPhotoEvent The event that is triggered before a user photo is saved.
      * @since 4.4.0
      */
     public const EVENT_BEFORE_SAVE_USER_PHOTO = 'beforeSaveUserPhoto';
 
     /**
-     * @event UserSavePhotoEvent The event that is triggered after a user photo is saved.
+     * @event UserPhotoEvent The event that is triggered after a user photo is saved.
      * @since 4.4.0
      */
     public const EVENT_AFTER_SAVE_USER_PHOTO = 'afterSaveUserPhoto';

src/templates/_includes/forms/componentSelect.twig

@@ -69,6 +69,11 @@
   <div class="flex flex-nowrap">
     {% set valueIds = values|map(component => component.getId()) %}
 
+    {% set buttonAttributeClasses = ['dashed', 'add-btn'] %}
+    {% if disabled and limit and valueIds|length >= limit %}
+        {% set buttonAttributeClasses = buttonAttributeClasses|merge(['hidden']) %}
+    {% endif %}
+
     {# the disclosureMenu already has support for description (shows below the label),
     so the description that goes into the info icon needs to be keyed by something else - 'info' #}
     {{ disclosureMenu(options|map(component => {
@@ -93,7 +98,7 @@
     }), {
       buttonLabel: 'Choose'|t('app'),
       buttonAttributes: {
-        class: ['dashed', 'add-btn'],
+        class: buttonAttributeClasses,
       },
       omitIfEmpty: false,
       withSearchInput,

src/web/assets/cp/dist/cp.js

@@ -1705,8 +1705,6 @@ Craft.BaseElementIndex = Garnish.Base.extend(
           cancelToken: this._createCancelToken(),
         })
           .then((response) => {
-            this.setIndexAvailable();
-
             if (this.settings.context === 'index') {
               if (Craft.cp.fixedHeader) {
                 const headerContainerHeight =
@@ -1721,7 +1719,9 @@ Craft.BaseElementIndex = Garnish.Base.extend(
               this.$main.scrollTop(0);
             }
 
-            this._updateView(this._viewParams, response.data);
+            this._updateView(this._viewParams, response.data).then(() => {
+              this.setIndexAvailable();
+            });
 
             if (this.criteriaHasChanged() && !this.sourceHasChanged()) {
               const itemLabel = this.getItemLabel();
@@ -2951,8 +2951,7 @@ Craft.BaseElementIndex = Garnish.Base.extend(
     },
 
     setIndexAvailable: function () {
-      this.$elements.removeClass('busy');
-      this.$updateSpinner.remove();
+      this.hideIndexLoadingStyles();
       this.isIndexBusy = false;
 
       // Refocus the previously-focused element
@@ -2971,6 +2970,14 @@ Craft.BaseElementIndex = Garnish.Base.extend(
       }
     },
 
+    /**
+     * Hides the loading styles on the element listing pane.
+     */
+    hideIndexLoadingStyles: function () {
+      this.$elements.removeClass('busy');
+      this.$updateSpinner.remove();
+    },
+
     createCustomizeSourcesModal: function () {
       // Recreate it each time
       var modal = new Craft.CustomizeSourcesModal(this, {

src/web/assets/cp/dist/cp.js.map

@@ -645,7 +645,7 @@ Craft.TableElementIndexView = Craft.BaseElementIndexView.extend({
     this.elementIndex.updateElements();
 
     // No need for two spinners
-    this.elementIndex.setIndexAvailable();
+    this.elementIndex.hideIndexLoadingStyles();
   },
 
   _updateTableAttributes: function ($element, tableAttributes) {

src/web/assets/cp/src/js/BaseElementIndex.js

@@ -11,4 +11,13 @@ REPO_PATH=../../../.
 # the actual namespace of the *Fixture.php files
 CODECEPTION_FIXTURES_NAMESPACE='crafttests\fixtures'
 # the location of the *Fixture.php files relative to the root of your repo
-CODECEPTION_FIXTURES_PATH=tests/fixtures
+CODECEPTION_FIXTURES_PATH=tests/fixtures
+
+CRAFT_DB_DRIVER="mysql"
+CRAFT_DB_SERVER="db"
+CRAFT_DB_PORT="3306"
+CRAFT_DB_DATABASE="db"
+CRAFT_DB_USER="db"
+CRAFT_DB_PASSWORD="db"
+CRAFT_DB_SCHEMA="public"
+CRAFT_DB_TABLE_PREFIX=""

src/web/assets/cp/src/js/TableElementIndexView.js

@@ -130,4 +130,14 @@ test.describe('Sorting', () => {
       await page.reload();
     }
   });
+
+  test('Focus is managed when sorting from column header buttons', async ({
+    page,
+    baseURL,
+  }) => {
+    const postDateButton = page.getByRole('button', {name: 'Post Date'});
+    await postDateButton.click();
+    await expect(postDateButton).toBeFocused();
+    await page.reload();
+  });
 });