Event in Lightning, not working as expected

Question

I have two components in which one is parent and other one is obviously child. I have a ui:inputtext in child component and on keyup event, I am handling fired event in parent component. But it is not handling it properly. I am registering my event in child component and then firing it from child's JS controller, which should in turn call parent's JS method. But it is not. I am posting my code as well:

Child Component.

<aura:component >
<aura:attribute name="name" type="String"/>
<aura:registerEvent name="searchContact" type="c:contactListSearchFormEvent" /> -->
<div class="slds-form-element">
<label class="slds-form-element__label" for="inputSample2">Filter</label>
<div class="slds-form-element__control">
  <ui:inputText value="{! v.name}"  aura:id="name" class="slds-input" placeholder="Contact Name" keyup="{! c.refineList}"/>
</div>

Child Controller:

({
refineList : function(component, event, helper) {
    var nameField = component.find("name");
    var name = nameField.get("v.value");
    console.log(name);
    var searchEvent = component.getEvent("searchContact");
    console.log(searchEvent);
    searchEvent.setParams({
        "searchKey" : name 
    });
    searchEvent.fire();
    console.log("after fire");
}})

Parent Component:

<aura:component controller="ContactListController">
<aura:attribute name="contacts" type="Contact[]"/>
<aura:handler name="init" action="{! c.doInit}" value="{! this}"/>
<aura:handler name="refineList" action="{! c.refineList}" event="c:contactListSearchFormEvent"/>
<c:contactListSearchForm />
<ul class="slds-list--top">
    <aura:iteration items="{! v.contacts}" var="contact">
        <div class="slds-box slds-box--small">
        <li class="slds-item"><a href="{! '/'+ contact.Id}">{! contact.Name}</a></li>
        <li class="slds-item">{! contact.Phone}</li>
            </div>
    </aura:iteration>
</ul>

Parent Controller:

({
refineList : function(component, event, helper){
    var action = component.get("c.findByName");
    var name = event.getParam("searchKey");
    action.setParams({
        "searchKey" : name
    });
    action.setCallback(this, function(response){
        var state = response.getState();
        console.log("inside status block" + status);
        if(component.isValid() && state === "SUCCESS"){
            component.set("v.contacts", response.getReturnValue());
        }
    });
}})

Here goes my Event:

<aura:event type="COMPONENT">
<aura:attribute name="searchKey" type="String" />

I am unable to solve this issue. I am not very experienced with events, so may be missing something.

Answer 1

The bug in your code is at <aura:handler name="refineList" action="{! c.refineList}" event="c:contactListSearchFormEvent"/>

1. you must use same name that you gave in registered event <aura:handler name="searchContact" action="{! c.refineList}" event="c:contactListSearchFormEvent"/>

The name attribute in <aura:handler> must match the name attribute in the <aura:registerEvent> tag in the component that fires the event.