title: ag-grid React Header Component Select all Checkbox selection not working on mobile and tablet properly
body: <p>I am facing a weird issue where I am implementing Header component Select all Checkbox selection using ag-grid.</p>
  
  <p>It's working as expected on desktop but when I am testing the same functionality on tablet or mobile the checkbox selection is working randomly.</p>
  
  <p>What I mean is when i am clicking inside checkbox its not getting checked but when I am clicking some where near to left border of checkbox it is getting selected.</p>
  
  <p><strong>Things I tried so far:</strong></p>
  
  <ul>
  <li><p>Tried changing onClick to onChange as well but no luck.</p></li>
  <li><p>Tried putting button instead of checkbox but still same issue.</p></li>
  <li><p>Tried putting input checkbox directly in return statement but same<br>
  issue.</p></li>
  </ul>
  
  <p>Below is the code for the same:</p>
  
  <p><strong>Column defs:</strong></p>
  
  <pre><code>this.setState({
        terminalAllocationsColumnDefs: [
          {headerName:"",field:"status", width:150, cellRendererFramework: CheckBoxRenderer, headerComponentFramework : HeaderCheckBoxRenderer,HeaderChangeCallback:this.headerChangeCallback},
          {headerName: this.state.multiLangMsgs.TERMINAL_ID, field: "DId", width: 250},
          {headerName: this.state.multiLangMsgs.TERMINAL_TYPE, field: "DType", width: 250},
          {headerName: this.state.multiLangMsgs.MSISDN, field:"MsId", width:260},
          {headerName: this.state.multiLangMsgs.SIM_ID, field:"SimId", width:260},
          {headerName: this.state.multiLangMsgs.SATALITE_ID, field:"DKey", width:250}
        ]
      });
  </code></pre>
  
  <p><strong>HeaderCheckBoxRenderer Component:</strong></p>
  
  <pre><code>onCheckBoxChange(){
          this.selectAll = false;
          if(this.state.checkStatus == "inactive"){
              this.setState({
                  checkStatus :"active"
              });
              this.selectAll = true;
          }else {
              this.setState({
                  checkStatus: "inactive"
              });
          }
          // }console.clear();
          // console.log(this);
              try{
                  if(this.props.column.colDef.HeaderChangeCallback){
                      this.props.column.colDef.HeaderChangeCallback(this.selectAll);
                  }
              }catch(e){}
      }
      render() {
          return (
              &lt;div class="ag-header-cell" style={{"padding":"4px 4px 4px 5px"}}&gt;
                  &lt;div class="ag-header-cell-resize"/&gt;
                  &lt;div class="ag-header-select-all"/&gt;
                  &lt;div class="ag-header-component"/&gt;
                  &lt;input id="checkboxMember" type="checkbox" onClick={this.onCheckBoxChange.bind(this)} className="check" checked={this.state.checkStatus == "active" ? true : false}/&gt;
              &lt;/div&gt;
          );
      }
  </code></pre>
  
  <p><strong>Desktop</strong></p>
  
  <p><a href="https://i.stack.imgur.com/3md6B.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3md6B.gif" alt="enter image description here"></a></p>
  
  <p><strong>Tablet</strong></p>
  
  <p><a href="https://i.stack.imgur.com/tXbOY.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tXbOY.gif" alt="enter image description here"></a></p>
  
  <p>As you can see on desktop it is working as expected but on tablet it is working when I am clicking some where near to left border.</p>
  
  <p>Can anyone please help me out with this weird issue.</p>
  
  <p>Thanks in advance.</p>