MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Close picker on click of listbox

This commit is contained in:
Mel O'Hagan 2022-05-10 13:16:21 +01:00
parent 974cdad8da
commit 516d163ea2
1 changed files with 94 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/bbui/src/Form/Core/Picker.svelte
View File

@ -43,7 +43,7 @@
return return
} }
searchTerm = null searchTerm = null
open = true open = !open
} }
const getSortedOptions = (options, getLabel, sort) => { const getSortedOptions = (options, getLabel, sort) => {
@ -71,7 +71,8 @@
} }
</script> </script>
<button <div use:clickOutside={() => (open = false)}>
<button
{id} {id}
class="spectrum-Picker spectrum-Picker--sizeM" class="spectrum-Picker spectrum-Picker--sizeM"
class:spectrum-Picker--quiet={quiet} class:spectrum-Picker--quiet={quiet}
@ -80,7 +81,7 @@
class:is-open={open} class:is-open={open}
aria-haspopup="listbox" aria-haspopup="listbox"
on:mousedown={onClick} on:mousedown={onClick}
> >
{#if fieldIcon} {#if fieldIcon}
<span class="icon-Placeholder-Padding"> <span class="icon-Placeholder-Padding">
<img src={fieldIcon} alt="icon" width="20" height="15" /> <img src={fieldIcon} alt="icon" width="20" height="15" />
@ -111,10 +112,9 @@
> >
<use xlink:href="#spectrum-css-icon-Chevron100" /> <use xlink:href="#spectrum-css-icon-Chevron100" />
</svg> </svg>
</button> </button>
{#if open} {#if open}
<div <div
use:clickOutside={() => (open = false)}
transition:fly|local={{ y: -20, duration: 200 }} transition:fly|local={{ y: -20, duration: 200 }}
class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open" class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
class:auto-width={autoWidth} class:auto-width={autoWidth}
@ -182,7 +182,8 @@
{/if} {/if}
</ul> </ul>
</div> </div>
{/if} {/if}
</div>
<style> <style>
.spectrum-Popover { .spectrum-Popover {