[v8.3.x] Allow to bypass modal focus trap (#44001)

packages/grafana-ui/src/components/Modal/Modal.tsx

@@ -1,13 +1,14 @@
-import React, { PropsWithChildren, useCallback, useEffect } from 'react';
-import { Portal } from '../Portal/Portal';
 import { cx } from '@emotion/css';
+import { FocusScope } from '@react-aria/focus';
+import React, { PropsWithChildren, useCallback, useEffect } from 'react';
+
 import { useTheme2 } from '../../themes';
 import { IconName } from '../../types';
-import { getModalStyles } from './getModalStyles';
-import { ModalHeader } from './ModalHeader';
 import { IconButton } from '../IconButton/IconButton';
 import { HorizontalGroup } from '../Layout/Layout';
-import { FocusScope } from '@react-aria/focus';
+import { Portal } from '../Portal/Portal';
+import { getModalStyles } from './getModalStyles';
+import { ModalHeader } from './ModalHeader';
 
 export interface Props {
   /** @deprecated no longer used */
@@ -20,6 +21,7 @@ export interface Props {
   contentClassName?: string;
   closeOnEscape?: boolean;
   closeOnBackdropClick?: boolean;
+  trapFocus?: boolean;
 
   isOpen?: boolean;
   onDismiss?: () => void;
@@ -39,6 +41,7 @@ export function Modal(props: PropsWithChildren<Props>) {
     contentClassName,
     onDismiss: propsOnDismiss,
     onClickBackdrop,
+    trapFocus = true,
   } = props;
   const theme = useTheme2();
   const styles = getModalStyles(theme);
@@ -76,7 +79,7 @@ export function Modal(props: PropsWithChildren<Props>) {
         className={styles.modalBackdrop}
         onClick={onClickBackdrop || (closeOnBackdropClick ? onDismiss : undefined)}
       />
-      <FocusScope contain autoFocus restoreFocus>
+      <FocusScope contain={trapFocus} autoFocus restoreFocus>
         <div className={cx(styles.modal, className)}>
           <div className={headerClass}>
             {typeof title === 'string' && <DefaultModalHeader {...props} title={title} />}

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/LogsQueryEditor/ResourceField.tsx

@@ -2,6 +2,7 @@ import { css } from '@emotion/css';
 import { GrafanaTheme2 } from '@grafana/data';
 import { Button, Icon, Modal, useStyles2 } from '@grafana/ui';
 import React, { useCallback, useEffect, useState } from 'react';
+
 import Datasource from '../../datasource';
 import { AzureQueryEditorFieldProps, AzureResourceSummaryItem } from '../../types';
 import { Field } from '../Field';
@@ -49,7 +50,15 @@ const ResourceField: React.FC<AzureQueryEditorFieldProps> = ({ query, datasource
 
   return (
     <>
-      <Modal className={styles.modal} title="Select a resource" isOpen={pickerIsOpen} onDismiss={closePicker}>
+      <Modal
+        className={styles.modal}
+        title="Select a resource"
+        isOpen={pickerIsOpen}
+        onDismiss={closePicker}
+        // The growing number of rows added to the modal causes a focus
+        // error in the modal, making it impossible to click on new elements
+        trapFocus={false}
+      >
         <ResourcePicker
           resourcePickerData={datasource.resourcePickerData}
           resourceURI={resource}