CSR color coding row of list not showing correctly when list is filtered

Question

Before i show my code, let me give some background. I am using JSLink in the webpart of the list. I have MDS disabled for the site. my javascript file is located in my root sitecollection in Style library.

this list works correctly at first but when filtered it looses the color until the list is refreshed. I have tried the skipanimation line as well, and it did nothing.

(function () {

  var overrideCtx = {};
  overrideCtx.Templates = {};

  overrideCtx.OnPostRender = [
    HighlightRowOverride
  ];

  SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);

}) ();

function HighlightRowOverride (inCtx) {

  // for each item (row)
  for (var i = 0; i < inCtx.ListData.Row.length; ++i) {
    var listItem = inCtx.ListData.Row [i];

    var iid = GenerateIIDForListItem(inCtx, listItem);
    var row = document.getElementById(iid);

    if (listItem.Status == "Stale") {
      if (row != null) {
        row.style.backgroundColor = "rgba(255, 0, 0, 0.5)"; //red
      }
    }    
  }
}

Answer 1

Try this:

<script>
  (function(){
    // Create object that have the context information about the field that we want     to change it's output render
    var statusFiledContext= {};
    statusFiledContext.Templates = {};
    statusFiledContext.Templates.Fields = {
      //Apply the new redenring for nom du projet field on the list view
      "status" : {"View" : statusFiledTemplate}
    };
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(statusFiledContext);
  })();
  
  //this function provides our purpose
  function statusFiledTemplate(ctx){
    var status= ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
  switch (status) { 
              case "Stale": 
                  return "<span style='color :#f00'>" + status + "</span>"; 
                  break; 
              case "Pending": 
                  return "<span style='color :#ff6a00'>" + status + "</span>"; 
                  break; 
              case "Rejected": 
                  return "<span style='color :#cab023'>" + status + "</span>"; 
          } 
  }
</script>

Test result:

Updated code:

<script>
(function () {
    var overrideCurrentContext = {};
    overrideCurrentContext.Templates = {};
    overrideCurrentContext.OnPostRender = renderItem;
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCurrentContext);
})();


function renderItem() {
    
    if (ctx.ListTitle == "test4") {
        var rows = ctx.ListData.Row;
        for (var i = 0; i < rows.length; i++) {
            var status = rows[i]["status"];            

            var rowId = GenerateIIDForListItem(ctx, rows[i]);
            var row = document.getElementById(rowId);
            if (row != null && status=="Pending" ) {
                row.style.backgroundColor = '#ffcccc';
            }
            
        }

        ctx.skipNextAnimation = true;
    }
   
}

</script>