We recently added collapsible fieldsets to a page that end-users see on our site. With that, I noticed that whenever we open a node that has collapsible fieldsets from the admin overlay, the collapsible fieldsets inside stop responding to clicks once the node is opened. If I remove "#overlay-context" from the URL, the fieldsets work again.
Steps to Reproduce
- Create a content type that displays fields in a collapsible fieldset. In our case, we've defined a custom theme template for a field in the node that renders content like this:
$output = ".... omitted ..."; $fieldset_output = array( 'fieldset' => array( '#type' => 'fieldset', '#title' => t('Metadata'), '#attributes' => array( 'class' => array( 'collapsible', 'collapsed', ) ), 'content' => array( '#markup' => $output, ), ), '#attached' => array( 'js' => array( 'misc/collapse.js', 'misc/form.js' ) ), ); print render($fieldset_output); - Create a new node of the content type that contains fieldsets in its public display.
- Locate the node created in step 2.
- Click on the title of the node in the listing, so that the overlay closes and the node is opened.
- Click on any of the fieldset titles within the node to attempt to expand/collapse them.
- Check the browser's JavaScript console.
Expected Results
- At step 5, the fieldset expands or collapses.
- At step 6, the JavaScript console does not contain any errors.
Actual Results
- At step 5, the fieldsets do not respond and are not styled like links.
- At step 6, the following JavaScript console error appears:
Uncaught Error: Syntax error, unrecognized expression: .error, #overlay-context=artifact/test-test at Function.Sizzle.error (jquery.js:1850) at tokenize (jquery.js:2460) at Function.Sizzle [as find] (jquery.js:1255) at $.fn.init.find (jquery.js:5730) at HTMLFieldSetElement. (collapse.js?pm932w:63) at Function.each (jquery.js:657) at $.fn.init.each (jquery.js:266) at $.fn.init.$.fn.once (jquery.once.js?v=1.2:55) at Object.attach (collapse.js?pm932w:58) at Object. (drupal.js?pm932w:112)
Here's a snippet of the code that seems to be causing the issue within misc/collapse.js:
Drupal.behaviors.collapse = {
attach: function (context, settings) {
$('fieldset.collapsible', context).once('collapse', function () {
var $fieldset = $(this);
// Expand fieldset if there are errors inside, or if it contains an
// element that is targeted by the URI fragment identifier.
var anchor = location.hash && location.hash != '#' ? ', ' + location.hash : '';
if ($fieldset.find('.error' + anchor).length) { // Line 63
$fieldset.removeClass('collapsed');
}
// ... rest of lines omitted ...
The odd part is that it looks like this portion of the collapsible fieldset code has remained mostly untouched since Drupal 7.19, so I'm surprised to be the first one to report this.
As a workaround, users have to manually remove #overlay-context=... from the URL, which is a bit annoying for content editors.
Comments
Comment #2
guypaddock commentedComment #3
guypaddock commentedComment #4
guypaddock commentedJust made some last minute copy edits I didn't catch while in preview.
Comment #5
guypaddock commentedDamn... looks like this was previously reported. Closing out as a dupe of #2395065: Certain URL fragments cause javascript error.