From 65ed6d3cfb70188438cdc42cea85b94fa43409cb Mon Sep 17 00:00:00 2001
From: shubh-bruno <shubham@usebruno.com>
Date: Wed, 14 Jan 2026 13:28:04 +0530
Subject: [PATCH] fix: response format auto-switch on content type change
 (#6773)

---
 .../ResponsePane/QueryResult/index.js           |  4 ++--
 .../src/components/ResponsePane/index.js        | 17 +++++++++++++----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js b/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js
index b9be062e6..b6f40be58 100644
--- a/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js
@@ -49,11 +49,11 @@ export const useInitialResponseFormat = (dataBuffer, headers) => {
 
     // Wait until both content types are available
     if (detectedContentType === null || contentType === undefined) {
-      return { initialFormat: null, initialTab: null };
+      return { initialFormat: null, initialTab: null, contentType: contentType };
     }
 
     const initial = getDefaultResponseFormat(contentType);
-    return { initialFormat: initial.format, initialTab: initial.tab };
+    return { initialFormat: initial.format, initialTab: initial.tab, contentType: contentType };
   }, [dataBuffer, headers]);
 };
 
diff --git a/packages/bruno-app/src/components/ResponsePane/index.js b/packages/bruno-app/src/components/ResponsePane/index.js
index cf5140bb1..450c798c9 100644
--- a/packages/bruno-app/src/components/ResponsePane/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/index.js
@@ -42,9 +42,12 @@ const ResponsePane = ({ item, collection }) => {
   const focusedTab = find(tabs, (t) => t.uid === activeTabUid);
 
   // Initialize format and tab only once when data loads.
-  const { initialFormat, initialTab } = useInitialResponseFormat(response?.dataBuffer, response?.headers);
+  const { initialFormat, initialTab, contentType } = useInitialResponseFormat(response?.dataBuffer, response?.headers);
   const previewFormatOptions = useResponsePreviewFormatOptions(response?.dataBuffer, response?.headers);
 
+  // Track previous response headers to detect when content-type changes
+  const previousContentRef = useRef(contentType);
+
   const persistedFormat = focusedTab?.responseFormat;
   const persistedViewTab = focusedTab?.responseViewTab;
 
@@ -56,13 +59,19 @@ const ResponsePane = ({ item, collection }) => {
     if (!focusedTab || initialFormat === null || initialTab === null) {
       return;
     }
-    if (persistedFormat === null) {
+
+    // Check if response headers (content-type) changed using deep comparison
+    const contentTypeChanged = contentType !== previousContentRef.current;
+    if (contentTypeChanged) {
+      previousContentRef.current = contentType;
+    }
+    if (contentTypeChanged || persistedFormat === null) {
       dispatch(updateResponseFormat({ uid: item.uid, responseFormat: initialFormat }));
     }
-    if (persistedViewTab === null) {
+    if (contentTypeChanged || persistedViewTab === null) {
       dispatch(updateResponseViewTab({ uid: item.uid, responseViewTab: initialTab }));
     }
-  }, [initialFormat, initialTab, persistedFormat, persistedViewTab, focusedTab, item.uid, dispatch]);
+  }, [contentType, initialFormat, initialTab, persistedFormat, persistedViewTab, focusedTab, item.uid, dispatch]);
 
   const handleFormatChange = useCallback((newFormat) => {
     dispatch(updateResponseFormat({ uid: item.uid, responseFormat: newFormat }));