unclead/yii2-multiple-input

Incorrect tabindex order

faritka opened this issue · 4 comments

The tabindex attribute is always set to 1.
It destroys the order in a form.

When you put a multiple input widget in the middle of a form, it's skipped when a user moves from one input to another.
He has to use a mouse.

@faritka add a code snippet to reproduce the issue

You have to explicitly set tabindex in column settings to get the desired behaviour. More details in the documentation

For example, this code produces a form field with the tabindex=1.


<?= FA::icon('envelope', ['style' => 'margin: 4px 8px'])->size(FA::SIZE_LARGE)->pullLeft(); ?>
        <?= $form->field($model, 'emails')->widget(unclead\multipleinput\MultipleInput::className(), [
            'min' => 1,
            'max' => 4,
        ]) ?>
<div class="form-group field-user-emails required">
<label class="control-label" for="user-emails">Email</label>
<input type="hidden" name="User[emails]"><div id="w0" class="multiple-input"><table class="multiple-input-list table table-condensed table-renderer"><tbody><tr class="multiple-input-list__item"><td class="list-cell__emails"><div class="field-user-emails-0 form-group"><input type="text" id="user-emails-0" class="form-control" name="User[emails][0]" value="test@test.com" *tabindex="1"></div></td>
<td class="list-cell__button"><div class="multiple-input-list__btn js-input-plus btn btn-default"><i class="glyphicon glyphicon-plus"></i></div></td></tr></tbody>
</table></div>

It comes from this function where tabindex is always set to 1.
Once, I comment out the line
//$options['tabindex'] = self::TABINDEX;
then tab works as expected.

And I don't want to set tabindex to every field to put them in the correct order. I want just the default behavior.

` /**
* Renders an input.
*
* @param string $name the name of input
* @param mixed $value the value of input
* @param array $options the HTMl options of input
* @return string
* @throws InvalidConfigException
*/
protected function renderDefault($name, $value, $options)
{
$type = $this->type;

    if (method_exists('yii\helpers\Html', $type)) {
        $options['tabindex'] = self::TABINDEX;

        if ($this->renderer->isBootstrapTheme()) {
            Html::addCssClass($options, 'form-control');
        }

        $input = Html::$type($name, $value, $options);
    } elseif (class_exists($type) && method_exists($type, 'widget')) {
        $input = $this->renderWidget($type, $name, $value, $options);
    } else {
        throw new InvalidConfigException("Invalid column type '$type'");
    }

    return $input;
}

`

@faritka your point sounds reasonable. I found the issue is the scope of which I decided to set tabindex to 1 (#197) but I agree it was not the best solution.
As the widget now supports custom tabindex via column settings I removed settings default tabindex
Thank you