Close picker on click of listbox
This commit is contained in:
Mel O'Hagan
parent
974cdad8da
commit
516d163ea2
1 changed files with 94 additions and 93 deletions
|
|
@ -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,105 +71,73 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<button
|
<div use:clickOutside={() => (open = false)}>
|
||||||
{id}
|
<button
|
||||||
class="spectrum-Picker spectrum-Picker--sizeM"
|
{id}
|
||||||
class:spectrum-Picker--quiet={quiet}
|
class="spectrum-Picker spectrum-Picker--sizeM"
|
||||||
{disabled}
|
class:spectrum-Picker--quiet={quiet}
|
||||||
class:is-invalid={!!error}
|
{disabled}
|
||||||
class:is-open={open}
|
class:is-invalid={!!error}
|
||||||
aria-haspopup="listbox"
|
class:is-open={open}
|
||||||
on:mousedown={onClick}
|
aria-haspopup="listbox"
|
||||||
>
|
on:mousedown={onClick}
|
||||||
{#if fieldIcon}
|
|
||||||
<span class="icon-Placeholder-Padding">
|
|
||||||
<img src={fieldIcon} alt="icon" width="20" height="15" />
|
|
||||||
</span>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<span
|
|
||||||
class="spectrum-Picker-label"
|
|
||||||
class:is-placeholder={isPlaceholder}
|
|
||||||
class:auto-width={autoWidth}
|
|
||||||
>
|
>
|
||||||
{fieldText}
|
{#if fieldIcon}
|
||||||
</span>
|
<span class="icon-Placeholder-Padding">
|
||||||
{#if error}
|
<img src={fieldIcon} alt="icon" width="20" height="15" />
|
||||||
|
</span>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="spectrum-Picker-label"
|
||||||
|
class:is-placeholder={isPlaceholder}
|
||||||
|
class:auto-width={autoWidth}
|
||||||
|
>
|
||||||
|
{fieldText}
|
||||||
|
</span>
|
||||||
|
{#if error}
|
||||||
|
<svg
|
||||||
|
class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon"
|
||||||
|
focusable="false"
|
||||||
|
aria-hidden="true"
|
||||||
|
aria-label="Folder"
|
||||||
|
>
|
||||||
|
<use xlink:href="#spectrum-icon-18-Alert" />
|
||||||
|
</svg>
|
||||||
|
{/if}
|
||||||
<svg
|
<svg
|
||||||
class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon"
|
class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
|
||||||
focusable="false"
|
focusable="false"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
aria-label="Folder"
|
|
||||||
>
|
>
|
||||||
<use xlink:href="#spectrum-icon-18-Alert" />
|
<use xlink:href="#spectrum-css-icon-Chevron100" />
|
||||||
</svg>
|
</svg>
|
||||||
{/if}
|
</button>
|
||||||
<svg
|
{#if open}
|
||||||
class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
|
<div
|
||||||
focusable="false"
|
transition:fly|local={{ y: -20, duration: 200 }}
|
||||||
aria-hidden="true"
|
class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
|
||||||
>
|
class:auto-width={autoWidth}
|
||||||
<use xlink:href="#spectrum-css-icon-Chevron100" />
|
>
|
||||||
</svg>
|
{#if autocomplete}
|
||||||
</button>
|
<Search
|
||||||
{#if open}
|
value={searchTerm}
|
||||||
<div
|
on:change={event => (searchTerm = event.detail)}
|
||||||
use:clickOutside={() => (open = false)}
|
{disabled}
|
||||||
transition:fly|local={{ y: -20, duration: 200 }}
|
placeholder="Search"
|
||||||
class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
|
/>
|
||||||
class:auto-width={autoWidth}
|
|
||||||
>
|
|
||||||
{#if autocomplete}
|
|
||||||
<Search
|
|
||||||
value={searchTerm}
|
|
||||||
on:change={event => (searchTerm = event.detail)}
|
|
||||||
{disabled}
|
|
||||||
placeholder="Search"
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
<ul class="spectrum-Menu" role="listbox">
|
|
||||||
{#if placeholderOption}
|
|
||||||
<li
|
|
||||||
class="spectrum-Menu-item placeholder"
|
|
||||||
class:is-selected={isPlaceholder}
|
|
||||||
role="option"
|
|
||||||
aria-selected="true"
|
|
||||||
tabindex="0"
|
|
||||||
on:click={() => onSelectOption(null)}
|
|
||||||
>
|
|
||||||
<span class="spectrum-Menu-itemLabel">{placeholderOption}</span>
|
|
||||||
<svg
|
|
||||||
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
|
|
||||||
focusable="false"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<use xlink:href="#spectrum-css-icon-Checkmark100" />
|
|
||||||
</svg>
|
|
||||||
</li>
|
|
||||||
{/if}
|
{/if}
|
||||||
{#if filteredOptions.length}
|
<ul class="spectrum-Menu" role="listbox">
|
||||||
{#each filteredOptions as option, idx}
|
{#if placeholderOption}
|
||||||
<li
|
<li
|
||||||
class="spectrum-Menu-item"
|
class="spectrum-Menu-item placeholder"
|
||||||
class:is-selected={isOptionSelected(getOptionValue(option, idx))}
|
class:is-selected={isPlaceholder}
|
||||||
role="option"
|
role="option"
|
||||||
aria-selected="true"
|
aria-selected="true"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
on:click={() => onSelectOption(getOptionValue(option, idx))}
|
on:click={() => onSelectOption(null)}
|
||||||
>
|
>
|
||||||
{#if getOptionIcon(option, idx)}
|
<span class="spectrum-Menu-itemLabel">{placeholderOption}</span>
|
||||||
<span class="icon-Padding">
|
|
||||||
<img
|
|
||||||
src={getOptionIcon(option, idx)}
|
|
||||||
alt="icon"
|
|
||||||
width="20"
|
|
||||||
height="15"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
{/if}
|
|
||||||
<span class="spectrum-Menu-itemLabel">
|
|
||||||
{getOptionLabel(option, idx)}
|
|
||||||
</span>
|
|
||||||
<svg
|
<svg
|
||||||
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
|
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
|
||||||
focusable="false"
|
focusable="false"
|
||||||
|
|
@ -178,11 +146,44 @@
|
||||||
<use xlink:href="#spectrum-css-icon-Checkmark100" />
|
<use xlink:href="#spectrum-css-icon-Checkmark100" />
|
||||||
</svg>
|
</svg>
|
||||||
</li>
|
</li>
|
||||||
{/each}
|
{/if}
|
||||||
{/if}
|
{#if filteredOptions.length}
|
||||||
</ul>
|
{#each filteredOptions as option, idx}
|
||||||
</div>
|
<li
|
||||||
{/if}
|
class="spectrum-Menu-item"
|
||||||
|
class:is-selected={isOptionSelected(getOptionValue(option, idx))}
|
||||||
|
role="option"
|
||||||
|
aria-selected="true"
|
||||||
|
tabindex="0"
|
||||||
|
on:click={() => onSelectOption(getOptionValue(option, idx))}
|
||||||
|
>
|
||||||
|
{#if getOptionIcon(option, idx)}
|
||||||
|
<span class="icon-Padding">
|
||||||
|
<img
|
||||||
|
src={getOptionIcon(option, idx)}
|
||||||
|
alt="icon"
|
||||||
|
width="20"
|
||||||
|
height="15"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
{/if}
|
||||||
|
<span class="spectrum-Menu-itemLabel">
|
||||||
|
{getOptionLabel(option, idx)}
|
||||||
|
</span>
|
||||||
|
<svg
|
||||||
|
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
|
||||||
|
focusable="false"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<use xlink:href="#spectrum-css-icon-Checkmark100" />
|
||||||
|
</svg>
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
{/if}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.spectrum-Popover {
|
.spectrum-Popover {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue