Skip to content

Commit

Permalink
fix(taginput): fix autocomplete
Browse files Browse the repository at this point in the history
  • Loading branch information
@mlmoravek
mlmoravek committed Jun 12, 2024
1 parent 7122d41 commit c5e66c5
Show file tree
Hide file tree
Showing 6 changed files with 22 additions and 27 deletions.
3 changes: 1 addition & 2 deletions packages/docs/components/Taginput.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,8 @@ title: Taginput

| Prop name | Description | Type | Values | Default |
| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- | ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| allowAutocomplete | Add autocomplete feature (if true, any Autocomplete props may be used too) | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| allowDuplicates | Allows adding the same item multiple time | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| allowNew | When autocomplete, it allow to add new items | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| allowNew | Allows to add new items | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| ariaCloseLabel | Accessibility label for the close button | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>taginput: {<br>&nbsp;&nbsp;ariaCloseLabel: undefined<br>}</code> |
| autocomplete | Native options to use in HTML5 validation | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>taginput: {<br>&nbsp;&nbsp;autocomplete: "off"<br>}</code> |
| beforeAdding | Function to validate the value of the item before adding | (value: Option \| string) =&gt; boolean | - | Default function (see source code) |
Expand Down
2 changes: 2 additions & 0 deletions packages/oruga/src/components/autocomplete/Autocomplete.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -860,6 +860,7 @@ defineExpose({ focus: setFocus });
v-if="$slots.header"
:id="`${menuId}-header`"
ref="headerRef"
:value="SpecialOption.Header"
:tag="itemTag"
aria-role="option"
:aria-selected="headerHovered"
Expand Down Expand Up @@ -942,6 +943,7 @@ defineExpose({ focus: setFocus });
v-if="$slots.footer"
:id="`${menuId}-footer`"
ref="footerRef"
:value="SpecialOption.Footer"
:tag="itemTag"
aria-role="option"
:aria-selected="footerHovered"
Expand Down
2 changes: 1 addition & 1 deletion packages/oruga/src/components/autocomplete/examples/objects-array.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ const selected = ref(null);
<section>
<o-field grouped>
<o-switch v-model="openOnFocus">Open dropdown on focus</o-switch>
<o-switch v-model="keepFirst">Keep-first</o-switch>
<o-switch v-model="keepFirst">Keep first</o-switch>
</o-field>

<o-field label="Find a name">
Expand Down
33 changes: 12 additions & 21 deletions packages/oruga/src/components/taginput/Taginput.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
<script setup lang="ts" generic="Option extends String | Object">
import {
computed,
nextTick,
ref,
useAttrs,
watchEffect,
Expand Down Expand Up @@ -113,12 +112,10 @@ const props = defineProps({
},
/** The first option will always be pre-selected (easier to just hit enter or tab) */
keepFirst: { type: Boolean, default: false },
/** When autocomplete, it allow to add new items */
/** Allows to add new items */
allowNew: { type: Boolean, default: false },
/** Allows adding the same item multiple time */
allowDuplicates: { type: Boolean, default: false },
/** Add autocomplete feature (if true, any Autocomplete props may be used too) */
allowAutocomplete: { type: Boolean, default: false },
/** Allow removing last item when pressing given keys, if input is empty */
removeOnKeys: {
type: Array as PropType<string[]>,
Expand Down Expand Up @@ -386,39 +383,31 @@ function removeItem(index: number, event?: Event): void {
function onSelect(option: Option): void {
if (!option) return;
addItem(option);
nextTick(() => (newItem.value = ""));
}
function onInput(value: string): void {
emits("input", value.trim());
}
function onKeydown(event: KeyboardEvent): void {
if (
props.removeOnKeys.indexOf(event.key) !== -1 &&
props.removeOnKeys.indexOf(event.key) >= 0 &&
!newItem.value?.length &&
itemsLength.value > 0
) {
// remove last item
removeItem(itemsLength.value - 1);
}
// Stop if is to accept select only
if (props.allowAutocomplete && !props.allowNew) return;
if (props.confirmKeys.indexOf(event.key) >= 0) {
// Allow Tab to advance to next field regardless
if (event.key !== "Tab") event.preventDefault();
if (event.key === "Enter" && isComposing.value) return;
addItem();
// Add item if not select only
if (props.allowNew) addItem();
}
}
function onInput(value: string): void {
emits("input", value.trim());
}
function handleOnBlur(event: Event): void {
// Add item on-blur if not select only
if (!props.allowAutocomplete) addItem();
onBlur(event);
}
// --- Computed Component Classes ---
const attrs = useAttrs();
Expand Down Expand Up @@ -493,7 +482,9 @@ defineExpose({ focus: setFocus });
<span
v-for="(item, index) in items"
:key="getNormalizedItemText(item) + index"
:class="itemClasses">
:class="itemClasses"
:tabindex="0"
@keydown.enter="removeItem(index, $event)">
<span>{{ getNormalizedItemText(item) }}</span>
<o-icon
v-if="closable"
Expand Down Expand Up @@ -537,7 +528,7 @@ defineExpose({ focus: setFocus });
expanded
@input="onInput"
@focus="onFocus"
@blur="handleOnBlur"
@blur="onBlur"
@invalid="onInvalid"
@keydown="onKeydown"
@compositionstart="isComposing = true"
Expand Down
8 changes: 5 additions & 3 deletions packages/oruga/src/components/taginput/examples/autocomplete.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,22 +134,24 @@ const tags = ref([]);
const allowNew = ref(false);
const openOnFocus = ref(false);
const keepFirst = ref(false);
</script>

<template>
<section>
<o-field grouped>
<o-switch v-model="allowNew"> Allow new items </o-switch>
<o-switch v-model="openOnFocus"> Open on focus </o-switch>
<o-switch v-model="allowNew">Allow new items</o-switch>
<o-switch v-model="keepFirst">Keep first</o-switch>
<o-switch v-model="openOnFocus">Open on focus</o-switch>
</o-field>

<o-field label="Enter some items">
<o-taginput
v-model="tags"
:options="options"
allow-autocomplete
:allow-new="allowNew"
:open-on-focus="openOnFocus"
:keep-first="keepFirst"
field="user.first_name"
icon="tag"
placeholder="Add an item" />
Expand Down
1 change: 1 addition & 0 deletions packages/oruga/src/components/taginput/examples/base.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ const tags = ref(["Pistoia", "Valdinievole"]);
<o-field label="Add some items">
<o-taginput
v-model="tags"
allow-new
icon="tag"
placeholder="Add an item"
aria-close-label="Delete this item" />
Expand Down

0 comments on commit c5e66c5

Please sign in to comment.