From a00576fd593d611ca1d1e2ec31548d11a796380d Mon Sep 17 00:00:00 2001
From: Ahmed Amin <81865328+ahmedamin20@users.noreply.github.com>
Date: Wed, 4 Dec 2024 15:39:39 +0200
Subject: [PATCH] Update VoiceVisualizer.tsx

add buttons type for all buttons because i am using this audio visualization package in a form and the default type of the button is submit

when i click record, pause or stop i found the from submitted so if fixed it by adding type="button" for all buttons here to change the default type of html button from submit to button to prevent any form submit while clicking on any button of this package
---
 src/components/VoiceVisualizer.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/VoiceVisualizer.tsx b/src/components/VoiceVisualizer.tsx
index ce8a033..60313a5 100644
--- a/src/components/VoiceVisualizer.tsx
+++ b/src/components/VoiceVisualizer.tsx
@@ -422,6 +422,7 @@ const VoiceVisualizer = ({
             <AudioWaveIcon color={defaultAudioWaveIconColor} />
             <AudioWaveIcon color={defaultAudioWaveIconColor} reflect />
             <button
+              type="button"
               onClick={startRecording}
               className="voice-visualizer__canvas-microphone-btn"
             >
@@ -522,6 +523,7 @@ const VoiceVisualizer = ({
             {isRecordingInProgress && (
               <div className="voice-visualizer__btn-container">
                 <button
+                  type="button"
                   className={`voice-visualizer__btn-left ${
                     isPausedRecording
                       ? "voice-visualizer__btn-left-microphone"
@@ -538,6 +540,7 @@ const VoiceVisualizer = ({
             )}
             {!isCleared && (
               <button
+                type="button"
                 className={`voice-visualizer__btn-left ${
                   isRecordingInProgress || isProcessingStartRecording
                     ? "voice-visualizer__visually-hidden"
@@ -554,6 +557,7 @@ const VoiceVisualizer = ({
             )}
             {isCleared && (
               <button
+                type="button"
                 className={`voice-visualizer__btn-center voice-visualizer__relative ${
                   isProcessingStartRecording
                     ? "voice-visualizer__btn-center--border-transparent"
@@ -571,6 +575,7 @@ const VoiceVisualizer = ({
               </button>
             )}
             <button
+              type="button"
               className={`voice-visualizer__btn-center voice-visualizer__btn-center-pause ${
                 !isRecordingInProgress
                   ? "voice-visualizer__visually-hidden"
@@ -582,6 +587,7 @@ const VoiceVisualizer = ({
             </button>
             {!isCleared && (
               <button
+                type="button"
                 onClick={clearCanvas}
                 className={`voice-visualizer__btn ${
                   controlButtonsClassName ?? ""
@@ -593,6 +599,7 @@ const VoiceVisualizer = ({
             )}
             {isDownloadAudioButtonShown && recordedBlob && (
               <button
+                type="button"
                 onClick={saveAudioFile}
                 className={`voice-visualizer__btn ${
                   controlButtonsClassName ?? ""