Nested collapsible widgets are broken when data-enhaced="true" #7413

Closed
jbesta opened this Issue May 20, 2014 · 3 comments

Projects

None yet

3 participants

@jbesta
jbesta commented May 20, 2014

Problem

Considering following HTML snippet (which is provided below) with nested enhanced collapsible widgets does not work as expected.

Check this fiddle

Current behavior

  • by clicking button "Level2" (from snippet bellow) both collapsible contents are collapsed

Expected behaviour

  • by clicking "Level2" only its nearest ui-colapsible-content should be collapsed

Version

JQM 1.4.2

Suggested solution

jQuery selectors for matching widget's heading, content etc are broken and they also match elemenents in nested (http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js, lines 6783 - 6786). Fix those selectors.

HTML snippet

<div class="ui-collapsible expand-list ui-collapsible-themed-content"
                         data-iconpos="right" data-inset="false"
                         data-expanded-icon="carat-u"
                         data-collapsed-icon="carat-r" data-theme="b"
                         data-collapsed="false" data-role="collapsible"
                         data-enhanced="true">
                        <h3
                            class="ui-collapsible-heading"><a
                            class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-right ui-btn-b ui-icon-carat-u"
                            href="#">Level1<span
                            class="ui-collapsible-heading-status"> click to collapse contents</span></a>
                        </h3>

                        <div class="ui-collapsible-content ui-body-inherit"
                             aria-hidden="false">

                            <div>
                                <div class="ui-collapsible expand-list ui-collapsible-themed-content"
                                     data-iconpos="right" data-inset="false"
                                     data-expanded-icon="carat-u"
                                     data-collapsed-icon="carat-r"
                                     data-theme="b" data-collapsed="false" data-enhanced="true"
                                     data-role="collapsible"><h3
                                        class="ui-collapsible-heading"><a
                                        class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-right ui-btn-b ui-icon-carat-u"
                                        href="#">Level2<span
                                        class="ui-collapsible-heading-status"> click to collapse contents</span></a>
                                </h3>

                                    <div class="ui-collapsible-content ui-body-inherit"
                                         aria-hidden="false">

                                        <div>
                                           Content
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
@jaspermdegroot jaspermdegroot added this to the 1.4.4 milestone Jun 5, 2014
@jaspermdegroot
Member

I can confirm the issue on OS X / Chrome. Here are JS Bin test pages using latest code...

It works fine if the framework enhances the collapsibles: http://jsbin.com/AKOmUxa/172/edit
But it's broken when using data-enhanced="true": http://jsbin.com/AKOmUxa/174/edit

@gabrielschulhof
Contributor

Our selectors were too broad.

@gabrielschulhof
Contributor

We really should avoid recursive selection, like .find() and $( selector, element ) when constructing pre-rendered containers.

@gabrielschulhof gabrielschulhof self-assigned this Jun 6, 2014
@agcolom agcolom added a commit to agcolom/jquery-mobile that referenced this issue Nov 26, 2014
@gabrielschulhof @agcolom gabrielschulhof + agcolom Collapsible: Use more conservative selector to avoid recursion
Fixes gh-7413
9279b79
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment