WidgetVar InputNumber Primefaces 6.1 not working

Question

I'm migrate from Primefaces 5.2 to 6.1. But, I was using widgetVar in inputNumber, for resolving operations with javascript. However, widgetVar not working for inputNumber in 6.1 version.

Example:

HEAD

    <h:head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <h:outputScript name="jquery/jquery.js" library="primefaces" />
    <h:outputScript name="jquery/jquery-plugins.js" library="primefaces" />
    <h:outputScript name="core.js" library="primefaces" />
    <h:outputScript name="components.js" library="primefaces" /> 

</h:head>
              <p:inputNumber thousandSeparator="." decimalSeparator="," widgetVar="wInput"
                       onchange="valueForInput('wInput')"/>

    <script>
        function valueForInput(wInput){
            var inputNumber = PF(wInput);
            console.log(inputNumber.getValue());
        }
    </script>

CONSOLE ERROR

Uncaught TypeError: Cannot read property 'getValue' of undefined
at valueForInput (http://localhost:8084/sgwapp/:15:40)
at HTMLInputElement.onchange (http://localhost:8084/sgwapp/:11:2197)
at Object.trigger (http://localhost:8084/sgwapp/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces&v=6.1:4585:27)
at HTMLInputElement.<anonymous> (http://localhost:8084/sgwapp/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces&v=6.1:5289:17)
at Function.each (http://localhost:8084/sgwapp/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces&v=6.1:384:23)
at jQuery.fn.init.each (http://localhost:8084/sgwapp/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces&v=6.1:136:17)
at jQuery.fn.init.trigger (http://localhost:8084/sgwapp/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces&v=6.1:5288:15)
at jQuery.fn.init.jQuery.fn.(anonymous function) [as change] (http://localhost:8084/sgwapp/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces&v=6.1:8481:9)
at c.setValueToHiddenInput (http://localhost:8084/sgwapp/javax.faces.resource/inputnumber/inputnumber.js.xhtml?ln=primefaces&v=6.1:3:1714)
at copyValueToHiddenInput (http://localhost:8084/sgwapp/javax.faces.resource/inputnumber/inputnumber.js.xhtml?ln=primefaces&v=6.1:3:1542)
valueForInput @ (index):15
onchange @ (index):11
trigger @ jquery.js.xhtml?ln=primefaces&v=6.1:4585
(anonymous) @ jquery.js.xhtml?ln=primefaces&v=6.1:5289
each @ jquery.js.xhtml?ln=primefaces&v=6.1:384
each @ jquery.js.xhtml?ln=primefaces&v=6.1:136
trigger @ jquery.js.xhtml?ln=primefaces&v=6.1:5288
jQuery.fn.(anonymous function) @ jquery.js.xhtml?ln=primefaces&v=6.1:8481
setValueToHiddenInput @ inputnumber.js.xhtml?ln=primefaces&v=6.1:3
copyValueToHiddenInput @ inputnumber.js.xhtml?ln=primefaces&v=6.1:3
init @ inputnumber.js.xhtml?ln=primefaces&v=6.1:3
e.(anonymous function) @ core.js.xhtml?ln=primefaces&v=6.1:5
c @ core.js.xhtml?ln=primefaces&v=6.1:5
createWidget @ core.js.xhtml?ln=primefaces&v=6.1:1
cw @ core.js.xhtml?ln=primefaces&v=6.1:1
(anonymous) @ (index):11
fire @ jquery.js.xhtml?ln=primefaces&v=6.1:3148
fireWith @ jquery.js.xhtml?ln=primefaces&v=6.1:3260
ready @ jquery.js.xhtml?ln=primefaces&v=6.1:3472
completed @ jquery.js.xhtml?ln=primefaces&v=6.1:3503

Answer 1

You can see in your stack that your onchange listener was triggered during the widget's construction, that's why you can't find it with the PF function - it's not ready yet.

You probably are not interested in the initial value anyway, so skip this call:

function valueForInput(wInput){
    if (PF(wInput)) {
        var inputNumber = PF(wInput);
        console.log(inputNumber.getValue());
    }
}