title: Protractor - input is not clickable despite using ExpectedConditions.elementToBeClickable
body: <p>I'm trying to test an Ionic app using Protractor, and I have the following code in my page object that attempts to click on a checkbox:</p>
  
  <pre><code>  async shareWithPerson(name): Promise&lt;void&gt; {
      var input = this.inputWithName(name)
      await browser.wait(ExpectedConditions.invisibilityOf($('.toast-message')), 5000);
      await browser.wait(ExpectedConditions.invisibilityOf($('ion-backdrop')), 5000);
      await browser.wait(ExpectedConditions.elementToBeClickable(input), 5000);
      return input.click();
    }
  
    inputWithName(name): ElementFinder {
      var xpath = `//ion-label/div/span[@class="text"][contains(text(),'${name}')]/ancestor::ion-item/ion-checkbox`
      return element(by.xpath(xpath));
    }
  </code></pre>
  
  <p>However, no matter how hard I try, I always get the error:</p>
  
  <pre><code>unknown error: Element &lt;button ion-button="" ion-item="" class="button-full-width float-right"&gt;...&lt;/button&gt; is not clickable at point (897, 369). Other element would receive the click: &lt;ion-backdrop tabindex="-1" class="backdrop-no-tappable hydrated" style="opacity: 0; will-change: opacity; transition-duration: 200ms; transition-timing-function: ease-in-out;"&gt;&lt;/ion-backdrop&gt;
  </code></pre>
  
  <p>Despite the fact that I'm wating for the backdrop to be invisible and I'm waiting for the element to be clickable. I can get around this by using <code>browser.sleep(3000)</code>, but I'd rather not nail in arbitary sleeps to get around the problem. Where am I going wrong?</p>