1Password Integration

1Password apparently follows an ‘HTML spec standard’. Looks like it came from a collaboration from …Copyright © WHATWG (Apple, Google, Mozilla, Microsoft)…

https://html.spec.whatwg.org

My web application uses a multi-tab screen with email text fields (username) on different tabs for different purposes. Because of that design I have to name the fields different names.
I actually like that because of the side benefits for tracking different parts of my code.

1Password requires ‘username’ as the field name for autocompletion or apparently it will also work with an attribute.

In a support email, they have told me

… So using the autocomplete="NameOfAttributeHere" is what will allow you to tell password managers (and 1Password in particular) what this field should be autofilled with…

You might find these links helpful:

So my question is this:
Is there a way for me to add an attribute such as

autocomplete=‘NameOfAttributeHere’

to a text box, so that 1Password can pick up the correct fill-in information?

1 Like

In the Shown event of your WebTextField:

ExecuteJavascript( "$('#" + me.controlID + "_field').attr('autocomplete', 'NameOfAttributeHere');" )
1 Like

This worked perfectly! I love one line solutions. I don’t know JavaScript but I am so happy this worked, I’m sure I will be able to fix several other items now.

1 Like

Happy to help!

For completeness, in my original post, and so others don’t end up chasing rabbits, I described a multi-tab panel with an email textfield on each tab for different purposes. The autocomplete javascript works on the first tab only, even though the same javascript is in all of the text fields shown event on all the tabs. Even though it would be nice to have those also auto-complete, that is not really an issue since the other tabs are rarely visited. The login page/tab was the main concern.

Did you inspect the other fields to see if the attribute is applied? Could be an issue with the 1password extension.

I’m not sure what you mean by ‘applied’, I did put the code in each of the fields shown event of each tab. I also tried variations and even tried removing it from the first tab and leaving it in the other fields on the other tabs just to see if it would pick up. I also tried putting the javascript in the gotFocus event instead, since I found that the shown event was firing on loading. Yes it could be a 1Password issue. I did follow up with them about the javascript so they would at least have one solution for a single field for the XOJO platform.

Is possible to do the same with desktop App ? and how if someone have the solution :wink:

I am getting some unexplained action right now. It was working yesterday, and now after my tests for the other tabs, it is not working as I expected. I may put together a simple desktop version with just the tab panel that does nothing but contain fields and test that. I’ll post my results.

You can right-click the WebTextField in the browser and choose “Inspect” to see it’s DOM HTML element. I just put together a small test project and can see that the attribute is being cleared when you switch tabs in the WebTabPanel. I’m sure this is because the WebTextField is being re-rendered by the Xojo JavaScript framework. I’m testing a workaround.

OK, I’m not sure why this has the effect it does, but I set the field type to Email and AllowAutoComplete to True and it retains the autocomplate attribute value that the line of code I supplied before sets.

To recap:

Sub Shown() Handles Shown
  me.FieldType = WebTextField.FieldTypes.Email
  me.AllowAutoComplete = True
  ExecuteJavaScript( "$('#" + me.controlID + "_field').attr('autocomplete', 'NameOfAttributeHere');" )
End Sub
1 Like

Well now - that works as expected across ALL tabs! It also fixed an issue I had with the CC number in a text field. It was showing only the first and last four digits, with autocomplete turned on, it now shows all the digits and fills in as expected. Thanks Anthony for your help! And I learned how to see how it renders inside of html using the inspect feature. :slight_smile:

Just glad I was able to help you sort this out! A word of warning, though. I didn’t expect this second bit to work, so I’d be wary of changes in future versions of Xojo breaking it. If that happens, we’ll do something a bit different like attach a MutationObserver (we could do that now, but support isn’t quite universal yet).

There are few other quirks as well, so yes a close eye I think will be helpful.
On one of the tabs I have vertically spaced three fields.

textFieldNewEmail
passwordFieldNew
passwordFieldConfirm

If I change the passwordFieldConfirm (the third field) from a password to a textbox the first field (textFieldNewEmail) does not auto complete correctly anymore.

The HTML rendered though does appear to be correct.

I have already filed a bug report with two passwords on top of each other not behaving correctly. That’s probably related.

1 Like