fixes #726 #763 - Example in focused mode should reset to original on navigating from one endpoint to another

Author: mrin9

src/components/api-request.js

@@ -213,24 +213,51 @@ export default class ApiRequest extends LitElement {
     `;
   }
 
-  updated(changedProperties) {
+  /*
+  async updated(changedProperties) {
     // In focused mode after rendering the request component, update the text-areas(which contains examples) using
     // the original values from hidden textareas
     // This is done coz, user may update the dom by editing the textarea's and once the DOM is updated externally change detection wont happen, therefore update the values manually
     if (this.renderStyle === 'focused') {
       if (changedProperties.size === 1 && changedProperties.has('activeSchemaTab')) {
         // dont update example as only tabs is switched
       } else {
-        const exampleTextAreaEls = [...this.shadowRoot.querySelectorAll('textarea[data-ptype="form-data"]')];
-        exampleTextAreaEls.forEach((el) => {
-          const origExampleEl = this.shadowRoot.querySelector(`textarea[data-pname='hidden-${el.dataset.pname}']`);
-          if (origExampleEl) {
-            el.value = origExampleEl.value;
-          }
-        });
+        this.requestUpdate();
       }
     }
   }
+  */
+
+  async saveExampleState() {
+    if (this.renderStyle === 'focused') {
+      const reqBodyTextAreaEls = [...this.shadowRoot.querySelectorAll('textarea.request-body-param-user-input')];
+      reqBodyTextAreaEls.forEach((el) => {
+        el.dataset.user_example = el.value;
+      });
+      const exampleTextAreaEls = [...this.shadowRoot.querySelectorAll('textarea[data-ptype="form-data"]')];
+      exampleTextAreaEls.forEach((el) => {
+        el.dataset.user_example = el.value;
+      });
+      this.requestUpdate();
+    }
+  }
+
+  async updateExamplesFromDataAttr() {
+    // In focused mode after rendering the request component, update the text-areas(which contains examples) using
+    // the original values from hidden textareas
+    // This is done coz, user may update the dom by editing the textarea's and once the DOM is updated externally change detection wont happen, therefore update the values manually
+    if (this.renderStyle === 'focused') {
+      const reqBodyTextAreaEls = [...this.shadowRoot.querySelectorAll('textarea.request-body-param-user-input')];
+      reqBodyTextAreaEls.forEach((el) => {
+        el.value = el.dataset.user_example || el.dataset.example;
+      });
+      const exampleTextAreaEls = [...this.shadowRoot.querySelectorAll('textarea[data-ptype="form-data"]')];
+      exampleTextAreaEls.forEach((el) => {
+        el.value = el.dataset.user_example || el.dataset.example;
+      });
+      this.requestUpdate();
+    }
+  }
 
   renderExample(example, paramType, paramName) {
     return html`
@@ -508,9 +535,16 @@ export default class ApiRequest extends LitElement {
     </div>`;
   }
 
-  resetRequestBodySelection() {
+  // This method is called before navigation change in focusd mode
+  async beforerNavigationFocusedMode() {
+    // this.saveExampleState();
+  }
+
+  // This method is called after navigation change in focusd mode
+  async afterNavigationFocusedMode() {
     this.selectedRequestBodyType = '';
     this.selectedRequestBodyExample = '';
+    this.updateExamplesFromDataAttr();
     this.clearResponseData();
   }
 
@@ -724,10 +758,8 @@ export default class ApiRequest extends LitElement {
                 <button class="tab-btn ${this.activeSchemaTab === 'example' ? 'active' : ''}" data-tab = 'example'>EXAMPLE</button>
                 <button class="tab-btn ${this.activeSchemaTab !== 'example' ? 'active' : ''}" data-tab = 'schema'>SCHEMA</button>
               </div>
-              ${this.activeSchemaTab === 'example'
-                ? html`<div class="tab-content col"> ${reqBodyExampleHtml}</div>`
-                : html`<div class="tab-content col"> ${reqBodySchemaHtml}</div>`
-              }
+              ${html`<div class="tab-content col" style="display:${this.activeSchemaTab === 'example' ? 'block' : 'none'};"> ${reqBodyExampleHtml}</div>`}
+              ${html`<div class="tab-content col" style="display:${this.activeSchemaTab === 'example' ? 'none' : 'block'};"> ${reqBodySchemaHtml}</div>`}
             </div>`
           : html`  
             ${reqBodyFileInputHtml}
@@ -788,8 +820,6 @@ export default class ApiRequest extends LitElement {
             .textContent = "${this.fillRequestFieldsWithExample === 'true' ? formdataPartExample[0].exampleValue : ''}"
             spellcheck = "false"
           ></textarea>
-          <!-- This textarea(hidden) is to store the original example value, in focused mode on navbar change it is used to update the example text -->
-          <textarea data-pname = "hidden-${fieldName}" data-ptype = "${mimeType.includes('form-urlencode') ? 'hidden-form-urlencode' : 'hidden-form-data'}" class="is-hidden" style="display:none">${formdataPartExample[0].exampleValue}</textarea>
         </div>`
       }
       ${html`

src/rapidoc.js

@@ -884,6 +884,12 @@ export default class RapiDoc extends LitElement {
       return;
     }
     this.isIntersectionObserverActive = false;
+    if (this.renderStyle === 'focused') {
+      const requestEl = this.shadowRoot.querySelector('api-request');
+      if (requestEl) {
+        requestEl.beforerNavigationFocusedMode();
+      }
+    }
     this.scrollTo(navEl.dataset.contentId, true, scrollNavItemToView);
     setTimeout(() => {
       this.isIntersectionObserverActive = true;
@@ -914,7 +920,7 @@ export default class RapiDoc extends LitElement {
         if (this.renderStyle === 'focused') {
           const requestEl = this.shadowRoot.querySelector('api-request');
           if (requestEl) {
-            requestEl.resetRequestBodySelection();
+            requestEl.afterNavigationFocusedMode();
           }
           const responseEl = this.shadowRoot.querySelector('api-response');
           if (responseEl) {