Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 21 additions & 1 deletion packages/react-aria-components/src/Sheet.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -448,8 +448,28 @@ export const SheetOverlay = forwardRef(function SheetOverlay(
scrollAlongAxis(scroller, axis, target, true);

// The close event is dispatched on the overlay wrapper by the IntersectionObserver below.
// Also finish once the scroll rests at the exit position, in case the observer's last report
// never arrives (seen on busy machines), so the overlay doesn't stay over the page.
return new Promise<void>(resolve => {
element.addEventListener('react-aria-sheet-close', () => resolve(), {once: true});
let isAtTarget = () =>
Math.abs((axis === 'y' ? scroller.scrollTop : scroller.scrollLeft) - target) < 1;
let done = () => {

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for easier reading, please move this declaration before where it is used

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved it up.

element.removeEventListener('react-aria-sheet-close', done);
scroller.removeEventListener('scrollend', onScrollEnd);
resolve();
};
let onScrollEnd = () => {
if (isAtTarget()) {
done();
}
};
element.addEventListener('react-aria-sheet-close', done);
// eslint-disable-next-line rsp-rules/no-non-composing-event-listener
scroller.addEventListener('scrollend', onScrollEnd);
// A scroll to the current position fires no scrollend.
if (isAtTarget()) {
done();
}
});
}}>
{renderProps => (
Expand Down
61 changes: 61 additions & 0 deletions packages/react-aria-components/test/Sheet.browser.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
/*
* Copyright 2026 Adobe. All rights reserved.
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/

import {Button} from '../src/Button';
import {expect, it} from 'vitest';
import {Heading} from '../src/Heading';
import {page, userEvent} from 'vitest/browser';
import React from 'react';
import {render} from 'vitest-browser-react';
import {Sheet, SheetContent, SheetOverlay, SheetTrigger} from '../src/Sheet';

function SheetExample() {
return (
<SheetTrigger>
<Button>Open sheet</Button>
<SheetOverlay>
<Sheet style={{height: 200, background: 'white'}}>
<SheetContent>
<Heading slot="title">Sheet title</Heading>
</SheetContent>
</Sheet>
</SheetOverlay>
</SheetTrigger>
);
}

it('finishes closing once the exit scroll ends, even if the sheet is never reported hidden', async () => {
// Drop the observer's report that the sheet has left the viewport.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok yeah, so this is what i was concerned about, if we have to forcibly drop this, then we don't yet have enough information. We need more research done on why it would be dropped in your CI.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed, without a root cause this isn't worth adding. I'll close this for now and reopen if I find out why it's dropped on our CI.

let NativeIntersectionObserver = window.IntersectionObserver;
window.IntersectionObserver = class extends NativeIntersectionObserver {
constructor(callback: IntersectionObserverCallback, options?: IntersectionObserverInit) {
super((entries, observer) => {
if (entries.every(entry => entry.intersectionRatio > 0)) {
callback(entries, observer);
}
}, options);
}
};

try {
await render(<SheetExample />);
await userEvent.click(page.getByRole('button', {name: 'Open sheet'}));
// The dialog is focused once the sheet has entered.
let dialog = page.getByRole('dialog').element();
await expect.poll(() => document.activeElement).toBe(dialog);

await userEvent.keyboard('{Escape}');
await expect.poll(() => document.querySelector('[role="dialog"]')).toBeNull();
} finally {
window.IntersectionObserver = NativeIntersectionObserver;
}
});
Loading