#15225 closed bug (notabug)

Opened August 09, 2017 01:45PM UTC

Closed August 10, 2017 01:55AM UTC

Accordion header remains focused after collapse

Reported by: ledzeppln Owned by:
Priority: minor Milestone: none
Component: ui.accordion Version: 1.12.1
Keywords: Cc:
Blocked by: Blocking:
Description

If I create an accordion with the collapsible option set to true, the head panel remains in a focused state after collapse and the mouse pointer moves away.

    <!-- Accordion -->
    <h2 class="demoHeaders">Accordion</h2>
    <div id="accordion">
        <h3>First</h3>
        <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
        <h3>Second</h3>
        <div>Phasellus mattis tincidunt nibh.</div>
        <h3>Third</h3>
        <div>Nam dui erat, auctor a, dignissim quis.</div>
    </div>

    <script type="text/javascript">
        $("#accordion").accordion({
            active: false,
            collapsible: true
        });
    </script>

Though it isn't obvious given the base styling, it can be very obvious based on a custom theme.

http://jsfiddle.net/othczLL6/1/

Attachments (0)
Change History (3)

Changed August 09, 2017 02:00PM UTC by ledzeppln comment:1

description: If I create an accordion with the collapsible option set to true, the head panel remains in a focused state after collapse and the mouse pointer moves away. \ \ {{{ \ <!-- Accordion --> \ <h2 class="demoHeaders">Accordion</h2> \ <div id="accordion"> \ <h3>First</h3> \ <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> \ <h3>Second</h3> \ <div>Phasellus mattis tincidunt nibh.</div> \ <h3>Third</h3> \ <div>Nam dui erat, auctor a, dignissim quis.</div> \ </div> \ }}} \ \ \ {{{ \ <script type="text/javascript"> \ $("#accordion").accordion({ \ active: false, \ collapsible: true \ }); \ </script> \ }}} \ \ → If I create an accordion with the collapsible option set to true, the head panel remains in a focused state after collapse and the mouse pointer moves away. \ \ {{{ \ <!-- Accordion --> \ <h2 class="demoHeaders">Accordion</h2> \ <div id="accordion"> \ <h3>First</h3> \ <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> \ <h3>Second</h3> \ <div>Phasellus mattis tincidunt nibh.</div> \ <h3>Third</h3> \ <div>Nam dui erat, auctor a, dignissim quis.</div> \ </div> \ }}} \ \ \ {{{ \ <script type="text/javascript"> \ $("#accordion").accordion({ \ active: false, \ collapsible: true \ }); \ </script> \ }}} \ \ Though it isn't obvious given the base styling, it can be very obvious given your custom theme. \ http://jsfiddle.net/othczLL6/1/

Changed August 09, 2017 02:03PM UTC by ledzeppln comment:2

description: If I create an accordion with the collapsible option set to true, the head panel remains in a focused state after collapse and the mouse pointer moves away. \ \ {{{ \ <!-- Accordion --> \ <h2 class="demoHeaders">Accordion</h2> \ <div id="accordion"> \ <h3>First</h3> \ <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> \ <h3>Second</h3> \ <div>Phasellus mattis tincidunt nibh.</div> \ <h3>Third</h3> \ <div>Nam dui erat, auctor a, dignissim quis.</div> \ </div> \ }}} \ \ \ {{{ \ <script type="text/javascript"> \ $("#accordion").accordion({ \ active: false, \ collapsible: true \ }); \ </script> \ }}} \ \ Though it isn't obvious given the base styling, it can be very obvious given your custom theme. \ http://jsfiddle.net/othczLL6/1/ → If I create an accordion with the collapsible option set to true, the head panel remains in a focused state after collapse and the mouse pointer moves away. \ \ {{{ \ <!-- Accordion --> \ <h2 class="demoHeaders">Accordion</h2> \ <div id="accordion"> \ <h3>First</h3> \ <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> \ <h3>Second</h3> \ <div>Phasellus mattis tincidunt nibh.</div> \ <h3>Third</h3> \ <div>Nam dui erat, auctor a, dignissim quis.</div> \ </div> \ }}} \ \ \ {{{ \ <script type="text/javascript"> \ $("#accordion").accordion({ \ active: false, \ collapsible: true \ }); \ </script> \ }}} \ \ Though it isn't obvious given the base styling, it can be very obvious based on a custom theme. \ http://jsfiddle.net/othczLL6/1/

Changed August 10, 2017 01:55AM UTC by scottgonzalez comment:3

component: ui.core → ui.accordion
resolution: → notabug
status: new → closed

Correct, because it's still focused even if the mouse moves away. Moving the mouse never moves focus.