uk-select not rendered correctly on Svelte

[codenoid]

the select element is hidden

after I try to uncheck the uk-cloak attribute, it rendered like this:

code:

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

I'm on "franken-ui": "^0.2.0"

Tailwind config:

import franken from 'franken-ui/shadcn-ui/preset-quick';

/** @type {import('tailwindcss').Config} */
export default {
    presets: [franken()],
    content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
    safelist: [
        {
            pattern: /^uk-/
        }
    ],
    theme: {
        extend: {}
    },
    plugins: []
};

Postcss config:

module.exports = {
    plugins: [
        require('tailwindcss'),
        require('franken-ui/postcss/sort-media-queries')({
            sort: 'mobile-first'
        }),
        require('franken-ui/postcss/combine-duplicated-selectors')({
            removeDuplicatedProperties: true
        })
    ]
};

[codenoid]

@777Naity you are sharing a Malware using GitHub issue report?

[sveltecult]

Hello @codenoid

The <uk-select> is a web component and I have only a very limited support for reactive frameworks. Yes, it supposed to be hidden because web component will remove the uk-cloak attribute by itself once it's ready.

You can import the webc cdn on your app.html or if you're using npm, check if svelte is running on browser then do the import.

[codenoid]

thanks for the response @sveltecult , I have import webc on my Svelte app.html with

<script type="module" src="/js/franken-wc@0.0.6/wc.iife.js"></script>

but the component is still not exist, and not just that, the content inside uk-select is removed

[sveltecult]

Yes, CDN does not seem to work on app.html but it worked when I import it from NPM. Here's my code for reference:

<script>
    import { browser } from '$app/environment';

    if (browser) {
        import('uikit');
        import('franken-wc');
    }
</script>

<div class="uk-container uk-margin-large-top uk-margin-large-bottom">
    <uk-select name="test" uk-cloak>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
        <option value="option4">Option 4</option>
        <option value="option5">Option 5</option>
    </uk-select>
</div>

Output:

Be cautious though. You will encounter issues like this when HMR is triggered, you can try full refresh.

Also, I'm not sure if loops {#each} will work inside <uk-select> and last time I tested, options are not reactive if you dynamically add <option> tag.

Unfortunately, I have no plans to support reactive frameworks as I'm this framework prioritize HTML (server rendered pages). However, you can use the native select tag or find a svelte-native components like headless-svelte and design it up your own.

[codenoid]

Also, I'm not sure if loops {#each} will work inside and last time I tested, options are not reactive if you dynamically add tag.

I see, I might need to server-rendered the page

anyway thanks, the code is now working

[schaveyt]

@sveltecult I am one of those folks dynamically adding inner tags. I do have a means to detect when the component fully processed and can trigger any javascript initialization functions at that time. Is there any sort of initaliztaion function for uk-select.

Actually, where I go to see the source code for the uk-select web component?