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.
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;
}
`