hperrin / svelte-material-ui

Svelte Material UI Components
https://sveltematerialui.com/
Apache License 2.0
3.28k stars 288 forks source link

select leading icon is sometimes put at end #567

Open simonh1000 opened 1 year ago

simonh1000 commented 1 year ago

Describe the bug A select leading icon is sometimes put at end and blocks the down arrow

image

To Reproduce https://svelte.dev/repl/64502fe6cd0445e0819436f3d035de6d?version=3.55.1

Here is the code in case the link does not work

        <Select bind:value={leadingIcon} label="Leading Icon"
                        key={(intro) => `${intro ? intro.name : ''}`}
            >
            <Icon class="material-icons" slot="leadingIcon">event</Icon>
            <Option value="" />
            {#each catagories as intro}
                <Option value={intro}>{intro.name}</Option>
            {/each}
        </Select>

        <Select
            key={(intro) => `${intro ? intro.name : ''}`}
            bind:value={selected}
            label="Categories"
        >
            <Icon class="material-icons" slot="leadingIcon">account-group</Icon>
            <Option value={null} />
            {#each catagories as intro}
                <Option value={intro}>{intro.name}</Option>
            {/each}
        </Select>

<script>
    import Select, { Option } from '@smui/select';
    import Icon from '@smui/select/icon';
    import Button from '@smui/button';

    let leadingIcon = '';
    let selected= "";
        const catagories = [
        { icon: 'run', name: 'joggers' },
        { icon: 'music', name: 'singers' },
        { icon: 'family-tree', name: 'family' },
        { icon: 'account-group', name: 'friends' }
    ];
</script>

<svelte:head>
    <!-- Fonts -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700">

  <!-- Material Typography -->
    <link rel="stylesheet" href="https://unpkg.com/@material/typography@14.0.0/dist/mdc.typography.css" />

    <!-- SMUI -->
    <link rel="stylesheet" href="https://unpkg.com/svelte-material-ui/bare.css" />
</svelte:head>

<style>
    :global(body) {
        margin: 0;
        padding: 0;
    }
</style>