[@mantine/core] Popover: Add option to configure focus returning logi…

…c with returnFocus prop
mantinedev · Oct 5, 2022 · e6943ff · e6943ff
1 parent 0de019f
commit e6943ff
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 6 deletions.
diff --git a/src/mantine-core/src/Popover/Popover.context.ts b/src/mantine-core/src/Popover/Popover.context.ts
@@ -37,6 +37,7 @@ interface PopoverContext {
   withRoles: boolean;
   targetProps: Record<string, any>;
   disabled: boolean;
+  returnFocus: boolean;
 }
 
 export const [PopoverContextProvider, usePopoverContext] = createSafeContext<PopoverContext>(

diff --git a/src/mantine-core/src/Popover/Popover.story.tsx b/src/mantine-core/src/Popover/Popover.story.tsx
@@ -49,7 +49,7 @@ export function WithArrow() {
   );
 }
 
-export function Usage() {
+export function Controlled() {
   const [opened, setState] = useState(false);
 
   return (
@@ -61,17 +61,15 @@ export function Usage() {
         position="bottom"
         withArrow
         trapFocus
-        width={300}
         radius="md"
+        returnFocus
       >
         <Popover.Target>
           <Button onClick={() => setState((c) => !c)}>Toggle popover</Button>
         </Popover.Target>
 
         <Popover.Dropdown>
-          <input />
-          <input data-autofocus />
-          <input />
+          <Button onClick={() => setState(false)}>Close</Button>
         </Popover.Dropdown>
       </Popover>
     </div>

diff --git a/src/mantine-core/src/Popover/Popover.tsx b/src/mantine-core/src/Popover/Popover.tsx
@@ -82,6 +82,9 @@ export interface PopoverBaseProps {
 
   /** If set, popover dropdown will not render */
   disabled?: boolean;
+
+  /** Determines whether focus should be automatically returned to control when dropdown closes, false by default */
+  returnFocus?: boolean;
 }
 
 export interface PopoverProps extends PopoverBaseProps {
@@ -135,6 +138,7 @@ const defaultProps: Partial<PopoverProps> = {
   closeOnEscape: true,
   trapFocus: false,
   withRoles: true,
+  returnFocus: false,
   clickOutsideEvents: ['mousedown', 'touchstart'],
   zIndex: getDefaultZIndex('popover'),
   __staticSelector: 'Popover',
@@ -176,6 +180,7 @@ export function Popover(props: PopoverProps) {
     __staticSelector,
     withRoles,
     disabled,
+    returnFocus,
     ...others
   } = useComponentDefaultProps('Popover', defaultProps, props);
 
@@ -213,6 +218,7 @@ export function Popover(props: PopoverProps) {
     >
       <PopoverContextProvider
         value={{
+          returnFocus,
           disabled,
           controlled: popover.controlled,
           reference: (node) => {

diff --git a/src/mantine-core/src/Popover/PopoverDropdown/PopoverDropdown.tsx b/src/mantine-core/src/Popover/PopoverDropdown/PopoverDropdown.tsx
@@ -31,7 +31,7 @@ export function PopoverDropdown({
 
   const returnFocus = useFocusReturn({
     opened: ctx.opened,
-    shouldReturnFocus: false,
+    shouldReturnFocus: ctx.returnFocus,
   });
 
   const accessibleProps = ctx.withRoles