Railsでinputとlabelが紐づかない時はpartialを外してみる

よくあるクリックで開閉するアコーディオンメニューみたいなものを作ろうとしていたらハマりました。

取り立てて記事にするような事でもない気もしますが、同じようなことで困っている方の時間短縮になれば。

状況

・Railsの書式は使わず、素のHTMLで問題の要素(アコーディオンメニュー)を書いてた
・問題の要素の親はflex(中央寄せのため)
・問題の要素と同一要素内にRails書式のformタグ
・問題の要素をpartialで呼び出していた

くらいで、特に変なことはしてなかったはず。

ちなみにinputタグにはidを、labelタグのforにも同一の文字列を明示していてもなお……といった具合です。

cssも確認し、確かにinputタグに関する指定もしていたものの、type部分が異なるものであったため、css周りのミスではありませんでした。

原因

・親要素がflexboxである=>無関係
・formタグが同一要素内にある=>無関係
・該当箇所を部分テンプレートで呼び出していた=>こいつが原因

起こった理由自体は特定できていないため、薄っぺらい記事になってしまいましたがこういうことがあったとの旨の記事だと思っていただければ。

色々試してなぜこういった問題が起きたのか特定しようともしたのですが、partial外に記述して治ったところまでしか分からなかったので、もし分かる方がいましたらコメントいただければ幸いです。

参考までに一応くだんの状況が起こるであろう(未検証)コードも掲載しておきます。

<%# 問題のコード %>
<div class="flex">
  <%= render :partial => "components/menu" %>
</div>

<%# /components/_menu.html.erbはこんな感じ %>
<p>ほげ</p>
<div class="accordion">
  <label for="hoge"></label>
  <input id="hoge" type="checkbox">
    <div class="accordion_open">
      <p>ここが出てこない</p>
    </div>
</div>

<%# こうしたら平気だった %>
<div class="flex">
  <%= render :partial => "components/menu" %>
  <div class="accordion">
    <label for="hoge"></label>
    <input id="hoge" type="checkbox">
      <div class="accordion_open">
        <p>ここが出てこない</p>
      </div>
  </div>
</div>

<style type="text/scss">
/*中央寄せ*/
.flex{
  display: flex;
  justify-content: center;
  align-items: center;
}

/*アコーディオン*/
.accordion {
  margin: 0;
  padding: 0;
  & > label {
  cursor: pointer;
  }
  & > input[type="checkbox"] {
    display: none;
    &:checked ~ .accordion_open {
      height: auto;
      opacity: 1;
    }
  }
  & > .accordion_open {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 1s;
  }
}
</style>

コメントを残す

メールアドレスが公開されることはありません。