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

BotanMan picture BotanMan  路  3Comments

GuitarHero1969 picture GuitarHero1969  路  3Comments

AlexKhymenko picture AlexKhymenko  路  3Comments

CarlosTorrecillas picture CarlosTorrecillas  路  3Comments

doxasoft picture doxasoft  路  3Comments