Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix clear button #357

Merged
merged 3 commits into from
Sep 13, 2024
Merged

Fix clear button #357

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fa218fa
fix: move clear button to bottom
decaf-dev Sep 13, 2024
31579e2
fix: reset input to selected value on close
decaf-dev Sep 13, 2024
8bf3c5b
fix: only show clear button when a value has been selected
decaf-dev Sep 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 31 additions & 26 deletions src/svelte/shared/components/search-select.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@

function closeDropdown() {
isOpen = false;
inputValue = "";
inputValue = value;
currentFocusIndex = 0;
}

Expand Down Expand Up @@ -157,22 +157,31 @@
bind:this={dropdownRef}
use:portalAction
>
{#each filteredOptions as option, i}
<div
tabindex="-1"
role="option"
aria-selected={option === value}
class="vault-explorer-search-select__dropdown-item"
class:vault-explorer-search-select__dropdown-item--selected={currentFocusIndex ===
i}
on:mousedown={handleOptionMouseDown}
on:click={(e) => handleOptionClick(option)}
on:keydown={() => {}}
>
{option}
</div>
{/each}
{#if filteredOptions.length > 0}
<div class="vault-explorer-search-select__dropdown-container">
{#each filteredOptions as option, i}
<div
tabindex="-1"
role="option"
aria-selected={option === value}
class="vault-explorer-search-select__dropdown-item"
class:vault-explorer-search-select__dropdown-item--selected={currentFocusIndex ===
i}
on:mousedown={handleOptionMouseDown}
on:click={(e) => handleOptionClick(option)}
on:keydown={() => {}}
>
{option}
</div>
{/each}
{#if filteredOptions.length === 0}
<div
class="vault-explorer-search-select__dropdown-item vault-explorer-search-select__dropdown-item--empty"
>
No results found
</div>
{/if}
</div>
{#if value !== ""}
<Divider />
<div
tabindex="-1"
Expand All @@ -186,13 +195,6 @@
Clear
</div>
{/if}
{#if filteredOptions.length === 0}
<div
class="vault-explorer-search-select__dropdown-item vault-explorer-search-select__dropdown-item--empty"
>
No results found
</div>
{/if}
</div>
{/if}
</div>
Expand All @@ -211,8 +213,6 @@
position: absolute;
background-color: var(--dropdown-background);
box-shadow: var(--input-shadow);
max-height: 175px;
overflow-y: auto;
z-index: 999;
color: var(--text-normal);
font-size: var(--font-ui-small);
Expand All @@ -221,6 +221,11 @@
border-radius: var(--input-radius);
}

.vault-explorer-search-select__dropdown-container {
max-height: 145px;
overflow-y: auto;
}

.vault-explorer-search-select__input-icon {
position: absolute;
top: 50%;
Expand Down
Loading