Allow outside click for focustrap

This commit is contained in:
Josh Perez 2022-04-08 14:50:26 -04:00 committed by GitHub
parent 0f16ef5dd6
commit 28c1346a25
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 6 additions and 5 deletions

View file

@ -258,7 +258,8 @@ $z-index-on-top-of-everything: 9000;
// The scroll down button should be above everything in the timeline but // The scroll down button should be above everything in the timeline but
// popups, tooltips, toasts, and other items should stack above it. // popups, tooltips, toasts, and other items should stack above it.
$z-index-scroll-down-button: 10; $z-index-scroll-down-button: 10;
$z-index-calling: 101; $z-index-stories: 97;
$z-index-above-popup: 102; $z-index-calling: 98;
$z-index-above-popup: 101;
$z-index-calling-pip: 103; $z-index-calling-pip: 103;
$z-index-above-context-menu: 126; $z-index-above-context-menu: 126;

View file

@ -10,7 +10,7 @@
top: 0; top: 0;
user-select: none; user-select: none;
width: 100%; width: 100%;
z-index: $z-index-popup-overlay; z-index: $z-index-stories;
&__pane { &__pane {
background: $color-gray-80; background: $color-gray-80;

View file

@ -83,7 +83,7 @@ export const StoriesPane = ({
}, [searchTerm, stories]); }, [searchTerm, stories]);
return ( return (
<FocusTrap> <FocusTrap focusTrapOptions={{ allowOutsideClick: true }}>
<div> <div>
<div className="Stories__pane__header"> <div className="Stories__pane__header">
<button <button

View file

@ -198,7 +198,7 @@ export const StoryViewer = ({
}, [navigateStories]); }, [navigateStories]);
return ( return (
<FocusTrap> <FocusTrap focusTrapOptions={{ allowOutsideClick: true }}>
<div className="StoryViewer"> <div className="StoryViewer">
<div className="StoryViewer__overlay" /> <div className="StoryViewer__overlay" />
<div className="StoryViewer__content"> <div className="StoryViewer__content">