Filter list detail page by category

Hi Guys,

I'm trying to sort my list detail page by categories for can't get it to work, gone through the video tutorial several times and looked around the documentation and can't see what i'm doing wrong.

I'm running the newest version of Perch (I updated an hour ago) and there's nothing in in the debug output that looks incorrect,

Here is my listing page.

tenant.php

<?php
     perch_content_create('Tenants', array(
     'template'  => '_tenant.html',
     'multiple'  => true,
     'edit-mode' => 'listdetail',
));
if (perch_get('s')) {

     // Detail mode
     perch_content_custom('Tenants', array(
          'template' => '_tenant.html',
          'filter'   => 'slug',
          'match'    => 'eq',
          'value'    => perch_get('s'),
          'count'    => 1,
     ));
} else {

 // Get Cats for dropdown

     perch_categories(array(
        'set' => 'tenant-categories',
        'template' => 'category-dropdown.html',
     ));


    //Check for cat in url, if not cat or all is selected display all.

    if ( perch_get('cat') != 'all' ) {

      perch_content_custom('Tenants', array(
           'template' => '_tenant-listing.html',
           'category' => perch_get('cat'),
      ));

    } else {

     perch_content_custom('Tenants', array(
          'template' => '_tenant-listing.html',
     ));

   }

}

If the selected cat is ALL then it works fine so I know is the filter by cat that i'm doing wrong.

Here are my two templates

_tenant.html (The list detail template)

<div class="container">
  <div class="row">

    <div class="col-xs-12 col-sm-8">
      <div class="page-header">
        <h1>TENANTS <small>AT PARK FARM SHOPPING CENTRE</small></h1>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4">
      <ol class="breadcrumb">
        <li><a href="/">Home</a></li>
        <li><a href="/tenants">Tenants</a></li>
        <li class="active"><perch:content id="tenantName" type="text" label="Name" title="true" required="true" size="xl autowidth" order="1"/></li>
      </ol>
    </div>

  </div>
  <div class="row">

    <perch:categories id="tenant-categories" label="Tenant Category" set="tenant-categories" required="true" display-as="checkboxes">
    <perch:before>
      <h3>Our work on this project</h3>
      <ul class="tags">
    </perch:before>
        <li><a href="/category/<perch:category id="catPath" />"><perch:category id="catTitle" /></a></li>
    <perch:after>
      </ul>
    </perch:after>
    </perch:categories>

    <div class="col-xs-12">
      <perch:if exists="tenantImage">
        <img src="<perch:content id="tenantImage" type="image" label="Banner Image" help="1200 x 350 px" order="2" />" alt="Image for <perch:content id="tenantName" />" />
      </perch:if>
    </div>

    <div class="tenant__content">
      <h2><perch:content id="tenantName" /></h2>
      <perch:content id="tenantDesc" type="textarea" label="Info" order="4" editor="markitup" markdown="true" size="xl autowidth" required="true" />
    </div>
    <div class="tenant__logo">
      <perch:if exists="tenantLogo">
          <img src="<perch:content id="tenantLogo" type="image" label="Logo" help="250 x 50 px" order="3"/>" alt="<perch:content id="tenantName" /> Logo" />
      </perch:if>
    </div>

    <div class="tenant__contact-heading">
      <h3>Contact Information</h3>
    </div>

    <div class="js-mh-tennats-contact tenant__contact-info">
      <perch:content id="tenantAddress" type="text" label="Address" size="xl autowidth" order="5" />
    </div>

    <div class="js-mh-tennats-contact tenant__contact-info">
      <perch:if exists="tenantPhone">
        <p>Call: <a href="tel:<perch:content id="tenantPhone" />"><perch:content id="tenantPhone" type="text" label="Phone Number" size="xl autowidth" order="5" /></a></p>
      </perch:if>
      <perch:if exists="tenantEmail">
        <p>Email: <a href="tel:<perch:content id="tenantEmail" />"><perch:content id="tenantEmail" type="text" label="Email Address" size="xl autowidth" order="6" /></a></p>
      </perch:if>
    </div>

    <div class="js-mh-tennats-contact tenant__contact-info">
      <perch:if exists="tenantWebsite">
        <p><a href="<perch:content id="tenantWebsite" />"><perch:content id="tenantWebsite" type="text" label="Website" size="xl autowidth" order="7" /></a></p>
      </perch:if>
    </div>

    <div class="js-mh-tennats-contact tenant__contact-info">
      <perch:if exists="tenantFacebook">
        <p><i class="fa fa-facebook"></i> <a href="<perch:content id="tenantFacebook" />"><perch:content id="tenantFacebook" type="text" label="Facebook" size="xl autowidth" order="8" /></a></p>
      </perch:if>
      <perch:if exists="tenantLinkedin">
        <p><i class="fa fa-linkedin"></i> <a href="<perch:content id="tenantLinkedin" />"><perch:content id="tenantLinkedin" type="text" label="Linkedin" size="xl autowidth" order="9" /></a></p>
      </perch:if>
      <perch:if exists="tenantTwitter">
        <p><i class="fa fa-twitter"></i> <a href="<perch:content id="tenantTwitter" />"><perch:content id="tenantTwitter" type="text" label="Twitter" size="xl autowidth" order="10" /></a></p>
      </perch:if>
      <perch:if exists="tenantGoogleplus">
        <p><i class="fa fa-google-plus"></i> <a href="<perch:content id="tenantGoogleplus" />"><perch:content id="tenantGoogleplus" type="text" label="Google Plus" size="xl autowidth" order="11" /></a></p>
      </perch:if>
    </div>

  </div>
</div>

<perch:content id="slug" for="tenantName" type="slug" suppress="true" />

And here is the list detail template (_tenant-listing.html)

<perch:before>
<div class="container">
  <div class="row">

</perch:before>



<div class="tenant-listing__wrapper">

    <div class="tenant-listing__item">
      <a href="?s=<perch:content id="slug" type="slug" />">
      <div class="tenant-listing__img">
        <img src="<perch:content id="tenantLogo" type="image" />" alt="<perch:content id="tenantName" /> Logo" />
      </div>
      <h4><perch:content id="tenantName" type="text" /></h4>
      <p>
        Call:  <a href="tel:<perch:content id="tenantPhone" />"><perch:content id="tenantPhone" /></a><br>
        <a href="<perch:content id="tenantWebsite" />"><perch:content id="tenantWebsite" /></a>
      </p>
      <p>
        <perch:if exists="tenantFacebook">
          <p><i class="fa fa-facebook"></i> <a href="<perch:content id="tenantFacebook" />"><perch:content id="tenantFacebook" /></a></p>
        </perch:if>
        <perch:if exists="tenantLinkedin">
          <p><i class="fa fa-linkedin"></i> <a href="<perch:content id="tenantLinkedin" />"><perch:content id="tenantLinkedin" /></a></p>
        </perch:if>
        <perch:if exists="tenantTwitter">
          <p><i class="fa fa-twitter"></i> <a href="<perch:content id="tenantTwitter" />"><perch:content id="tenantTwitter"  /></a></p>
        </perch:if>
        <perch:if exists="tenantGoogleplus">
          <p><i class="fa fa-google-plus"></i> <a href="<perch:content id="tenantGoogleplus" />"><perch:content id="tenantGoogleplus" /></a></p>
        </perch:if>
      </p>
      </a>
    </div>

</div>

<perch:after>
  </div>
</div>
</perch:after>

Something tells me the issue is with the tenant-listing.html template and the category should be in that template for it to be sortable but i've tried adding the cat title and cat slug to the top of this template and that didn't make any difference.

Thanks Guys