Skip rendering the whole startAdornment if speech recognition is not …

…supported
mui · Nov 22, 2024 · 45b5ea9 · 45b5ea9
1 parent df05425
commit 45b5ea9
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 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
@@ -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
@@ -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>
   );
 }