Open simonh1000 opened 1 year ago
Describe the bug A select leading icon is sometimes put at end and blocks the down arrow
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>
Describe the bug A select leading icon is sometimes put at end and blocks the down arrow
To Reproduce https://svelte.dev/repl/64502fe6cd0445e0819436f3d035de6d?version=3.55.1
Here is the code in case the link does not work