Android opens multiple webviews

[vcooley]

On Android, it is possible to open multiple WebViews by rapidly tapping a button that opens them if there is any async action happening before opening. For instance, I have a button which opens the webview after getting the location. Since the location request is async, I can continue to tap the button and open a webview. Here's a snippet which causes this behavior:

    async onButtonTap() {
        try {
            if (!isEnabled()) {
                await enableLocationRequest();
            }
        } catch (e) {
            console.log('location permissions denied');
        }
        const location = await getCurrentLocation({
            desiredAccuracy: 3,
            updateDistance: 10,
            maximumAge: 20000,
            timeout: 5000
        })
            .catch(() => {
                return {longitude: NaN, latitude: NaN};
            });

        const params = {
            latitude: location.latitude,
            longitude: location.longitude,
        }
        const encoded = Object.keys(params)
            .map(key => `${key}=${encodeURIComponent(params[key] || '')}`)
            .join('&');

        const opts: AdvancedWebViewOptions = {
            url: `https://google.com/#q=${encoded}`,
            toolbarColor: platform.isIOS ? '#0044AD' : '#F2F2F2',
            toolbarControlsColor: '#FFFFFF', // iOS only
            showTitle: false // Android only
        };

        openAdvancedUrl(opts);
    }

One possible fix could be returning a promise from openAdvancedUrl(opts) that resolves when the webview opens and allowing the developer to manually keep track of when it opened successfully. Once it's opened, there is no way to open another one through the UI due to it hiding the UI.

Another fix may be to implement some kind of event system for opening and closing the WebView.

[bradmartin]

A simple solution IMO would be to isolate the webview opening into its own method and not execute it directly in a button tap where you're running some async op, and only execute it if you want. Or provide a simple state variable outside the function scope and ontap set state = true and then don't execute it multiple times with an if check. Let feature of an event system might help but that's a bit of work. If someone is willing to do the work then a PR would be accepted with the improvements.