angular events form-submit inappbrowser ionic5

Ionic 5 inappbrowser loadstop is not triggered after sending post form

The loadstop event is not triggered after sending the post...i am at loss on why. Already spend 3 days on it and I am close for a deadline.

Any help is appreciated.

import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
 //CREATE THE FORM AND URL
var form = document.createElement("form");
var url = this.requestPath;
form.setAttribute("method", "post");
form.setAttribute("action", url);

var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", 'Version');
hiddenField.setAttribute("value", this.version);
form.appendChild(hiddenField);

var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", 'MerID');
hiddenField.setAttribute("value", this.merchantID);
form.appendChild(hiddenField);

document.body.appendChild(form);
    let type = '';
//type = '_self';
//type = '_system';
type = '_blank';

url = '';
//let browser = this.theInAppBrowser.create(url, type);
let browser = this.theInAppBrowser.create('http://localhost/', type);
//form.submit();

if (browser) {

  //browser.show();
  browser.on("loadstop").subscribe(function (event) {
   
    if (event.url == 'http://localhost/') {
      console.log('submitting form')
      form.submit();
    }
    console.log('res : loadstop', event);
  },
    err => {
      console.log('error : ', err);
    })

}

So the loadstop works initially and triggers the submitted form. The form navigates to the payment external website successfully but the loadstop don't work anymore and I cannot navigate back to my mobile app.

Edit : Forgot to add When debugging from Android Studio I can see the navigation (onPageDidNavigate and onPageFinished)

img from Android Studio

Solution

For anyone else...the problem I was having is that I was instantiating a new form and the event was unreachable.

 const pageContent = '<html><head></head><body>' +
  '<form name="redirect" id="redirect" action="' + this.requestPath + '" method="post">' +
  '<input type="hidden" name="Version" value="' + this.version + '">' +
  '<input type="hidden" name="MerID" value="' + this.merchantID + '">' +
  '<input type="hidden" name="AcqID" value="' + this.acquirerID + '">' +

  '</form> <script type="text/javascript">document.getElementById("redirect").submit();</script>' +
  '</body></html>';

const pageContentUrl = 'data:text/html;base64,' + btoa(pageContent);

const browserRef = this.theInAppBrowser
  .create(
    pageContentUrl,
    '_blank',
    this.options
  );

browserRef.on('loadstop').subscribe(event => {
  console.log('loadstop started');
  console.log(event);
  console.log('loadstop url', event.url);

  if (event.url == 'https://...') {
    console.log(JSON.stringify(event));
    browserRef.close();
  }

});

By changing it like the above it now works! Finally