why doesn't 'submit' work on this form?

The code below is in a dropdown. 1password (modern Chrome, modern MacOS, etc) can fill it but doesn't submit. It does close the dropdown, so there are at least two additional clicks needed to submit. I have "username", "password", and "login_remember" set, "submit" is set to "always submit".

This is OctoPrint, which was discussed with jxpx777 over a year ago.

<div id="login_dropdown_loggedout" style="padding: 15px" class="dropdown-menu" data-bind="css: {hide: loginState.loggedIn(), 'dropdown-menu': !loginState.loggedIn()}">
    <form id="loginForm" data-bind="event: {'submit': loginState.prepareLogin }" onsubmit="return false; // this gets overwritten on view model bind">
        <label for="login_user">Username</label>
        <input type="text" id="login_user" name="username" data-bind="valueWithInit: loginState.loginUser" placeholder="Username" autocapitalize="none" autocorrect="off">
        <label for="login_pass">Password</label>
        <input type="password" id="login_pass" name="password" data-bind="valueWithInit: loginState.loginPass" placeholder="Password">
        <label class="checkbox">
            <input type="checkbox" id="login_remember" data-bind="checked: loginState.loginRemember"> Remember me
        </label>
        <button type="submit" class="btn btn-block btn-primary" id="login_button">Login</button>
    </form>
</div>

1Password Version: 6.8.5 685004
Extension Version: 4.7.0.3
OS Version: macos
Sync Type: 1pass

Comments

  • littlebobbytables
    littlebobbytables
    1Password Alumni

    Hi @tedder,

    If I had to wager a guess I would suspect there are fields elsewhere that when touched cause the dropdown to close. It would be great if 1Password didn't have to interact with fields at all and was more passive but we've found we have to be more aggressive to ensure 1Password learns everything required to fill. For the most part it doesn't cause a problem but on occasion we have found it can cause a popup to disappear and disrupt either filling, submission or both. Would it be possible at all to inspect a live version of the page? that way we could hopefully offer a more certain answer and learn either what might help with the page or if there is something 1Password could be doing differently.

  • tedder
    tedder
    Community Member

    Can I DM/email you somehow? I'll give you a URL and user/pass.

  • littlebobbytables
    littlebobbytables
    1Password Alumni

    Greetings @tedder,

    The forums are set up in such a way where you can't initiate contact so I'll send the first message to get the ball rolling.

  • tedder
    tedder
    Community Member

    Hey @littlebobbytables, any followup on this? I was fussing with it again and can't figure out what to do about it. I think the <button> is fine, so it must be the fact that it is a dropdown- I notice it fills the entries and then the modal/dropdown closes without submitting. I can manually re-open it and hit submit, which makes it bother me even more, actually.

  • tedder
    tedder
    Community Member

    Hmm. Not the button, I bet it has to do with knockout.js being used, and that the form submit actually goes through some JS methods to make an ajaxy JSON POST instead of a "form action" POST. Surely this can't be the only site that does this type of thing.

    Breadcrumbs- e.g., these aren't in the same file, but it's basically the calls concatted together.

    <form id="loginForm" data-bind="event: {'submit': loginState.prepareLogin }"
      onsubmit="return false; // this gets overwritten on view model bind">
    
    OctoPrintBrowserClient.prototype.login = function(username, password, remember, opts) {
        var data = {
            user: username,
            pass: password,
            remember: !!remember
        };
        return this.base.postJson(loginUrl, data, opts);
    };
    
    OctoPrintClient.prototype.postJson = function(url, data, opts) {
        return this.post(url, JSON.stringify(data, replaceUndefinedWithNull), contentTypeJson(opts));
    };
    
    OctoPrintClient.prototype.post = function(url, data, opts) {
        return this.ajaxWithData("POST", url, data, noCache(opts));
    };
    
    OctoPrintClient.prototype.ajaxWithData = function(method, url, data, opts) {
        opts = opts || {};
    
        var params = $.extend({}, opts);
        params.data = data;
    
        return this.ajax(method, url, params);
    };
    
  • littlebobbytables
    littlebobbytables
    1Password Alumni
    edited June 2018

    Hi @tedder,

    I apologise, 1Password 7 got me quite distracted and when combined with my awful memory I can't remember what I might have gleaned from looking at the page in the past. Would it be possible to look at an example page again? It might be easier if we move this to email so I'll send you one to the email address you're using here in the forums.

    The button won't be a factor, 1Password doesn't interact with the button at all in fact. Our submit feature works by having the extension leave focus on the password field and then 1Password ask the operating system to behave as if the user has pressed the enter key. As most forms accept this as submitting the form we achieve the desired result without the very messy and unreliable need to interact with a button.

    ref: RHI-88564-861

  • tedder
    tedder
    Community Member

    Replied with a site you can use. 'enter' is a great idea. I tested that manually and it works, though not in 1pass.

  • littlebobbytables
    littlebobbytables
    1Password Alumni

    :smile:

This discussion has been closed.