CODEWITHSUNDEEP
angularjstwitter-bootstrapangular-ui-bootstrap
stinaq
stinaq

Reputation: 1284

Text input box not accepting input in modal from Angular UI Bootstrap

I have a modal (nbr 1) that I open from another modal (nbr 2). The modal nbr 1 works fine and is showing the things it should. But I tried to put an input to filter items in the modal, but the input is not working. I can't write anything in it, it's just not accepting my input.

I think this has something to do with the fact that it's is my second modal, since when I'm opening it from the "root" (not opening it from another modal), the text inputs works fine.

Here's my html:

<div class="modal-header">
  <h3 class="modal-title">Pick a student</h3>
<div class="modal-body">

  <!-- I can't type in this text field, no matter where it's placed och if it has any attributes at all -->
  <input type="text" class="form-control" id="searchUsers" placeholder="Search by name, personal ID number or group" ng-model="search.$" ng-click="console.log('omg')">
  <table class="table table-hover table-striped equi-table">
    <tbody>
      <tr ng-repeat="user in state.users | filter:search:strict">
        <td>{{ user.firstName }}</td>
        <td>{{ user.lastName }}</td>
        <td>{{ user.personalIDNumber }}</td>
      </tr>
    </tbody>
  </table>
</div>

And here's the JavaScript:

This part opens the modal from modal nbr 2:

$scope.addUserToCourse = function () {
  utilities.pickAUserModal();
};

And here's the actual modal

angular.module('equiclass.services')
.factory('utilities', function ($modal) {
  var pickAUserModal = function () {
    var modalInstance = $modal.open({
      templateUrl: '/views/modals/pick-a-user-modal.html',
      controller: function ($scope, $modalInstance, stateService, userService) {
        var log = loggingService.getLogger ('pickAUserModal');

        $scope.state = userService.state;
        userService.initializeUsers().then(function () {
          $scope.hasInitialized = true;
        });

        $scope.ok = function () {
          $modalInstance.close(true);
        };

        $scope.cancel = function () {
          $modalInstance.close(false);
        };
      }
    });
  };

  return {
    pickAUserModal: pickAUserModal
  };
});

Why can't I type anything in my text input? I've tried editing z-indexes, and putting different kinds of inputs there (checkboxes work, textareas doesn't). And as I said before, the modal is opened from another modal, but modal number two is not created using Angular UI Bootstrap (I'm slowly phasing over to angular UI)

Upvotes: 7

Views: 6252

Answers (4)

Christopher Hadfield
Christopher Hadfield

Reputation: 11

I had the same issue as well with the following code:

element.on('mousedown', function (event) {
        // Prevent default dragging of selected content
        event.preventDefault();
        startX = event.screenX - x;
        startY = event.screenY - y;
        $document.on('mousemove', mousemove);
        $document.on('mouseup', mouseup);
      });

I fixed it by removing event.preventDefault();, changing the code to:

element.on('mousedown', function (event) {
        startX = event.screenX - x;
        startY = event.screenY - y;
        $document.on('mousemove', mousemove);
        $document.on('mouseup', mouseup);
      });

This allows the clicks to reach the fields.

Upvotes: 1

Boris Lutskovsky
Boris Lutskovsky

Reputation: 561

I had the same exact issue after implementing someone else's ngDraggable directive. It's possible that what you're using as part of your modal does something similar - it captures click events and calls preventDefault() on the event, which means the cursor never actually reaches the input. What I had below allowed the modal to be draggable, but blocked the click from ever reaching form fields.

element.on('mousedown', function (event) {
        // Prevent default dragging of selected content
        event.preventDefault();
        startX = event.screenX - x;
        startY = event.screenY - y;
        $document.on('mousemove', mousemove);
        $document.on('mouseup', mouseup);
      });

Upvotes: 0

Deane
Deane

Reputation: 71

I know that this is late, but I ran into the same error today. What fixed it for me was deleting the custom bootstrap CSS that angular strap provides. I wasn't using this until I added date-picker and it wasn't styling correctly.

I just used the date-picker CSS and that fixed the problem. I'm guessing it has something to do with the modal styles in the custom CSS.

Hope this helps someone.

Upvotes: 0

Hypnotic
Hypnotic

Reputation: 21

I had the same problem with angular-strap modal and I could not manage to write into any input field. After few hours I have found what's wrong and how to fix it. The problem comes with bootstrap-additions.min.css and class .modal.center .modal-dialog which position property is fixed. I do not know why but that breaks all input fields into my modal. When you use absolute positon for that property the modal block works jsut fine.

.modal.center .modal-dialog{
    position:absolute !important;
    top:40%;left:50%;
    min-width:320px;
    max-width:630px;
    width:50%;
    -webkit-transform:translateX(-50%) translateY(-50%);
    transform:translateX(-50%) translateY(-50%)
}

I hope that can help you to with your problem.

Upvotes: 2

Related Questions