Collapse (Accordion) on collapse causes page to scroll

[kdeasymoneysniper]

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

Use the Collapse component and add in the prop 'accordion' to make it an accordion. Ensure the page is scrollable.

What is expected?

When the first panel is open, and the second panel is clicked, the first panel would close, and the second panel would open. I thought that when this happens, the page should not scroll and I should be kept on the same level in the screen.

What is actually happening?

The page actually scrolls when this happens, and the scrolling is due to the closing of the first panel.

Environment	Info
antd	4.4.3
React	16.13.1
System	Windows 10
Browser	Chrome 84

---

I understand that the page scrolling might be okay and desirable for some, but is there a way to ensure it does not scroll?

[afc163]

It is chrome issue, firefox works well. I think nothing we can do about it.

[ncharan511]

Hi, I have similar issue in our react accordion component. Expand/collapse is on div element which is non-interactive element, so once I remove the tabindex on that div it works as expected in chrome, but I lost keyboard navigation feature which is a big compromise. But as of now, it looks like this is an chrome issue since its working in all popular browsers including IE.

[MihaiWill]

@ncharan511 sounds good to me, please tell me how to remove tabindex?

[ncharan511]

@ncharan511 sounds good to me, please tell me how to remove tabindex?

what exactly is your issue?

[edpark11]

FWIW had the same problem and executed the following terrible workaround.

const scrollRef = React.useRef(null);
const executeScroll = () =>
  scrollRef?.current?.scrollIntoView({
    behavior: 'smooth',
    inline: 'nearest',
  });

and then:

<Collapse accordion={true} onChange={() => window.setTimeout(() => executeScroll(), 500) }>
<Collapse.Panel>
<div ref={scrollRef} />
...content1...
</Collapse.Panel>
<Collapse.Panel>
<div ref={scrollRef} />
...content2...
</Collapse.Panel>
</Collapse>

Because only one Collapse.Panel is open a time, the scrollRef is essentially dynamically updated to be the current open panel, and when a new panel is updated, it will automatically scroll to that panel.

Yes, I know it is a terrible workaround but the current behavior (which can appear as random jumping around when opening/closing accordions) is very confusing in Chrome. I hope Chrome is updated at some point so that this behavior is fixed.

[ncharan511]

FWIW had the same problem and executed the following terrible workaround.

const scrollRef = React.useRef(null);
const executeScroll = () =>
  scrollRef?.current?.scrollIntoView({
    behavior: 'smooth',
    inline: 'nearest',
  });

and then:

<Collapse accordion={true} onChange={() => window.setTimeout(() => executeScroll(), 500) }>
<Collapse.Panel>
<div ref={scrollRef} />
...content1...
</Collapse.Panel>
<Collapse.Panel>
<div ref={scrollRef} />
...content2...
</Collapse.Panel>
</Collapse>

Because only one Collapse.Panel is open a time, the scrollRef is essentially dynamically updated to be the current open panel, and when a new panel is updated, it will automatically scroll to that panel.

Yes, I know it is a terrible workaround but the current behavior (which can appear as random jumping around when opening/closing accordions) is very confusing in Chrome. I hope Chrome is updated at some point so that this behavior is fixed.

Did you try moving the div above the collapse and making the collapse as child element of the div? Like I mentioned, all I have to do is Move the div to the correct spot.

[thekennysong]

could you provide a code example @ncharan511 ? I tried doing what you recommended and still haven't gotten it to work.

[ncharan511]

could you provide a code example @ncharan511 ? I tried doing what you recommended and still haven't gotten it to work.

I cannot post the code here. Here is what I did

1. create a div above the component
2. make sure you add the component as ref in the div's onfocus and onblur event functions.

<div
                    ref={(ref): void => {
                      refs.current.push(ref);
                    }}
                    id={`tab-${index}`}
                    tabIndex={0}
                    style={{ width: 0 }}
                    onFocus={(): void => AddFocus(refofyourelement)}
                    onBlur={(): void => {
                      RemoveFocus(refofyourelement);
                    }}
                  />

[afc163]

It does not happened in latest version of Chrome now.

[gaowujie2004]

我使用 Chrome 116 能复现。为什么要把当前问题当做无效的呢