0

I have a parent custom Lightning Component which includes a custom lookup component inside, for Account Edit/Create. I want when the user starts typing (and results start to appear in a drop-down list) to not let the user leave the child component unless he chooses a valid value, or unless the search text is blank . I tried to use onblur but doesn't seem to work for the dropdown list. Here is the piece of js code that I use and think an extra command or something should be added:

searchField : function(component, event, helper) {
    var currentText = event.getSource().get("v.value");
    var resultBox = component.find('resultBox');
    component.set("v.LoadingText", true);
    //06/09/2019: George Galaios: if length of text typed by user >0 show resultBox, else not show it
    if(currentText.length > 0) {
        $A.util.addClass(resultBox, 'slds-is-open');
    }
    else {
        $A.util.removeClass(resultBox, 'slds-is-open');
    }
    //06/09/2019: George Galaios: Call Apex Class to return the results while user is typing
    var action = component.get("c.getResults");
    action.setParams({
        "ObjectName" : component.get("v.objectName"),
        "fieldName" : component.get("v.fieldName"),
        "value" : currentText
    });

    action.setCallback(this, function(response){
        var STATE = response.getState();
        if(STATE === "SUCCESS") {
            component.set("v.searchRecords", response.getReturnValue());
            if(component.get("v.searchRecords").length == 0) {
                console.log('000000');
            }
        }
        else if (state === "ERROR") {
            var errors = response.getError();
            if (errors) {
                if (errors[0] && errors[0].message) {
                    console.log("Error message: " + 
                                errors[0].message);
                }
            } else {
                console.log("Unknown error");
            }
        }
        component.set("v.LoadingText", false);
    });

    $A.enqueueAction(action);
},

Any suggestions?

0

You can try onmouseleave Event on the wrapping Div of the Custom Lookup.

<div onmouseleave="{!c.onLeave}"

And inside the event you can check for the selected value, if undefined show info message and keep the list open.

onLeave: function(component,event,helper){       
    var selRec = component.get(“v.selectedRecord”); 
    //If undefined show some message and keep the list open
},
  • Thanks for your answer, Saroj. – Giorgos Galaios Sep 13 at 19:28
  • Are you able to solve the issue? Is it working? – Saroj Bera Sep 14 at 10:01
  • Hi Saroj, i solve the issue by using "onmousedown" which executes before onfocusout. Thank you! – Giorgos Galaios Sep 17 at 9:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.