MenuItem Component should wrap text content in span

[donghee214]

Realistically this will be very difficult to fix, mostly for tracking purposes.

Currently React and Google translate does not play nice where google translate will mutate the DOM to a state where it will be inconsistent to Reacts view of the world.

original
<div>無選択</div>

translated:
<div>
  <font style="vertical-align: inherit;">
    <font style="vertical-align: inherit;">No choice</font>
  </font>
</div>

React will reference the text node in its virtual DOM (not the div) which no longer exists after browser translation is ran. For conditionally rendered components this is an issue because when React goes to call parent.removeChild(textNode) in the event the component is to be unrendered, textNode no longer exists in the real DOM which throws Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

The workaround provided on the ticket suggested wrapping all textNodes in a span such that React will still reference the span even when the contents inside the span are replaced with font, allowing it to still maintain the same reference between virtual and real DOM.

So far just identified MenuItem rendering textNodes but basically any component using TextNode will have this issue

TextNode defaults to div: https://github.com/palantir/blueprint/blob/develop/packages/core/src/components/menu/menuItem.tsx#L270

React Issue: facebook/react#11538