Firebase makes me stop typing after one keystroke in my AngularFire/AngularJS project

Question

I started using Firebase (AngularFire) for synchronizing my data for my application. It's a Card tool for Scrum that adds cards to an array. You can manipulate the input fields.

In the first place I used localStorage, which worked really well. Now that I basically implemented Firebase, I got the following problem: After typing a single key into one field, the application stops and the only way of resuming typing is to click in the input field again.

Do you know why this is? Thank you very much in advance!

That's my basic implementation in my Controller:

Card = (@color, @customer, @points, @number, @projectName, @story) ->

        $scope.cards = []
        reference = new Firebase("https://MYACCOUNT.firebaseio.com/list")
        angularFire(reference, $scope, "cards")

        $scope.reset = ->
            $scope.cards = []

        $scope.addCardRed = (customer) ->
            $scope.cards.push new Card("red", customer)

That's my Markup:

<div class="card card-{{ card.color }}">
    <header>
        <input class="points" contenteditable ng-model="card.points"></input>
        <input class="number" placeholder="#" contenteditable ng-model="card.number"></input>
        <input class="customerName"  contenteditable ng-model="card.customer.name"></input>
        <input class="projectName" placeholder="Projekt" contenteditable ng-model="card.projectName"></input>
    </header>
    <article>
        <input class="task" placeholder="Titel" contenteditable ng-model="card.task"></input>
        <textarea class="story" placeholder="Story" contenteditable ng-model="card.story"></textarea>
    </article>
    <footer>
        <div class="divisions">
            <p class="division"></p>
            <button ng-click="deleteCard()" class="delete">X</button>
        </div>
    </footer>
</div>
<div class="card card-{{ card.color }} backside">
    <article>
        <h2 class="requirement">Requirements</h2>
        <textarea class="requirements" placeholder="Aspects" contenteditable ng-model="card.requirements"></textarea>
    </article>
</div>

Answer 1

I ran into this as well. This is because it's recalculating the entire array. Here's how I fixed it:

Bind your input to an ng-model and also add this focus directive

<input class="list-group-item" type="text" ng-model="device.name" ng-change="update(device, $index)" ng-click="update(device, $index)" ng-repeat='device in devices' focus="{{$index == selectedDevice.index}}" />

I set the selectedDevice like this

$scope.update = function(device, index) {
  $scope.selectedDevice = device
  $scope.selectedDevice.index = index
}

Now create this directive.

angular.module('eio').directive("focus", function() {
  return function(scope, element, attrs) {
    return attrs.$observe("focus", function(newValue) {
      return newValue === "true" && element[0].focus();
    });
  };
});

Update Sorry for the delay, had a few things to tend to.

The reason why this works is because it is constantly saving the index value of the item in the array you are currently selecting. Once focus is lost, focus is returned immediately by going to that index.

If we're talking about multiple arrays, however, you'll need to refactor the setSelected code to say which array it is.

So you'd want to change

focus="{{$index == selectedDevice.index}}"

to something like

focus="{{$index == selectedDevice.index && selectedDevice.kind == 'points'}}"

Where points is the category of the array where the code appears.

Answer 2

I sorted this one by downloading the most recent version of angularFire.js, seems like bower installed the on that didn't have this fix. now my contentEditable is!