Autofocus on tabs?
So I made a custom login page where I added 2 tabs. Since I'm using tabs, autofocus() is not working anymore. I want to focus the textinput of the first tab. Is there a way to do it?
public function form(Form $form): Form
{
return $form
->schema([
Tabs::make('Label')
->tabs([
Tabs\Tab::make('Tarjeta')
->translateLabel()
->schema([
$this->getCardFormComponent(),
]),
Tabs\Tab::make('Usuario')
->translateLabel()
->schema([
$this->getLoginFormComponent(),
$this->getPasswordFormComponent(),
]),
])
->contained(false)
->activeTab(1)
])
->statePath('data');
}
protected function getCardFormComponent(): Component
{
return TextInput::make('card')
->label('Tarjeta')
->requiredWithout('login')
->password()
->autofocus()
->translateLabel();
}
protected function getLoginFormComponent(): Component
{
return TextInput::make('login')
->label('Usuario')
->requiredWithout('card')
->autocomplete()
->translateLabel();
}
protected function getPasswordFormComponent(): Component
{
return TextInput::make('password')
->label('Contraseña')
->requiredWith('login')
->password()
->autocomplete('current-password')
->translateLabel();
}
public function form(Form $form): Form
{
return $form
->schema([
Tabs::make('Label')
->tabs([
Tabs\Tab::make('Tarjeta')
->translateLabel()
->schema([
$this->getCardFormComponent(),
]),
Tabs\Tab::make('Usuario')
->translateLabel()
->schema([
$this->getLoginFormComponent(),
$this->getPasswordFormComponent(),
]),
])
->contained(false)
->activeTab(1)
])
->statePath('data');
}
protected function getCardFormComponent(): Component
{
return TextInput::make('card')
->label('Tarjeta')
->requiredWithout('login')
->password()
->autofocus()
->translateLabel();
}
protected function getLoginFormComponent(): Component
{
return TextInput::make('login')
->label('Usuario')
->requiredWithout('card')
->autocomplete()
->translateLabel();
}
protected function getPasswordFormComponent(): Component
{
return TextInput::make('password')
->label('Contraseña')
->requiredWith('login')
->password()
->autocomplete('current-password')
->translateLabel();
}
0 Replies