Merge pull request #1732 from paulkaplan/fix-touch-tabs

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

src/components/gui/gui.jsx

@@ -53,6 +53,8 @@ const GUIComponent = props => {
         intl,
         loading,
         onExtensionButtonClick,
+        onActivateCostumesTab,
+        onActivateSoundsTab,
         onActivateTab,
         previewInfoVisible,
         soundsTabVisible,
@@ -124,7 +126,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 +140,10 @@ const GUIComponent = props => {
                                         id="gui.gui.costumesTab"
                                     />
                                 </Tab>
-                                <Tab className={tabClassNames.tab}>
+                                <Tab
+                                    className={tabClassNames.tab}
+                                    onClick={onActivateSoundsTab}
+                                >
                                     <img
                                         draggable={false}
                                         src={soundsIcon}
@@ -220,6 +228,8 @@ GUIComponent.propTypes = {
     importInfoVisible: PropTypes.bool,
     intl: intlShape.isRequired,
     loading: PropTypes.bool,
+    onActivateCostumesTab: PropTypes.func,
+    onActivateSoundsTab: PropTypes.func,
     onActivateTab: PropTypes.func,
     onExtensionButtonClick: PropTypes.func,
     onTabSelect: PropTypes.func,

src/containers/gui.jsx

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