Fix autocomplete showing on arrow keys and height resize on no tags

This commit is contained in:
Henrik Giesel 2021-06-29 04:09:21 +02:00
parent a29d21f4fd
commit 85567fddd9

View file

@ -231,15 +231,24 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
activeAfterBlur = null; activeAfterBlur = null;
} }
function printableKey(event: KeyboardEvent): boolean {
return (
(event.location === KeyboardEvent.DOM_KEY_LOCATION_STANDARD ||
event.location === KeyboardEvent.DOM_KEY_LOCATION_NUMPAD) &&
!event.code.startsWith("Arrow")
);
}
function update(event: KeyboardEvent, autocomplete: any): void { function update(event: KeyboardEvent, autocomplete: any): void {
const visible = autocomplete.isVisible(); const visible = autocomplete.isVisible();
const printable = printableKey(event);
if ( if (!visible) {
!visible && if (printable) {
(event.location === KeyboardEvent.DOM_KEY_LOCATION_STANDARD || autocomplete.show();
event.location === KeyboardEvent.DOM_KEY_LOCATION_NUMPAD) } else {
) { return;
autocomplete.show(); }
} }
switch (event.code) { switch (event.code) {
@ -269,7 +278,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
break; break;
default: default:
if (event.code.startsWith("Arrow")) { if (!printable) {
return; return;
} }
@ -280,11 +289,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</script> </script>
<StickyBottom> <StickyBottom>
<div class="row-gap"> <ButtonToolbar class="dropup d-flex flex-wrap align-items-center" {size}>
<ButtonToolbar class="dropup d-flex flex-wrap align-items-center" {size}> <div class="pb-1">
<AddTagBadge on:click={appendEmptyTag} /> <AddTagBadge on:click={appendEmptyTag} />
</div>
{#each tags as tag, index (tag.id)} {#each tags as tag, index (tag.id)}
<div class="pb-1">
{#if index === active} {#if index === active}
<WithAutocomplete <WithAutocomplete
class="d-flex flex-column-reverse" class="d-flex flex-column-reverse"
@ -340,23 +351,19 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
}} }}
/> />
{/if} {/if}
{/each} </div>
{/each}
<div <div
class="tag-spacer flex-grow-1 align-self-stretch" class="tag-spacer flex-grow-1 align-self-stretch"
on:click={appendEmptyTag} on:click={appendEmptyTag}
/> />
{active} {active}
{activeAfterBlur} {activeAfterBlur}
</ButtonToolbar> </ButtonToolbar>
</div>
</StickyBottom> </StickyBottom>
<style lang="scss"> <style lang="scss">
.row-gap > :global(.d-flex > *) {
margin-bottom: 2px;
}
.tag-spacer { .tag-spacer {
cursor: text; cursor: text;
} }