InputNumber floatLabel p-filled not working

[damiancerero]

Hi there,

When using the InputNumber component with a lodash-type name, like : name={`operacion.inmuebles.${index}.valor_compraventa`} and when a value is written in the input

Code: Select all

<InputNumber
	id={name} name={name} value={formik.values[name]}
        onValueChange={formik.handleChange}
	className={classNames('p-component', { 'p-invalid': isFormFieldValid(name) })}
	tooltipOptions={{ position: 'bottom' }}
	tooltip="Valor en euros. Solo valores positivos."
	mode="currency" currency="EUR" locale="es-ES"
	name={`operacion.inmuebles.${index}.valor_compraventa`} formik={props.formik} label="Valor compraventa*"
	icon={<i className="pi pi-euro"/>}  
>
</InputNumber>

Even though the input does have the p-filled class, the span p-inputwrapper doesn't add the p-inputwrapper-filled class. So both the floating label and the written value overlap.

However, if a simple name is given to the InputNumber, such as name='hi', everything works as expected.

If such lodash-style name is given to an InputText component, everything works, as the inputwrapper is not there.

Any thoughts on hoy can be this overcome/corrected? (besides using the InputText or flattening all the object, as this must be a typical use case in realistic scenarios)

Thanks.

[damiancerero]

This wasn't finally related to Primefaces.

I'll write it here just in case other members have the same use case.

Thing is value={formik.values[name]} won't work with the lodash style, so the Formik getIn function needs to be used: value={getIn(formik.values, name)}

That's why the value was always recognised as undefined and therefore the wrapper wasn't being filled.

Best,

[mcandu]

Hi,

Thank you for sharing your solution. If you have any other PrimeReact related question or issue please ask.

Best Regards,