Custom component setter value being passed in to controller, but getter always returns null (or the initialized value)

Question

The setup: I have a standard controller with two extensions on it.

<apex:page
    standardController="Contact"
    showQuickActionVfHeader="false"
    extensions="ExtOne,ExtTwo">

    <c:ExtraInformation titleFieldKeys="Test1,Test2"/>

    <script>
        const values = '{!value}';
    </script>

</apex:page>

The controller also has a custom component on it, which should be piping the property on it onto my extension:

<apex:component controller="ExtTwo">
    <apex:attribute
        name="titleFieldKeys"
        type="String"
        assignTo="{!extraInfoTitleFieldKeys}"/>
</apex:component>

The code on the extension is as follows:

public with sharing class ExtTwo {

    public Apexpages.StandardController scon {get; set;}
    public String extraInfoTitleFieldKeys {get; set;}

    //  Apparently for custom components to work on extensions, you need
    //  to overload the constructor....
    public ExtTwo() {}

    public ExtTwo(Apexpages.StandardController scon) {
        this.scon = scon;
    }

    public String getValue() {

        Map<String, Object> record = new Map<String, Object>();

        record.put('extra', extraInfoTitleFieldKeys);

        return JSON.serialize(record);
    }
}

All of this seems pretty straightforward to me. But the issue I'm having is that the value, after being sent into the Setter, will not be retrieved by the Getter during the getValue call. I have tried everything I can think of, but it seems as though the value is just vanishing. I went as far as to explode the getter/setter out into their own methods:

    public String extraInfoTitleFieldKeysInternal = '';

    public void setExtraInfoTitleFieldKeys(String input){
        System.debug('setting setExtraInfoTitleFieldKeys to '+input);
        this.extraInfoTitleFieldKeysInternal = input;
        System.debug('setExtraInfoTitleFieldKeys set: '+extraInfoTitleFieldKeysInternal);
    }

    public String getExtraInfoTitleFieldKeys(){
        System.debug('getting extraInfoTitleFieldKeys: '+extraInfoTitleFieldKeysInternal);
        return this.extraInfoTitleFieldKeysInternal;
    }

The debug log shows that yes, input is set to the value I specified in the visualforce page, and extraInfoTitleFieldKeysInternal is showing that it is being set to the value of input as you would assume. However, when I call getExtraInfoTitleFieldKeys, it logs that extraInfoTitleFieldKeysInternal is null. The setter is triggering long before the getter, so it's not a race condition.

The only movement I could get is if I set extraInfoTitleFieldKeysInternal to some initial value - in that case, the setter would register setting what I specified in the visualforce page, but the getter would stubbornly return the value from the initialized extraInfoTitleFieldKeysInternal.

I've been at this for hours now and I've run out of ideas. I'll be perfectly happy at this point if it's something glaringly obvious. I just need this to work!

Answer 1

This is what is happening:

• The VF page is instantiating two controller objects ExtOne, ExtTwo
• The custom VF component is instantiating a third controller object ExtTwo
• The JS line const values = '{!value}'; is invoking the getter on the page's ExtTwo object. But that object's setter public String extraInfoTitleFieldKeys {get; set;} is never invoked; it is the second ExtTwo object's setter that is invoked via the component's assignTo="{!extraInfoTitleFieldKeys}".

Hence, the JS getter (which references the page's controller, not the component's controller) fetches a null value