submitter.click() not working in Safari on iOS

[d3pendent]

I found that submitter.click() does not work in Safari in iOS.

I replaced it with this.dispatchEvent(new Event('submit')); to get it working.

Not quite sure if this is only a bug in my implementation or if it's a general bug un Safari on iOS. Maybe someone else can verify?

I've tested in with browserstack.com on various devices.

[julianrubisch]

I'm seeing this, too

EDIT: I was able to solve this using

~submitter.dispatchEvent(new Event("click")); instead of .click()~

scratch that, it works in the console, but not when actually running it. Tried to wrap it in a setTimeout, to no avail...

[ba55ie]

@d3pendent Are you providing your own submitter element as parameter for the requestSubmit call?

I just call requestSubmit() on the form element and I don't experience any issues with Safari on iOS using this polyfill.

For the record, I only tested on BrowserStack (Safari iOS 13 and 14) and MacOS.

class LoginForm extends LitElement {

    constructor() {
        super();
       
        // Event fired by the `my-button` component
        this.addEventListener('my-button-submit', this);
    }

    render() {
        return html`    
            <form @submit="${this.onSubmit}">
                <h1>Log in</h1>

                <div class="field">
                    <label for="username">Username</label>
                    <input name="username" id="username" required>
                </div>

                <div class="field">
                    <label for="current-password">Password</label>
                    <input type="password" name="password" id="current-password" required>
                </div>

                <my-button submit>Log in</my-button>                        
            
            </form>
        `;
    }

    // High performant event handling since DOM0:
    // https://developer.mozilla.org/en-US/docs/Web/API/EventListener/handleEvent
    handleEvent(e) {
        if (e.type === 'my-button-submit') {
            e.stopPropagation();                    

            this.querySelector('form').requestSubmit();
        }
    }

    onSubmit(e) {
        e.preventDefault();
       
        const data = new FormData(e.target);

        // do login stuff...
    }
    
}

[markedmondson]

It seems like adding the submitter might be critical to Safari 15 in iOS. See https://discuss.hotwired.dev/t/checkbox-form-does-not-submit-on-safari-and-mobile-chrome-using-requestsubmit/4011/3

I could only get it to work with a submitter parameter.