Setting Decimal MaskedInput to 0

Yii 2.0 General Discussions
1

I’m struggling with a MaskedInput.

I have

echo $form->field(
	$modelRate,
	"[{$i}]Rate",
	[
		'template' => '<div class="col-sm-12 no-padding">{input}</div>' . "\n" . '<div class="col-sm-12">{hint}{error}</div>'
	]
)
->label(false)
->widget(
	MaskedInput::className(),
	[
		'clientOptions' => [
			'alias' => 'decimal',
			'digits' => 2,
			'digitsOptional' => false,
			'radixPoint' => '.',
			'groupSeparator' => ',',
			'autoGroup' => true,
			'removeMaskOnSubmit' => true,
		],
		'options' => [
			'class' => 'form-control',
		]
	]
);

It displays fine, my users can use it fine.

I have a JS event that will update the input and it does

tr.find('[id ^=employeesrates-][id $=-rate]').val(value);

For all value <> 0.00 it works just fine, but when the value is = 0.00 nothing gets input and then I get an error notification. Yet, you can manually enter 0.00 and if I run directly in my browser console

$('#employeesrates-2-rate').val(0.00)

OR

$('#employeesrates-2-rate').val('0.00')

OR

$('#employeesrates-2-rate').val('0')

that enters the value just fine

I also just noticed, that if I enter the value manually (0) and save, come back and alter another row of data then the 0 entry seems to go blank requiring reentry.

It’s just a 0 value that is breaking things.

I’m at a loss. What am I overlooking?

Thank you for your help!

2

Switching the options to

'clientOptions' => [
	'alias' => 'decimal', // changed from numeric
	'digits' => 2,
	'digitsOptional' => false,
	'radixPoint' => '.',
	'groupSeparator' => ',',
	'autoGroup' => true,
	'removeMaskOnSubmit' => true,
	'autoUnmask' => true, // Added
	'positionCaretOnTab' => false, // Added
],

and it works. I’d still love to actually understand why the previous config fails with jQuery if anyone knows.

3

MaskedInput uses Inputmask internally, so .val() alone may not update the mask state correctly for 0.

Use Inputmask API instead:

tr.find('[id ^=employeesrates-][id $=-rate]')    .inputmask('setvalue', value);

instead of:

.val(value)

This properly handles masked values including 0, 0.00, etc.