Radio button positioned after text field with onChange loses the value selected

Question

I have the following piece of code that presents a text field with an onChange event followed by a radio button. When the user enters a value into the text field and then clicks on the radio button field the value they selected in the radio button is lost.

To get around this we added a button that the user has to click before they select their choice on the radio button.

This is not a great workaround and I want to get rid of it. How do I make this work so that when they exit the text field and click on the following radio button, the value they selected in the radio button remains selected?

<xp:inputText id="shortAnswerCurrency" styleClass="short-answer form-control" value="#{compositeData.dataSource[compositeData.dataBinding]}" disableClientSideValidation="true">
            <xp:this.rendered><![CDATA[#{javascript:compositeData.QuestionDoc.getItemValueString("qType") == "Currency"}]]></xp:this.rendered>
            <xp:this.required><![CDATA[#{javascript:compositeData.QuestionDoc.getItemValueString("qRequire") == "Yes";}]]></xp:this.required>
            <xp:this.validators>
                <xp:validateRequired message="This question is required. Please enter a response."></xp:validateRequired>
            </xp:this.validators>
            <xp:this.converter>
                <xp:convertNumber type="currency" integerOnly="false" currencySymbol="$" currencyCode="USD"></xp:convertNumber>
            </xp:this.converter>
            <xp:this.attrs>
                <xp:attr name="placeholder" value="$"></xp:attr>
            </xp:this.attrs>
            <xp:eventHandler event="onchange" submit="true" refreshMode="partial" refreshId="myQuestions" disableValidators="true" onComplete="$('.datePickerDiv input').datepicker({format: 'MM dd, yyyy'});">
                <xp:this.action><![CDATA[#{javascript:viewScope.put(compositeData.QuestionDoc.getItemValueString("qMapping"), getComponent("shortAnswerCurrency").value);}]]></xp:this.action>
            </xp:eventHandler>
        </xp:inputText>
        <xp:button id="currencyButton" value="Enter" styleClass="btn btn-md btn-default">
            <xp:this.rendered><![CDATA[#{javascript:compositeData.QuestionDoc.getItemValueString("qType") == "Currency"}]]></xp:this.rendered>
            <xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="myQuestions" disableValidators="true">
                <xp:this.action><![CDATA[#{javascript:viewScope.put(compositeData.QuestionDoc.getItemValueString("qMapping"), getComponent("shortAnswerCurrency").value);}]]></xp:this.action>
            </xp:eventHandler>
        </xp:button>

<xp:radioGroup id="radioValue" value="#{compositeData.dataSource[compositeData.dataBinding]}" styleClass="long-radiolist" disableClientSideValidation="true">
            <xp:this.rendered><![CDATA[#{javascript:compositeData.QuestionDoc.getItemValueString("qType") == "Radio"}]]></xp:this.rendered>
            <xp:this.required><![CDATA[#{javascript:compositeData.QuestionDoc.getItemValueString("qRequire") == "Yes";}]]></xp:this.required>
            <xp:this.validators>
                <xp:validateRequired message="This question is required. Please select a response."></xp:validateRequired>
            </xp:this.validators>
            <xp:eventHandler event="onchange" submit="true" refreshMode="partial" refreshId="myQuestions" disableValidators="true" onComplete="$('.datePickerDiv input').datepicker({format: 'MM dd, yyyy'});">
                <xp:this.action><![CDATA[#{javascript:viewScope.put(compositeData.QuestionDoc.getItemValueString("qMapping"), getComponent("radioValue").value);}]]></xp:this.action>
            </xp:eventHandler>
            <xp:selectItems>
                <xp:this.value><![CDATA[#{javascript:compositeData.QuestionDoc.getItemValue("qValues")}]]></xp:this.value>
            </xp:selectItems>
        </xp:radioGroup>

Answer 1

In the radiobutton you submit=true in the event handler. getComponent("radioValue").value is maybe the wrong one and you need getComponent("radioValue").getSubmittedValue()

I have