title: Use inputs in AngularJS Material bottom-sheet
body: <h1>The problem</h1>
  
  <p>I'm designing a Cordova hybrid app using the (very) new <strong><a href="https://material.angularjs.org/">AngularJS Material Design dependency</a></strong>.</p>
  
  <p>I have a log in form in a bottom sheet called via <code>$mdBottomSheet</code> service.  Example below:</p>
  
  <pre><code>$scope.showLogin = function ($event) {
    $mdBottomSheet.show({
      templateUrl: 'views/login/login.html',
      controller: 'loginCtrl'
    })
  };
  </code></pre>
  
  <p>The contents of <code>views/login/login.html</code> are:</p>
  
  <pre><code>&lt;md-bottom-sheet ng-controller="loginCtrl" layout="column"&gt;
    &lt;form name="signInForm" ng-submit="submitPassword()"&gt;
      &lt;md-list&gt;
        &lt;md-item&gt;
          &lt;md-progress-circular md-mode="indeterminate" ng-show="loading"&gt;&lt;/md-progress-circular&gt;
        &lt;/md-item&gt;
        &lt;md-item&gt;
          &lt;md-text-float label="Email address" ng-model="username" required&gt;
          &lt;/md-text-float&gt;
        &lt;/md-item&gt;
        &lt;md-item&gt;
          &lt;md-text-float type="password" label="Password" ng-model="password" required&gt;
          &lt;/md-text-float&gt;
        &lt;/md-item&gt;
        &lt;md-item&gt;
          &lt;md-button class="md-primary md-raised submit" type="submit"&gt;Sign in&lt;/md-button&gt;
        &lt;/md-item&gt;
      &lt;/md-list&gt;
    &lt;/form&gt;
  &lt;/md-bottom-sheet&gt;
  </code></pre>
  
  <p>Everything runs and displays just fine.</p>
  
  <p><strong>HOWEVER!</strong> when I go to click on the input, the focus is never given to the input, and instead the <code>md-bottom-sheet</code> element is dragged back and forth.  Clicking on the button (when not disabled) fires just fine, but the click on the input to give it focus is never recognized.</p>
  
  <p>&nbsp;</p>
  
  <hr>
  
  <h1>Things I've tried</h1>
  
  <ol>
  <li>Adding <code>ng-click="return false"</code>, 'ng-click="$event.preventDefault()"`</li>
  <li>Adding a <code>-webkit-transform: translate3d(0, 80px, 0) !important;</code> rule to the CSS, as that's the default state of the property which is being altered on drag.</li>
  <li>Adding <code>angular.element('md-bottom-sheet').on('click', function() { return false; });</code> to an <code>ng-init</code> block.</li>
  <li>Doing the same as above (using jQuery to try to ham-hand this) on the <code>dragstart</code> event.</li>
  </ol>
  
  <p>&nbsp;</p>
  
  <hr>
  
  <h1>The question</h1>
  
  <p>How can I use an input in a bottom sheet with material design, given I've tried every workaround that I know to get this to work for touch?</p>
  
  <p>&nbsp;</p>
  
  <hr>
  
  <p><sub><strong>Caveats</strong></sub></p>
  
  <p><sub> 
   1. I would love to offer a live example for this, but I can't find a CDN source for <a href="https://github.com/angular/material">angular/material</a></sub></p>
  
  <p><sub> 
   2. This only happens on a mobile device, no idea if it will happen on a mobile website as I've only tested it in a Cordova hybrid app</sub></p>
  
  <p><sub>
   3. There are no examples of this I've found via search, so I can't even point you to a resource that might emulate the problem.</sub></p>
  
  <p><sub>
   4. Basically, this is going to be very hard to reproduce.</sub></p>
  
  <hr>
  
  <h1>Update</h1>
  
  <p>One possible fix I've identified:</p>
  
  <p>The following block in the <code>function BottomSheet(element)</code> "class" for the provider has the following:</p>
  
  <pre><code>function onTouchStart(e) {
    e.preventDefault();
    /* do the rest of the code */
  }
  </code></pre>
  
  <p>Changing that <code>e.preventDefault()</code> to the following <strong>does allow normal input behavior</strong>, but requires that I fork their repo.</p>
  
  <pre><code>if (e.target.tagName.toLowerCase() !== 'input')
    e.preventDefault()
  </code></pre>
  
  <p><strong>Is there a solution that doesn't require me to fork this for such a minor change?</strong></p>