Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bug: Select disappears and don't come back after accordion closes #33

Open
j0rd1smit opened this issue Nov 5, 2024 · 2 comments
Open

Bug: Select disappears and don't come back after accordion closes #33

j0rd1smit opened this issue Nov 5, 2024 · 2 comments
Labels
bug Something isn't working

Comments

@j0rd1smit
Copy link

When I have a select input inside an accordion, it only works if the accordion is open by default. As soon as it closes, it does not come back. Also, if the accordion is closed by default, it will never appear.

Here is a minimal example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width"/>
    <title>Franken UI</title>
    <link rel="preconnect" href="https://rsms.me/"/>
    <link rel="stylesheet" href="https://rsms.me/inter/inter.css"/>

    <style>
        :root {
            font-family: Inter, sans-serif;
            font-feature-settings: "liga" 1, "calt" 1; /* fix for Chrome */
        }

        @supports (font-variation-settings: normal) {
            :root {
                font-family: InterVariable, sans-serif;
            }
        }
    </style>

    <!-- For stability in production, it's recommended that you hardcode the latest version in the CDN link. -->

    <link
            rel="stylesheet"
            href="https://unpkg.com/franken-ui/dist/css/core.min.css"
    />

    <script>
        const htmlElement = document.documentElement;

        if (
            localStorage.getItem("mode") === "dark" ||
            (!("mode" in localStorage) &&
                window.matchMedia("(prefers-color-scheme: dark)").matches)
        ) {
            htmlElement.classList.add("dark");
        } else {
            htmlElement.classList.remove("dark");
        }

        htmlElement.classList.add(
            localStorage.getItem("theme") || "uk-theme-zinc"
        );
    </script>

    <script
            type="module"
            src="https://unpkg.com/franken-ui/dist/js/core.iife.js"
    ></script>
    <script
            type="module"
            src="https://unpkg.com/franken-ui/dist/js/icon.iife.js"
    ></script>
</head>
<body class="bg-background text-foreground">
<!-- START CODING HERE -->
<div class="uk-flex uk-flex-column uk-flex-middle uk-flex-center">

    <div class="uk-width-1-1">
        <ul class="uk-accordion" uk-accordion>
            <li class="uk-open">
                <a class="uk-accordion-title" href>
                    Item 1
                    <span class="uk-accordion-icon">
        <uk-icon icon="chevron-down"></uk-icon>
      </span>
                </a>
                <div class="uk-accordion-content">


                    <uk-select uk-cloak>
                        <option value="option1">Option 1</option>
                        <option value="option2">Option 2</option>
                        <option value="option3">Option 3</option>
                    </uk-select>


                </div>
            </li>
            <li>
                <a class="uk-accordion-title" href>
                    Item 2
                    <span class="uk-accordion-icon">
        <uk-icon icon="chevron-down"></uk-icon>
      </span>
                </a>
                <div class="uk-accordion-content">
                    <uk-select uk-cloak>
                        <option value="option4">Option 4</option>
                        <option value="option5">Option 5</option>
                        <option value="option6">Option 6</option>
                    </uk-select>
                </div>
            </li>
            <li>
                <a class="uk-accordion-title" href>
                    Item 3
                    <span class="uk-accordion-icon">
        <uk-icon icon="chevron-down"></uk-icon>
      </span>
                </a>
                <div class="uk-accordion-content">
                    <uk-select uk-cloak>
                        <option value="option7">Option 7</option>
                        <option value="option8">Option 8</option>
                        <option value="option9">Option 9</option>
                    </uk-select>
                </div>
            </li>
        </ul>
    </div>


</div>
<!-- END -->
</body>
</html>

Initial render:
Screenshot 2024-11-05 at 14 48 08

After closing and opening the accordion
Screenshot 2024-11-05 at 14 48 15

When inspecting the HTML after closing and opening the accordion, I only see:
Screenshot 2024-11-05 at 14 49 44

Am I doing something wrong or is this a bug?
@sveltecult sveltecult added the bug Something isn't working label Nov 5, 2024
@sveltecult
Copy link
Member

Hello @j0rd1smit

Yes this is a known re-rendering/reactivity issue. And thanks for bringing this up. I was not aware that it also affects accordion.

@Cijin
Copy link

Cijin commented Dec 16, 2024 •
edited
Loading

Not sure if it's related but uk-select does not work within modals either.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Cijin @j0rd1smit @sveltecult