Popover: improve Storybook examples around onClose and onFocusOutside props #69675
Description
What problem does this address?
- The current Storybook examples for the
Popovercomponent don't show how theonCloseandonFocusOutsideprops work - The actions are not even fired, and that's because the whole
<Story />is rendered conditionally and removed from the React tree too early - This is also due to a bug in the default story, where clicking the Popover will also trigger a click on the "toggle"
button, thus closing the popover prematurely
What is your proposed solution?
Fix the popover closing prematurely in the default example
This can be done with something like the following changes:
diff --git i/packages/components/src/popover/stories/index.story.tsx w/packages/components/src/popover/stories/index.story.tsx
index 1e1d4225bd..8c3d83acfb 100644
--- i/packages/components/src/popover/stories/index.story.tsx
+++ w/packages/components/src/popover/stories/index.story.tsx
@@ -85,11 +85,15 @@ const PopoverWithAnchor = ( args: PopoverProps ) => {
export const Default: StoryObj< typeof Popover > = {
decorators: [
( Story ) => {
+ const buttonRef = useRef< HTMLButtonElement | undefined >();
const [ isVisible, setIsVisible ] = useState( false );
- const toggleVisible = () => {
+ const toggleVisible = ( event: React.MouseEvent ) => {
+ if ( buttonRef.current && event.target !== buttonRef.current ) {
+ return;
+ }
+
setIsVisible( ( state ) => ! state );
};
- const buttonRef = useRef< HTMLButtonElement | undefined >();
useEffect( () => {
buttonRef.current?.scrollIntoView?.( {
block: 'center',
This alone show allow for the onClose and onFocusOutside actions to at least be logged in the "actions" tab
Show how to use the onFocusOutside and onClose props to toggle Popover's visibility
We should consider changing the default example, or alternatively to introduce a new example, where the onClose and onFocusOusite are used to hide the popover.