Wp-calypso: Jetpack Disconnect Survey: Submit button does not work while TokenField dropdown is visible

[tyxla]

Steps to reproduce

1. Navigate to /settings/disconnect-site/missing-feature/:site, where :site is a Jetpack site.
2. Focus the field.
3. Select something from the dropdown, for example "Plugins".
4. Don't blur the field.
5. Click "Submit".

What I expected

I expected the form to be submitted, and to be presented with the next step.

What happened instead

The form didn't actually submit, but rather the TokenField dropdown was closed. To actually submit, I had to click the Submit button again.

Browser / OS version

Chrome 61.0.3163.100 on macOS Sierra 10.12.6

Screenshot / Video

Context / Source

Found while testing #19324.

manual-testing

cc @ockham

[ockham]

Yeah, that's https://github.com/Automattic/wp-calypso/projects/50#card-5291237. Anyway, thanks for filing this!

[ockham]

First reported here: https://github.com/Automattic/wp-calypso/pull/19063#issuecomment-338702813

[ockham]

Spent more than an hour trying to pin-point this, watching TokeField's state. Whenever I had a working hypothesis that seemed correlated with some particular state values, it'd be falsified by the next try 😕 Sounds a bit like some sort of race condition related to state/focus...

[tyxla]

Well, this one is not a blocker IMHO. It's something that will probably occur in other locations where we use the TokenFields, too. We can revisit at a later time.