fix(ToggleSwitch): correct onChange handler for response pane (#8520)

* fix(ToggleSwitch): correct onChange handler to prevent unintended toggling

* fix(ToggleSwitch): update onChange handler to correctly trigger toggle action

* fix(tests): enhance clipboard handling and improve response pane interactions

* fix(ToggleSwitch): change event handler from onChange to onInput for better toggle interaction
fix(tests): update response pane click action to ensure proper interaction with dropdown

* fix(tests): remove clipboard initialization from test setup

packages/bruno-app/src/components/ToggleSwitch/index.js

@@ -5,14 +5,17 @@ const ToggleSwitch = ({ isOn, handleToggle, size = 'm', activeColor, ...props })
   const id = useId();
 
   return (
-    <Switch size={size} {...props}>
+    <Switch
+      size={size}
+      {...props}
+    >
       <Checkbox
         checked={isOn}
         id={id}
         type="checkbox"
         size={size}
         activeColor={activeColor}
-        onChange={handleToggle}
+        onInput={handleToggle}
       />
       <Label htmlFor={id}>
         <Inner size={size} />

packages/bruno-app/src/ui/MenuDropdown/index.js

@@ -490,7 +490,7 @@ const MenuDropdown = forwardRef(({
     >
       <div {...(testId && { 'data-testid': testId + '-dropdown' })}>
         {header && (
-          <div className="dropdown-header-container" onClick={handleClickOutside}>
+          <div className="dropdown-header-container">
             {header}
             <div className="dropdown-divider"></div>
           </div>

playwright/index.ts

@@ -439,7 +439,6 @@ export const test = baseTest.extend<
 
     const context = await app.context();
     const page = await waitForReadyPage(app);
-
     await usePageWithTracing(context, page, testInfo, use, { initTracing: true });
   }
 });

tests/utils/page/actions.ts

@@ -1174,7 +1174,7 @@ const setResponsePreviewMode = async (page: Page, mode: 'editor' | 'preview') =>
   await responseFormatTab.click();
   const dropdown = page.getByTestId('format-response-tab-dropdown');
   await dropdown.waitFor({ state: 'visible', timeout: 5000 });
-  const toggle = page.getByTestId('preview-response-tab');
+  const toggle = dropdown.getByTestId('preview-response-tab');
   // The toggle's `title` reflects current state (`Turn off|on Preview Mode`).
   // Wait until it's actually one of those values — `getAttribute` returns
   // `null` if read before React flushes props to DOM, which would mislead
@@ -1190,6 +1190,14 @@ const setResponsePreviewMode = async (page: Page, mode: 'editor' | 'preview') =>
     // interactions (format selection, asserts) aren't shadowed by it.
     await responseFormatTab.click();
   }
+
+  const responsePane = page.getByTestId('response-pane');
+  await responsePane.click({
+    position: {
+      x: 0,
+      y: 0
+    }
+  });
   // Confirm the dropdown actually closed before returning. Otherwise a
   // subsequent format-selector click can land in a half-open state and
   // miss the next interaction.