前提・実現したいこと
deviseを使ってuser管理をし、ログイン等を行えるようにしたい
発生している問題・エラーメッセージ
deviseを使用してuser管理する流れでログイン画面とサインイン画面のviewを作成し反映できたのですが、代わりに登録ボタンやログインボタンをクリックしても反応しなくなってしまいました。
エラー文？だと思う記述です。
Autofocus processing was blocked because a document already has a focused element.
該当のソースコード
app/views/devise/registrations/new.html.erb
<section class="hero" id='account-page'>
<%= form_with model: @user, url: user_registration_path, local: true do |f|%>
<form class="login-form">
<p class="login-text">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-lock fa-stack-1x"></i>
</span>
</p>
<%= f.text_field :n_name, autofocus: true, class: "login-username", placeholder: "ニックネーム" %>
<%= f.email_field :email, class: "login-username", placeholder: "メールアドレス" %>
<%= f.password_field :password, autocomplete: "off", class: "login-username", placeholder: "パスワード(半角英数6文字以上)" %>
<%= f.password_field :password_confirmation, autocomplete: "off", class: "login-username", placeholder: "パスワード(確認用)" %>
<%= f.number_field :height, autofocus: true, class: "login-username", placeholder: "身長" %>
<%= f.number_field :weight, autofocus: true, class: "login-username", placeholder: "体重" %>
</form>
<%= f.collection_select(:age_id, Age.all, :id, :name, {}, {class:"login-username", id:"user-age"}) %>
<div class="btn">
<%= f.submit "新規登録", class: "login-submit" %>
</div>
<div class="underlay-photo"></div>
<div class="underlay-black"></div>
<% end %>
</section>
app/views/devise/sessions/new.html.erb
<section class="hero">
<%= form_with model: @user, url: user_session_path, local: true do |f|%>
<form class="login-form">
<p class="login-text">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-lock fa-stack-1x"></i>
</span>
</p>
<%= f.email_field :email, class: "login-username", placeholder: "メールアドレス" %>
<%= f.password_field :password, autocomplete: "off", class: "login-username", placeholder: "パスワード(半角英数6文字以上)" %>
</form>
<div class="btn">
<%= f.submit "ログイン", class: "login-submit" %>
</div>
<div class="underlay-photo"></div>
<div class="underlay-black"></div>
<% end %>
</section>
試したこと
該当箇所が<!DOCTYPE html>ということで今までに見たことがない箇所の問題でした。
エラー文を直接調べたり、翻訳して意味を調べてみました。
直訳
ドキュメントにすでにフォーカスされた要素があるため、オートフォーカス処理はブロックされました。
という意味でした。
すでにフォーカスされたという記述から別の何かが先に習得されて使えなかったという意味かな？と仮説建しています。
しかしながらどこを触れば解決するか解決することができませんでした。
補足情報（FW/ツールのバージョンなど）
バージョンは
Rails 6.0.3.7 です。
ご助力よろしくお願いします。
Q&A
自己解決
