fixes #376 - reset response state in focused mode

Author: mrin9

src/components/api-request.js

@@ -386,6 +386,11 @@ export default class ApiRequest extends LitElement {
     </div>`;
   }
 
+  resetRequestBodySelection() {
+    this.selectedRequestBodyType = '';
+    this.selectedRequestBodyExample = '';
+  }
+
   // Request-Body Event Handlers
   onSelectExample(e) {
     this.selectedRequestBodyExample = e.target.value;
@@ -410,11 +415,6 @@ export default class ApiRequest extends LitElement {
     }, 0, mimeDropdownEl);
   }
 
-  resetRequestBodySelection() {
-    this.selectedRequestBodyType = '';
-    this.selectedRequestBodyExample = '';
-  }
-
   requestBodyTemplate() {
     if (!this.request_body) {
       return '';

src/components/api-response.js

@@ -29,7 +29,7 @@ export default class ApiResponse extends LitElement {
       schemaStyle: { type: String, attribute: 'schema-style' },
       renderStyle: { type: String, attribute: 'render-style' },
       selectedStatus: { type: String, attribute: 'selected-status' },
-      selectedMimeType: { type: String },
+      selectedMimeType: { type: String, attribute: 'selected-mime-type' },
       activeSchemaTab: { type: String, attribute: 'active-schema-tab' },
       schemaExpandLevel: { type: Number, attribute: 'schema-expand-level' },
       schemaDescriptionExpanded: { type: String, attribute: 'schema-description-expanded' },
@@ -89,6 +89,11 @@ export default class ApiResponse extends LitElement {
     `;
   }
 
+  resetSelection() {
+    this.selectedStatus = '';
+    this.selectedMimeType = '';
+  }
+
   /* eslint-disable indent */
   responseTemplate() {
     if (!this.responses) { return ''; }

src/rapidoc.js

@@ -709,12 +709,16 @@ export default class RapiDoc extends LitElement {
       // Disable IntersectionObserver before scrolling into the view, else it will try to scroll the navbar which is not needed here
       this.isIntersectionObserverActive = false;
 
-      // for focused style it is important to reset request-body-selection which maintains the state for in case of multiple body
+      // for focused style it is important to reset request-body-selection and response selection which maintains the state for in case of multiple req-body or multiple response mime-type
       if (this.renderStyle === 'focused') {
         const requestEl = this.shadowRoot.querySelector('api-request');
         if (requestEl) {
           requestEl.resetRequestBodySelection();
         }
+        const responseEl = this.shadowRoot.querySelector('api-response');
+        if (responseEl) {
+          responseEl.resetSelection();
+        }
       }
       contentEl.scrollIntoView({ behavior: 'auto', block: 'start' });
       const oldNavEl = this.shadowRoot.querySelector('.nav-bar-tag.active, .nav-bar-path.active, .nav-bar-info.active, .nav-bar-h1.active, .nav-bar-h2.active');