[SOLVED] onClick events not firing inside iOS Instagram In App Browser

help
1

I have discovered a bug on a site that we produced and I cannot figure out how to:

  1. Debug using Instagram In App Web Viewer
  2. Why this bug exists?

Could this be an ES5/ES6 Babel compiling issue?

Issue

When visiting this website inside the iOS Instagram in app browser, any onClick events are not functioning.

App functions perfectly on mobile safari, desktop browsers.

Header ICON Code

<i className="fas fa-shopping-bag" onClick={() => this.props.activeCartDropdown()} />
<i className="fas fa-bars" onClick={() => this.props.activeHeaderDropdown()} />

FAQ Code

import React from 'react';
import PropTypes from 'prop-types';
import { Link, NavLink, withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import Bootstrap from 'bootstrap';
import Helmet from 'react-helmet';

import history from '/client/history';

class BrandAmbassadorFAQ extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      open: false
    }
  }

  render() {

    return (
      <div className={`faq ${this.state.open}`} onClick={() => this.setState({ open: !this.state.open })}>
        <div className="question">
          {this.props.question}
        </div>

        <div className="answer">
          {this.props.answer}
          {this.props.image &&
            <img src={this.props.image} className={`img-fluid ${this.props.image_size ? this.props.image_size : ''}`}/>
          }
        </div>

      </div>
    )
  }
}

export default BrandAmbassadorFAQ;

App Details & Versions

Meteor 1.8.0.2
React 16.4.2
@babel/runtime 7.3.1
2

Could also be a WebView issue/bug.

Additionally, don’t create anonymous functions in onClick or similar props.

First of all, you may get performance issues (as you’ll re-create the function every time your component renders) and secondly, you want to create “pure” components inside the render() function, i.e. something without side-effects.

Better to do it like this:

class Foo extends React.Component {
   state = {
      bar: 'baz'
   }
   handleClick = (e) => {
      this.setState({bar: 'foobar'})
   }
   render() {
      return(
          <div onClick={this.handleClick}>Foo bar baz</div>
      )
   }
}
1 Like
3

Thanks! Integrating right now. I think it may be a WebView issue/bug that is related to @babel/runtime v7.3.1. Currently downgrading to @babel/runtime@7.0.0-beta.55 and conducting testing using GhostLab.

4

Downgrading @babel/runtime from latest to 7.0.0-beta.55 solved the issue for now. Very weird bug.