Manually fire tab change events onclick to fix touching tabs not working

It seems like there is some kind of touch action interference coming
from the blocks panel, where if you touch the tabs on a touchscreen
chromebook/chrome responsive mode, it does not select the tab if the
touch radius is overlapping the blocks panel at all. See gifs in PR for
more explanation. Fixes issue #1283, making chromebooks useable!

src/components/gui/gui.jsx

@@ -54,6 +54,9 @@ const GUIComponent = props => {
         loading,
         onExtensionButtonClick,
         onActivateTab,
+        onActivateCostumesTab,
+        onActivateSoundsTab,
+        onActivateBlocksTab,
         previewInfoVisible,
         soundsTabVisible,
         vm,
@@ -113,7 +116,10 @@ const GUIComponent = props => {
                             onSelect={onActivateTab}
                         >
                             <TabList className={tabClassNames.tabList}>
-                                <Tab className={tabClassNames.tab}>
+                                <Tab
+                                    className={tabClassNames.tab}
+                                    onClick={onActivateBlocksTab}
+                                >
                                     <img
                                         draggable={false}
                                         src={codeIcon}
@@ -124,7 +130,10 @@ const GUIComponent = props => {
                                         id="gui.gui.codeTab"
                                     />
                                 </Tab>
-                                <Tab className={tabClassNames.tab}>
+                                <Tab
+                                    className={tabClassNames.tab}
+                                    onClick={onActivateCostumesTab}
+                                >
                                     <img
                                         draggable={false}
                                         src={costumesIcon}
@@ -135,7 +144,10 @@ const GUIComponent = props => {
                                         id="gui.gui.costumesTab"
                                     />
                                 </Tab>
-                                <Tab className={tabClassNames.tab}>
+                                <Tab
+                                    className={tabClassNames.tab}
+                                    onClick={onActivateSoundsTab}
+                                >
                                     <img
                                         draggable={false}
                                         src={soundsIcon}
@@ -221,6 +233,9 @@ GUIComponent.propTypes = {
     intl: intlShape.isRequired,
     loading: PropTypes.bool,
     onActivateTab: PropTypes.func,
+    onActivateBlocksTab: PropTypes.func,
+    onActivateCostumesTab: PropTypes.func,
+    onActivateSoundsTab: PropTypes.func,
     onExtensionButtonClick: PropTypes.func,
     onTabSelect: PropTypes.func,
     previewInfoVisible: PropTypes.bool,

src/containers/gui.jsx

@@ -107,7 +107,10 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = dispatch => ({
     onExtensionButtonClick: () => dispatch(openExtensionLibrary()),
-    onActivateTab: tab => dispatch(activateTab(tab))
+    onActivateTab: tab => dispatch(activateTab(tab)),
+    onActivateBlocksTab: () => dispatch(activateTab(BLOCKS_TAB_INDEX)),
+    onActivateCostumesTab: () => dispatch(activateTab(COSTUMES_TAB_INDEX)),
+    onActivateSoundsTab: () => dispatch(activateTab(SOUNDS_TAB_INDEX))
 });
 
 const ConnectedGUI = connect(