Editor: Fix tags bug by using correct container for blur event

[nylen]

Fixes #1884, and other strange behavior, which I suspect is also related to the following forum threads:

• https://en.forums.wordpress.com/topic/problem-with-adding-new-tags#post-2517598 (partly)
• https://en.forums.wordpress.com/topic/i-am-not-able-to-add-tags-anymore-what-is-going-on

Chrome	Safari
The tag suggestion list flickers when you select a tag, and sometimes the tag you select doesn't get added.	The tag suggestion list disappears when you select a tag, and sometimes the tag you select doesn't get added.

The reason this code change fixes these issues is that the blur event target is usually the text input, but we need to check the entire TokenField container for the relatedTarget instead. Looks like this was changed here - cc @aduth.

To test

• Go to the editor and add tags to posts.
• See if you can reproduce Editor: cannot select tags by clicking on list of previously used tags #1884 (failure to add tags via the mouse) or either of the strange behaviors in the recordings above.
• Apply this patch and verify that all your problems go away.

[timmyc]

I just had the linter warn me on a branch that the closing tag should be on the same line as the last prop. This was "new" to me, but figured I'd mention it here too.

[aduth]

I just had the linter warn me on a branch that the closing tag should be on the same line as the last prop.

I believe this only applies to self-closing tags, and was added in #1807.

[nylen]

I'm strongly in favor of putting the /> (and even the > for tags with children) on the following line, de-indented 1 level:

• Like </div> ); } etc. that often appear immediately below, it denotes the end of a block
• Easier to rearrange props, like trailing , in arrays

We have lots of code in both styles in Calypso. If we want to do something about this, let's do it in a separate PR and either remove that linter rule or update our code to this style.

[ralder]

Also for Firefox and IE11 there need using in _onBlur handler instead event.relatedTarget

 var relatedTarget = event.relatedTarget ||
            event.explicitOriginalTarget || // FF
            document.activeElement; // IE11

details about it facebook/react#2011

[aduth]

I can confirm that event.target was indeed the culprit. Using event.currentTarget would be an alternative fix, though I think the changes here are more explicit.

Marking as needs changes per linting error and response to above comment.

[nylen]

Thanks for the tip @ralder! I needed to use event.nativeEvent.explicitOriginalTarget instead but your suggestion fixes #1814. This is now ready for review again. Edit: Fixing the failing tests now

[nylen]

Fixed the failing tests - looks like it's due to a React TestUtils thing-I-thought-was-a-bug-but-isnt (facebook/react#5778).

[aduth]

Looks good to me 👍

Two things to follow-up on:

• Let's not just leave the lint warning, and submit either an issue or pull request to remove the linting rule
• Should tags that are already added not be shown in the available suggestions? Do we have an issue tracking this?

[nylen]

• Done at Lint: Ignore tag closings #2126.
• I noticed that too but haven't investigated yet - I'll fix it in a separate PR.