Use input in bottom sheet of AngularJS material

Question

Problem

I am developing a Cordova hybrid application using the (very) new AngularJS dependent design framework .

I have a log form in the bottom sheet called through the $mdBottomSheet service. Example below:

 $scope.showLogin = function ($event) { $mdBottomSheet.show({ templateUrl: 'views/login/login.html', controller: 'loginCtrl' }) }; 

The contents of views/login/login.html :

 <md-bottom-sheet ng-controller="loginCtrl" layout="column"> <form name="signInForm" ng-submit="submitPassword()"> <md-list> <md-item> <md-progress-circular md-mode="indeterminate" ng-show="loading"></md-progress-circular> </md-item> <md-item> <md-text-float label="Email address" ng-model="username" required> </md-text-float> </md-item> <md-item> <md-text-float type="password" label="Password" ng-model="password" required> </md-text-float> </md-item> <md-item> <md-button class="md-primary md-raised submit" type="submit">Sign in</md-button> </md-item> </md-list> </form> </md-bottom-sheet> 

Everything works and displays very well.

BUT! when I click on input, focus is never entered on input, but instead the md-bottom-sheet element is dragged back and forth. Pressing a button (when not disabled) works just fine, but clicking on an input to give it focus will never be recognized.

---

Things i tried

• Adding ng-click="return false" , 'ng-click = "$ event.preventDefault ()" `
• Adding a CSS rule -webkit-transform: translate3d(0, 80px, 0) !important; in CSS, because this is the default state for a property that changes when you drag it.
• Adding angular.element('md-bottom-sheet').on('click', function() { return false; }); to the ng-init block.
• Performing the same action as above (using jQuery to try to handle this) in the dragstart .

---

Question

How can I use the input in the bottom sheet with a material design, given that I have tried every workaround that I know to make it work by touch?

---

<sub> Caution sub>

<sub> 1. I would like to offer a live example for this, but I cannot find the source CDN for angular / material

<sub> 2. This only happens on the mobile device, I don’t know if this will happen on the mobile website, since I tested it only in the Cordova hybrid application

<sub> 3. There are no examples of this that I found through a search, so I can’t even tell you a resource that can emulate a problem.

<sub> 4. In principle, it will be very difficult to reproduce.

---

Update

One possible fix that I have identified:

The following block in the function BottomSheet(element) "class" function BottomSheet(element) for the provider has the following:

 function onTouchStart(e) { e.preventDefault(); /* do the rest of the code */ } 

Changing this parameter of e.preventDefault() to the next allows normal input behavior , but requires me to reprogram their repo.

 if (e.target.tagName.toLowerCase() !== 'input') e.preventDefault() 

Is there any solution that doesn't require me to do this for such a minor change?

Answer 1

You were close to a decision. You used stopPropagation() instead of preventDefault() . Here is a simple approach:

Directive (. Coffee)

 angular.module('Expedite').directive 'stopEvent', -> restrict: 'A' link: (scope, element, attr) -> element.bind attr.stopEvent, (e) -> e.stopPropagation() 

View (.slim)

 input ng-model="user.email" stop-event='touchstart' 

This way you don’t have to fork repo material.

Answer 2

So, I faced the same problem. The code above works for pre 0.6.1 - although after that it doesn't work so well.

However, I found that moving e.preventDefault() (minus the if() logic) to the onTouchMove(e) function onTouchMove(e) all scrolling failures (at least what I see) - and still allow the inputs to function normally.

Agree, it would be great if the guys from ng-material could include something similar in the repo to make the implementation of $ mdBottomSheet more flexible.