Ng-bootstrap: Accordion doesn't focus to opened title on large content

Created on 1 Oct 2018  路  3Comments  路  Source: ng-bootstrap/ng-bootstrap

Bug description:

Open the StackBlirz demo, while having tab 1 open, click on tab 2

Expected Result:
Focus is set to header

Actual Result:
Focus is not set to the header, and scrolling isn't changed.

Link to minimally-working StackBlitz that reproduces the issue:
https://stackblitz.com/edit/angular-hqae49

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 6.0.6

ng-bootstrap: 3.2.2

Bootstrap: 4.1.3

accordion bug

All 3 comments

I had a look at this one. My two cents:

1) When clicking on the header text, the button inside the header is focused. It's the defined behavior provided by Bootstrap : https://getbootstrap.com/docs/4.2/components/collapse/#accordion-example

2) The scroll must be done on the first scrolled parent, which is not necessarily the body. scrollIntoView act only on the body so it doesn't help. The idea (is there a better one ?) would be to detect the first scrolled parent, inspect if the header is in the visible area and scroll if necessary. But is it something to be handle by the library or by the application ? (as the expected behavior can differ depending on the cases)

I just tested on Bootstrap website (I manually added a lot of content in the first panel) and they don't manage at all this use-case.
Nothing special is done, it's even worst as they have animations, so when you do that, the scroll is 芦 _moving_ 禄 because the viewport size is changing.

This issue is indeed causing unnecessary trouble.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

fletz picture fletz  路  3Comments

asadsahi picture asadsahi  路  3Comments

mahmoudajawad picture mahmoudajawad  路  3Comments

elainebyrne picture elainebyrne  路  3Comments

beaverusiv picture beaverusiv  路  3Comments