Unexpected autofill behaviour for new-user-creation-form

vpske
vpske
Community Member
edited November 27 in 1Password in the Browser

I am a website developer and we are currently trying to support 1Password better on our website.

We also tried to follow the suggestions as good as possible mentioned here:
https://developer.1password.com/docs/web/compatible-website-design

There is still one problem, where I couldnt find a solution for. We have a dialog to create a new user (Login ID, password, password repetition, name, etc..)

What I want to achieve is following:
In Login ID-input, dont show any suggestions from 1Password
password-input, show new password from 1Password and fill it in password repetition
password repetition-input, show new password from 1Password and fill it in password

What is happening currently:
In Login-ID-input, shows 1Password suggestion
password-input, shows 1Password suggestion
password-repetition-input, shows new password from 1Password and fills it in password

1Password does not understand that this is a new-user-creation-form. I tried to set the name/id-attribute to something random, I also set autocomplete "off" and both password-inputs have autocomplete "new-password". It still shows a suggestion. The only way I made it work, was setting the label to "Loginname" instead of "Login ID". But we dont want to change this label. I also saw, that there is a 1password-ignore-tag. But in the password-input it still shows a suggestion. And if I want to save the new user in 1Password, it wont fill in the username (which makes sense).

The funny part is, at another place in our webpage, we have also an new-user-creation-form. But there 1Password works exactly like we expect it to behave. And it has the same input-attributes, labels, autocomplete-tags, inputs and so on. So I dont understand what else can cause 1Password to behave differently. Where 1Password is working it is "just" in a form. And where it is not working it is in a dialog -> form -> mat-card. I also tried to place it somewhere else, or in another mat-card (1 card for the login id and 1 card for the password, password-repetition). But without success.

I cant easily copy-paste the code, since it is angular-code (lot of boiler-plate-code).
But currently it looks something like this (working and not working):

As I mentioned I tried also setting id/name-attribute for the Login ID-input to something randomly. I also tried to have a hidden label/input between Login ID and password. I also tried so set type="search" for the Login ID -> It wont show a suggestion anymore in the Login ID-input but still in the password-input.

I would be really thankful for at least a hint, or some suggestions on what else to try.

1Password Version: Not Provided
Extension Version: Not Provided
OS Version: Not Provided
Browser: Chrome

Comments

  • EvonG1P
    EvonG1P

    Hello, @vpske. Thank you for reaching out. I'm sorry about the trouble you're encountering.

    So that I can take a look, could you share an example code of the registration form on your website in CodePen or something similar? I want to request that you send us this information to support+forum@1Password.com. With your email, please include the following:

    You should receive an automated reply from our BitBot assistant with a Support ID number. Please post that number here, and I will be able to locate your message and ensure it has reached the right place. Thank you!

    -Evon

  • vpske
    vpske
    Community Member

    Hi @EvonG1P
    Thanks for the fast answer. I surely can do this but before I send you the example:

    • As I mentioned we are working with Angular

    So should I give you the "generated" HTML Code (copied from the website)? Or do you want the orginial Angular-code we wrote, so you can test it with Angular yourself? I dont know what suits you better to debug the problem.

    Thanks for a short answer.

    Kind regards

  • EvonG1P
    EvonG1P

    @vpske,

    You're welcome. As long as I can view the fields and autofill with 1Password, the generated HTML code should be sufficient for us to test the fields. In addition, could you please send the collected page structure?

    1. Navigate to the page exhibiting the behaviour.
    2. Right-click the problematic field and select 1Password - Password Manager > Help > Collect Page Structure.
    3. 1Password will save a json file to your Downloads folder.
    4. Attach is alongside the HTML file in the email.

    I look forward to hearing from you.

    -Evon

  • vpske
    vpske
    Community Member

    @EvonG1P
    Thanks for the information.
    The ID is: IXR-79287-195

  • EvonG1P
    EvonG1P

    @vpske,

    Thank you. I've located your support ticket, and we will contact you as soon as possible about this issue. Let's continue the conversation there. I'm closing this thread to prevent duplication of effort. 🙂

    -Evon

    ref: IXR-79287-195

  • vpske
    vpske
    Community Member

    I was able to solve the issue with help from @EvonG1P . Thanks for that!

    For anyone wondering how I was able to solve this specific issue:
    I set for the "new password"/"new password (repeat)"-field also the name-tag "new-password". With this added name-tag, 1Password was able to understand that it is a registration form and suggested a password and filled it in, in both password-fields. And also suggested to save the new item with username and password.

  • EvonG1P
    EvonG1P

    @vpske,

    You're very welcome! I'm glad to hear that worked. I'll keep the discussion open for anyone who may have encountered a similar issue and is seeking assistance. 🙂

    -Evon