CODEWITHSUNDEEP
htmlcsshyperlinkaccordiontailwind-css
stephendwolff
stephendwolff

Reputation: 1742

Link inside a TailwindCSS group:focus element fails as click event prevented

I have an FAQ section which has accordion type sprung sections, all made with TailwindCSS (i.e. no Javascript). Links inside open sections do not work (they just close the FAQ as the question looses focus).

Does anyone have any idea how i can get the link event to fire before the focus is lost?

Here's a simple minimal example demonstrating the issue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test TailwindCSS Group:Focus</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="tailwind.css" rel="stylesheet">
    <style>
        /* ----- ACCORDION ----- */
        .group:focus .group-focus\:max-h-screen {
            max-height: 100vh;
        }
        .group:focus .group-focus\:text-white {
            --text-opacity: 1;
            color: #02455a; /*petrol_blue*/
            color: rgba(255, 255, 255, var(--text-opacity));
        }

        .group:focus .group-focus\:-rotate-90 {
            --transform-rotate: -90deg;
        }
    </style>
</head>
<body>

<div class="group" tabindex="1">
    <div class="group flex justify-between px-4 py-2 items-center transition cursor-pointer pr-10 relative">
        <div class="h-8 w-8 items-center inline-flex justify-center rotate-180 transform transition group-focus:-rotate-90 absolute top-0 left-0 mb-auto ml-auto mt-2 mr-2">
            <svg fill="#02455a" height='100px' width='100px' xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 847 847" x="0px" y="0px">
                <g><polygon points="670,584 423,263 176,584 "></polygon></g></svg>
        </div>
        <div class="transition pl-4  hover:opacity-50">Question</div>
    </div>
    <div class="group-focus:max-h-screen max-h-0 px-4 overflow-hidden">
        <p class="pl-4 pr-4 pt-0 pb-2">Answer: <a href="https://stackoverflow.com">Stack Overflow</a></p>
    </div>
</div>


</body>
</html>

tailwind.css is creating using:

npx tailwindcss-cli@latest build -o tailwind.css

(Incidentally, i realise the svg arrow isn't behaving itself, but that's another issue...)

Upvotes: 1

Views: 2844

Answers (1)

juliomalves
juliomalves

Reputation: 50418

In addition to your group-focus:max-h-screen you could also add focus-within:max-h-screen so that the max-height is kept when the anchor gains focus.

To fix your arrow animation simply replace --transform-rotate with --tw-rotate in your CSS.

.group:focus .group-focus\:max-h-screen {
  max-height: 100vh;
}

.group:focus .group-focus\:text-white {
  --text-opacity: 1;
  color: #02455a;
}

.group:focus .group-focus\:-rotate-90 {
  --tw-rotate: 90deg;
}

.focus-within\:max-h-screen:focus-within {
  max-height: 100vh;
}
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

<div class="group" tabindex="1">
  <div class="group flex justify-between px-4 py-2 items-center transition cursor-pointer pr-10 relative">
    <div class="h-8 w-8 items-center inline-flex justify-center rotate-180 transform transition group-focus:-rotate-90 absolute top-0 left-0 mb-auto ml-auto mt-2 mr-2">
      <svg fill="#02455a" height="100px" width="100px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 847 847" x="0px" y="0px">
        <g><polygon points="670,584 423,263 176,584 "></polygon></g>
      </svg>
    </div>
    <div class="transition pl-4 hover:opacity-50">Question</div>
  </div>
  <div class="group-focus:max-h-screen focus-within:max-h-screen max-h-0 px-4 overflow-hidden">
    <p class="pl-4 pr-4 pt-0 pb-2">Answer: <a href="https://stackoverflow.com">Stack Overflow</a></p>
  </div>
</div>

Upvotes: 1

Related Questions