window.postMessage on form submit lost on iOS

[mattbachman31]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
OS: macOS Sierra 10.12
Node: 6.5.0
npm: 3.10.3
Watchman: 4.6.0
Xcode: Xcode 8.3.3 Build version 8E3004b

Packages: (wanted => installed)
react-native: 0.52.0 => 0.41.2

Target Platform: iOS (10.1)

Steps to Reproduce

Although I am on React-native 41, I saw this commit in v52 to fix the issue with window.postMessage messages not queueing issue. I copied RCTWebView.[m/h] and RCTWebViewManager.[m/h], and modified to work as their own Native UI component in our project. However, that did not entirely fix our issue with missing postMessages.

1. Load webpage with these criteria:

• window.postMessage being called on form submit in WebView
• New page being loaded after submission event

2. Submit the form

Expected Behavior

Before loading the next page, all messages sent to the queue should be sent to the onMessage function passed as a prop to our WebView

Actual Behavior

All messages sent before submission were queued and all received thanks to the above referenced commit. But those sent as a result of the submit event are never received by our WebView before the next page loads with no js errors.

Reproducible Demo

https://snack.expo.io/S1pOoPLVf

[mattbachman31]

For my project I was able to implement an acceptable workaround. The injected JS for postMessage on iOS is here and my workaround was adding one additional function and listener:

                        "function flushQueue(form) {"
                        "if (messageQueue.length == 0) {"
                        "console.log(\"Queue cleared; submitting\");"
                        "HTMLFormElement.prototype.submit.call(form);"
                        "} else {"
                        "console.log(\"Still messages remaining in the postMessage queue\");"
                        "window.setTimeout(function(){"
                        "flushQueue(form);"
                        "}, 100);"
                        "}}"                       

                        "document.addEventListener('submit', function(e) {"
                        "if (messageQueue.length > 0) {"
                        "e.preventDefault();"
                        "console.log(\"Delaying submission as there are postMessages queued\");"
                        "flushQueue(e.target);"
                        "}});"
                        "})();"

Having never contributed before I am unsure if this would be desirable or possibly detrimental as a commit to RN's iOS WebView as a whole (maybe the option to have this listener could be passed as a prop?). But if not detrimental, I would be more than happy to submit a pull request.

[react-native-bot]

I am closing this issue because it does not appear to have been verified on the latest release, and there has been no followup in a while.

If you found this thread after encountering the same issue in the latest release, please feel free to create a new issue with up-to-date information by clicking here.