when syncing a new device, unable to click in field to give device an optional name

[LaurenWags]

Description

When syncing a new device, you are unable to click in the optional field to give the device a name. You can tab to this field as a workaround. This happens whether you have entered the code words or left the code words blank.

Steps to Reproduce

1. Open about:preferences#sync.
2. Click on 'I have an existing Sync code'.
3. Try to click in the field under 'Enter an optional name for this device:'.

Actual result:
You are not able to click in the optional field. If you watch closely, you can see a border around the field flash, but your cursor does not display in this field, it remains in the code words box.

Expected result:
You should be able to click on this field and enter your optional name if desired.

Reproduces how often: [What percentage of the time does it reproduce?] 100%

Brave Version

about:brave info:
Brave | 0.19.62
rev | fe3f350
Muon | 4.5.7

Reproducible on current live release:
yes, this happens on 0.19.53

Additional Information

This was working in 0.19.2 and stopped working in 0.19.3.

[jonathansampson]

I just ran into this in 0.19.131.

I was able to work around the buggy behavior by using Tab to focus the name field.

[eljuno]

+1 from Twitter https://twitter.com/AlexanderGunz/status/953019949777375233

won't let me select the field to type a name for the computer, it forces focus to the box u paste words in

[cezaraugusto]

self-note: this is a bug in React with autoFocus: facebook/react#7769 which is applied in the sync modal

[GeetaSarvadnya]

Verified on Windows 10 x64
• 0.23.8 06c657b
• Muon 6.1.5
• libchromiumcontent 66.0.3359.181

Verified on Ubuntu 17.10 x64

• 0.23.11 - 6565c06
• Muon - 7.1.0
• libchromiumcontent - 67.0.3396.87

Verified with macOS 10.12.6 using

• 0.23.11 6565c06
• Muon 7.1.0
• libchromiumcontent 67.0.3396.87