1pw extension fires when toggling from input type="password" to type="text"

DonLivingston

I'm a web developer creating a signup form using React. I'm working on including a function to toggle the password input field between type="password" and type="text" That way if a customer wants the option to see what they’re inputting they can. It works pretty much as expected with one small bit of weirdness - whenever I toggle from password to text, my 1Password plugin activates asking if I want to save the login. Normally I’d only expect that to happen when I actually submit. Can anyone point me how to prevent this?

ag_yaron

Hey @DonLivingston ,
I believe something in your code does trigger it since I wasn't able to reproduce the behavior you're describing in multiple websites I tested.

If you can perhaps share the URL of your website we can take a look and see if we can spot the issue. If you can't, then the best next thing is to look at examples found online on how to implement that show/hide password button, such as this: https://codepen.io/geoffreyrose/pen/HKDkB

DonLivingston

@Yaron,
Thanks for your response. If you'd like to check out what I'm doing, I've put up my demo Signup form here - https://signup-demo.now.sh

My implementation is in React, using the Next.js framework. Its similar (though not identical) to the codepen here - https://codepen.io/Don-m/pen/mmgyQG

(I tried pasting a segment of my code but was informed that I was blocked. I guess something in the jsx formatting isn't acceptable to post in the forum)

You can view my demo's git repo here - https://github.com/dlivingston/signup-demo

Any insight you can provide is appreciated

ag_yaron

Hey Don,
thanks for all the info and links.

The first thing I noticed is that the field's type changes to "input" instead of "text" when clicking on the show button. Can you change it to text? I'm almost certain that this is the issue even though I haven't looked at your code yet.

DonLivingston

Yaron, It behaves the same. I initially had it change to 'text' instead of 'input' but I changed it based on a codepen. I just changed it so it toggles between type="password" and type="text".

ag_yaron

Thanks @DonLivingston ,
While I consult with our team, feel free to go over the suggestions here and see if one of these suggestions help: https://support.1password.com/compatible-website-design/

DonLivingston

@Yaron,
I figured it out. I was missing the type="button" attribute on the button I was using to toggle between the input type on the password field. Once I added that attribute to the button the 1Password plugin stopped misfiring. Thanks for your help!

ag_ana

On behalf of Yaron, you are welcome @DonLivingston! And thank you for the update :)

If you have any other questions, please feel free to reach out anytime.

Have a wonderful day :)