Comment régler le focus de l'entrée après que le calcul a été mis à jour

Question

J'ai une table/grille qui montre les périphériques en fonction de leur type. Chaque fois que la liste déroulante change, la table doit être mise à jour pour afficher les périphériques corrects. Pour ce faire, j'ai un calcul qui filtre les périphériques par type et ajoute une nouvelle ligne vide à la table/grille.

Voici le html:

<table> 
    <thead> 
     <tr> 
      <th><!--Row Number--></th> 
      <th>Serial No.</th> 
      <th>Name</th> 
      <th><!--Delete Button--></th> 
     </tr> 
    </thead> 
    <tbody data-bind="foreach: filteredDevices"> 
     <tr> 
      <td data-bind="text: $index() + 1"></td> 
      <td><input data-bind="value: serial, event: { change: ($parent.filteredDevices().length == $index() + 1) ? $parent.addDevice : '' }" /></td> 
      <td><input data-bind="value: name, event: { change: ($parent.filteredDevices().length == $index() + 1) ? $parent.addDevice : '' }" /></td> 
      <td><button type="button" data-bind="visible: $parent.filteredDevices().length != $index() + 1, click: $parent.deleteDevice">Delete</button></td> 
     </tr> 
    </tbody> 
</table> 

Code Knockout:

var DevicesViewModel = function() { 
    var self = this; 

    self.devices = ko.observableArray([{ name: 'test1', serial: 'test1', type: 'type1' },{ name: 'test2', serial: 'test2', type: 'type2' }]); 
    self.selectedDeviceType = ko.observable("type1"); 

    self.deviceTypes = ko.observableArray([ 
     { value: 'type1', name: 'Type 1' }, 
     { value: 'type2', name: 'Type 2' } 
    ]); 

    self.addDevice = function (data) { 
     self.devices.push({ name: data.name, serial: data.serial, type: data.type }); 
    }; 

    self.deleteDevice = function (device) { 
     self.devices.remove(device); 
    }; 

    self.filteredDevices = ko.computed(function() { 
     var arr = ko.utils.arrayFilter(self.devices(), function (device) { 
      return device.type == self.selectedDeviceType(); 
     }); 

     arr.push({ name: null, serial: null, type: self.selectedDeviceType() }); 

     return arr; 
    }); 
}; 

ko.applyBindings(new DevicesViewModel()); 

Voici le violon pour lui: https://jsfiddle.net/wa9108bf/

Si vous onglet à travers la grille au départ, tout fonctionne bien. Cependant, si vous tapez quelque chose dans la première entrée de la dernière rangée et que la tabulation est terminée, l'accent sera perdu. Je devine que ceci se produit parce que le calculé est mis à jour et la table est rendue encore avec le nouveau tableau calculé qui ne sait rien au sujet du foyer. Y a-t-il un moyen d'obtenir la fonctionnalité que je veux?

Answer 1

L'entrée perd le focus car vous supprimez l'élément actuel et ajoutez une copie. Si vous maintenez plutôt l'élément actuel dans le tableau, le focus restera.

changement

self.addDevice = function (data) { 
    self.devices.push({ name: data.name, serial: data.serial }); 
}; 

à

self.addDevice = function (data) { 
    self.devices.push(data); 
};