YII2 MaskedInput: moving between fields does not highlight content

Question

Usually when moving from a field to another with tab-key, the field content (if present) is highlighted and pressing a key the content of the field is deleted but that doesn't happen when using Kartik MaskedInput with decimal field.

When I move control to another field the cursor moves at the end, so I must use backspace to delete the field content or use mouse to highlight it.

I have a form with a lot of fields, so this is takes long time to edit.

This is my code:

<?= $form->field($model, 'val_one' , ['template' => '
                      <div class="input-group ">
                      <span class="input-group-addon">
                      FIRST
                      <span class="glyphicon glyphicon-euro"></span>
                      </span>
                      {input}                      
                      </div>
                      {error}{hint}'])->textInput(['maxlength' => true])->label(false)->widget(yii\widgets\MaskedInput::className(),
                                                [
                                               'clientOptions' => [
                                               'alias' => 'decimal',
                                               'groupSeparator' => '.',
                                               'radixPoint' => ',',
                                               'digits' => 2,
                                               'autoGroup' => true,
                                               'removeMaskOnSubmit' => true,
                                               'rightAlign' => false,                                  
                                               ],
                                               'options' => [
                                               'class' => 'form-control',                  
                                               ]                               
                                                 ]) ?>

Answer 1

I found the solution.

It's enough to use this javascript code:

$focus = <<< JS
function getSelect(item) {
if (event.keyCode == 9) {
item.select ();
   };
};
JS;
$this->registerJs($focus, View::POS_END);

and add this line in form field options:

'onkeyup' => 'getSelect($(this))'

In this way, every time tab-key is pressed (code 9) the content of the destination field is selected