From 45b5ea94d4084156c8dd3c70288c57f638bb06af Mon Sep 17 00:00:00 2001
From: Armin Mehinovic <armin@mui.com>
Date: Fri, 22 Nov 2024 09:18:43 +0100
Subject: [PATCH] Skip rendering the whole startAdornment if speech recognition
 is not supported

---
 .../GridToolbarPromptControl.tsx              |  6 ++-
 .../components/promptControl/RecordButton.tsx | 44 +++++++++----------
 2 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/packages/x-data-grid-premium/src/components/promptControl/GridToolbarPromptControl.tsx b/packages/x-data-grid-premium/src/components/promptControl/GridToolbarPromptControl.tsx
index f3d37b32d71fb..7f08363cb4141 100644
--- a/packages/x-data-grid-premium/src/components/promptControl/GridToolbarPromptControl.tsx
+++ b/packages/x-data-grid-premium/src/components/promptControl/GridToolbarPromptControl.tsx
@@ -21,6 +21,8 @@ import { RecordButton, BrowserSpeechRecognition } from './RecordButton';
 
 type OwnerState = DataGridPremiumProcessedProps;
 
+const supportsSpeechRecognition = !!BrowserSpeechRecognition;
+
 const useUtilityClasses = (ownerState: OwnerState, recording: boolean) => {
   const { classes } = ownerState;
 
@@ -206,7 +208,7 @@ function GridToolbarPromptControl(props: GridToolbarPromptControlProps) {
     }
   });
 
-  const placeholder = BrowserSpeechRecognition
+  const placeholder = supportsSpeechRecognition
     ? apiRef.current.getLocaleText('toolbarPromptControlWithRecordingPlaceholder')
     : apiRef.current.getLocaleText('toolbarPromptControlPlaceholder');
 
@@ -229,7 +231,7 @@ function GridToolbarPromptControl(props: GridToolbarPromptControlProps) {
         error={!!error}
         helperText={error}
         InputProps={{
-          startAdornment: (
+          startAdornment: supportsSpeechRecognition && (
             <rootProps.slots.baseInputAdornment position="start">
               <RecordButton
                 className={classes.recordButton}
diff --git a/packages/x-data-grid-premium/src/components/promptControl/RecordButton.tsx b/packages/x-data-grid-premium/src/components/promptControl/RecordButton.tsx
index 24670708eb5ec..a3d678651999f 100644
--- a/packages/x-data-grid-premium/src/components/promptControl/RecordButton.tsx
+++ b/packages/x-data-grid-premium/src/components/promptControl/RecordButton.tsx
@@ -107,29 +107,27 @@ function RecordButton(props: RecordButtonProps) {
   };
 
   return (
-    BrowserSpeechRecognition && (
-      <rootProps.slots.baseTooltip
-        title={
-          recording
-            ? apiRef.current.getLocaleText('toolbarPromptControlRecordButtonActiveLabel')
-            : apiRef.current.getLocaleText('toolbarPromptControlRecordButtonDefaultLabel')
-        }
-      >
-        <div>
-          <rootProps.slots.baseIconButton
-            color={recording ? 'primary' : 'default'}
-            className={className}
-            disabled={disabled}
-            onClick={handleClick}
-            ref={buttonRef}
-            size="small"
-            edge="start"
-          >
-            <rootProps.slots.toolbarPromptRecordIcon fontSize="small" />
-          </rootProps.slots.baseIconButton>
-        </div>
-      </rootProps.slots.baseTooltip>
-    )
+    <rootProps.slots.baseTooltip
+      title={
+        recording
+          ? apiRef.current.getLocaleText('toolbarPromptControlRecordButtonActiveLabel')
+          : apiRef.current.getLocaleText('toolbarPromptControlRecordButtonDefaultLabel')
+      }
+    >
+      <div>
+        <rootProps.slots.baseIconButton
+          color={recording ? 'primary' : 'default'}
+          className={className}
+          disabled={disabled}
+          onClick={handleClick}
+          ref={buttonRef}
+          size="small"
+          edge="start"
+        >
+          <rootProps.slots.toolbarPromptRecordIcon fontSize="small" />
+        </rootProps.slots.baseIconButton>
+      </div>
+    </rootProps.slots.baseTooltip>
   );
 }