[SalesForce] tag in Lightning do not have keyup attribute

I am facing the issue with :

I am using a lookup with lightning: input. When the user clicks enter search text in this input field. New component opens up showing related search records.

Now to close search window, I have a cross button in front of the field.

The user wants that on clicking anywhere outside search result component/box. This component should get closed. Now I am unable to find any workaround of attribute keyUp which we use in ui:input. Any idea how to achieve that.

Best Answer

You can add the keyup to and input field, you just have to specify UpdateOn so that the change event triggers on keyup

<ui:inputText aura:id="searchInput" 
    label="Search" 
    keyup="{!c.performSearch}" 
    updateOn="keyup" />

Source

Edit: I'm pretty sure this will work on a lightning:input as well, but I haven't tested that.

Related Solutions

[SalesForce] hiding a div when clicking anywhere outside without using jQuery

Can you try this fiddle and let me know?

https://jsfiddle.net/8uufaLhf/1/

In this fiddle I have hidden the my div content when the user clicks out of div.

[SalesForce] lightning:input doesn’t always bind to attribute references

The below worked for me .The issue was that the value has to be binded to the checked attribute for toggle, checkbox and radio buttons

<aura:component >
<aura:attribute name="toggleCaseEscalation" type="Boolean"/>

<aura:handler name="change" value="{!v.toggleCaseEscalation}" action="{!c.toggleCaseEscalationChanged}"/>

<lightning:input name="inputToggleCaseEscalation"
                 aura:id="inputToggleCaseEscalation"
                 type="toggle"
                 label="Toggle Case Escalation"
                 checked="{!v.toggleCaseEscalation}" />
 </aura:component>

The JS controller for the same

({
    toggleCaseEscalationChanged : function(component, event, helper) {
      console.log('VALUE..'+component.find("inputToggleCaseEscalation").get("v.checked"));//Another way to capturing the value via an Id .
      console.log(component.get("v.toggleCaseEscalation"));
      console.log("DEBUG: (testFieldUpdateController.toggleCaseEscalationChanged) toggleCaseEscalation changed; new value = " + component.get("v.toggleCaseEscalation"));
  }

})

Best Answer

Related Solutions

[SalesForce] hiding a div when clicking anywhere outside without using jQuery

[SalesForce] lightning:input doesn’t always bind to attribute references

Related Topic