Search and Top Navigation
#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.
Attachments (0)
Change History (3)
Changed August 09, 2017 02:00PM UTC by 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 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 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.