Browser-laptop: Make Autofill country field into a dropdown list

[srirambv]

Test plan

https://github.com/brave/browser-laptop/pull/10821#issue-255571235

---

• Did you search for similar issues before submitting this one?
  Yes

• Describe the issue you encountered:
  Make country into a dropdown list

• Platform (Win7, 8, 10? macOS? Linux distro?):
  All

• Brave Version (revision SHA):
  Brave 0.15.308
  rev fc4b892
  Muon 3.0.200

• Screenshot if needed:
  

Future enhancement: make state field also drop down. Ref here

• Any related issues: #3727

[dfperry5]

Hi guys,

Anyone taken a stab at this yet? Im just starting into OSS and would like to give it a shot.

Thanks!

[bsclifton]

@dfperry5 nope, it's all yours! 😄

Let me know if you have any questions / need help / want someone to try out your changes 😄

[dfperry5]

@bsclifton Awesome :) I'll get right on it - I'll be working in the airports today so no promises on anything today, but ill try to have something to share soon!

Thanks!

[bsclifton]

@dfperry5 how's it going? Just wanted to check in 😄 Hope all is well

[dfperry5]

@bsclifton It's going good :) Just a lot of reading through the code, etc :P Been a lot of just sitting in airports today. Also, just trying to make sure i have the process correct.

It's cool if i just cut my own branch off master, and just start committing to that? I can post the branch name here so everyone can check it out?

Thanks!

[dfperry5]

So just to further clarify this issue --

The issue is when the user is enabling auto fill and filling out their address information. At that point, the input for country / region should be a dropdown?

[bsclifton]

@dfperry5 when you visit about:autofill, it currently has text fields for all values.

We need to update our form to have a dropdown instead, offering a common selection of countries. I'd recommend getting it working with a few countries first to make sure you're comfortable with the solution.

Once you're ready to add them all, you can find a list here 😄
http://www.listofcountriesoftheworld.com

[bsclifton]

for a demo of how to do a dropdown using our code, navigate over to about:styles. You'll see a few live examples and the React code used to generate them.

The code for the form in the above screenshot can be found here:
https://github.com/brave/browser-laptop/blob/117d8e39e43962946532e9c154acd9b62fa00e8b/js/about/autofill.js

[dfperry5]

@bsclifton awesome! I'll comment back here once I have something working (most likely tomorrow evening est time)!

Thanks for all the help!

[bsclifton]

@dfperry5 perfect! You can fork Brave and start committing locally. Once you feel confident, you can submit a pull request (if you need help working with forks or git, let me know and we'll work it out 😄 )

[darkdh]

@dfperry5, please set The ISO 3166 2-letter country code for the value. you can find the code here
https://www.iso.org/obp/ui/#search/code/

I remember @aekeus has the country list for add funds. Maybe he can give some input.

[dfperry5]

@bsclifton I think i have it working on my local. I forked the repo here.

I was trying to commit but, but I'm failing the pre-commit hook:
"Error generating docs for file windowActions.js SyntaxError: Unexpected end of JSON input"

Any ideas?

[bsclifton]

@dfperry5 ah that error... Yeah, we need to fix that (captured here)

In the meantime, you can edit package.json and just replace the part under "scripts":
"docs": "jsdox js/actions/appActions.js js/actions/windowActions.js --output docs",

with something like:
"docs": "echo docs",

That should let you add your files and commit 😄 I'd love to check it out once you have the code pushed. Thanks for digging in!

[dfperry5]

@bsclifton I'm not sure its beautiful, but it seems to be working :)

See here.

Let me know whatcha think! Any suggestions are welcome.

@darkdh I used the 2-Letter country codes as well -- feel free to check it out :)

Thanks for all the help!

[luixxiul]

I'm resetting the milestone to 0.21.x (which is still open for landing) as 0.22.x milestone was added at first by myself to #10300 without a special reason and #10821 does not conflict with other stuff which is planned for 0.22.x. If it does by any chance, please revert the milestone.