[SalesForce] onchange event is not triggered when clear an input field

I am invoking a look up field as an input field in my visual force page. Upon the selection or clearing of the value on the look up field, I want to update another part of the page. Here comes a code snip.

Visualforce page:

<apex:actionRegion>
    <apex:pageBlockSection id='pageSection'>
        <apex:inputField value="{!object.Account__c}" id="AccountInput">
             <apex:actionSupport action="{!changeAccount}" event="onchange" rerender="pageSection"/>
        </apex:inputField>
        <apex:inputField value="{!object.Contact__c}" rendered="{!NOT(ISNULL(object.Account__c)) }" id="contactInput"/>
    <apex:pageBlockSection>
</apex:actionRegion>

Apex function:

public void changeAccount(){
    object.Contact__c = null;
}

On a common case, the action 'changeAccount' get triggered every time when I select a new account, so the the pre-existing contact got reset to empty. However, when I click on the clear button beside the account look up field, to clear values in Account field. It seems like the 'onChange' event is not firing and the action is not triggered as there isn't any ajax calls going out from my browser.

UI Layout

It seems like salesforce has a bug round the clear button(the button come along with look up input field). Does anyone know what event will be thrown when the clear button got clicked? OR do I need to listen to the click event myself?

NOTE: The object.Contact__c is a filtered field base on object.Account__c. I noticed that if the filter does not exist on the field the 'clear' button does not show on the UI.

Best Answer

This clear button only appears in IE (not in FF or Chrome) for me.

The onChange event occurs when the contents of input is changed and focus is moved out from input.

Here is simplified test code that i wrote.

<apex:page standardController="contact">
<apex:form>
    <apex:pageBlock>
        <apex:actionRegion>
            <apex:pageBlockSection id='pageSection'>
                <apex:inputField value="{!contact.AccountID}" id="AccountInput" onChange="alert('changed');" />
            </apex:pageBlockSection>
        </apex:actionRegion>
    </apex:pageBlock>
</apex:form>

Now when you change the content of input by selecting different account the contents are changed + focus is also changed and so you see alert message.

When you clear the account name the contents changes but focus is still on input and so it does not fire onChange event.

Related Topic