Inner tab title is wiped when content is loaded via AJAX.

Problem/Motivation

Setup tabs as you normally would and apply titles to each one of these tabs. For the choice to use AJAX, pick No: Load all tabs on page view., and the inner content tab titles will be displayed alright. Please, note I am referring to the title within the content area of a tab, revealed when you click the tab itself.

This is the reference of how things should work, and it delivers the content as expected. Now, update your quicktabs configuration to Yes: Load only the first tab on page view.

Once you reload the page, the title of the element set as default is loaded alright. The same doesn't apply, though, to all the other tabs that should be loaded via AJAX: their titles fail to be loaded, although the content of the rendered element selected for the tab is loaded.

Steps to reproduce

The steps to reproduce it were described in the topic above. It is worth mentioning I see this issue on a Drupal 11 installation.

Proposed resolution

As far as I could analyze it, there is a mismatch in terms of where the tab content is loaded. Currently, the content is loaded straight in the base of tab with this ID structure: '#quicktabs-tabpage-' . $instance . '-' . $tab . ' .quicktabs-tabpage-content' (this code is taken from QuickTabsController. But from the default template shipping with the module, I can see that is the ID of the wrapper element, and once the AJAX content is loaded and replaced, the the title within is wiped. We probably need to replace the content not straight at the base layer, but in a sublayer where it won't affect other content already applied to the tab.

Remaining tasks

Apply a fix to prevent the mismatch described above.

User interface changes

The fixed code should prevent tabs loaded via AJAX from removing the Quicktab title, thus fixing the bug.

API changes

--

Data model changes

--