studio-variable/designtopack
4
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

#88 - add auto focus on edit field

Browse source
This commit is contained in:
isUnknown 2025-01-07 16:12:33 +01:00
parent bc1722495f
commit bff0f8eda3
1 changed files with 16 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/components/comments/Comment.vue
View file

@ -25,7 +25,13 @@
{{ comment.text }} {{ comment.text }}
</p> </p>
<textarea v-else class="comment__body" v-model="draftText" :rows="Math.ceil(draftText.length / 32)"></textarea> <textarea
v-else
class="comment__body"
v-model="draftText"
:rows="Math.ceil(draftText.length / 32)"
ref="editField"
></textarea>
<footer v-if="!comment.isEditMode" class="comment__replies"> <footer v-if="!comment.isEditMode" class="comment__replies">
<p v-if="comment.replies?.length > 0"> <p v-if="comment.replies?.length > 0">
@ -40,7 +46,7 @@
<button <button
class="btn btn--transparent btn--icon btn--sm" class="btn btn--transparent btn--icon btn--sm"
data-icon="edit" data-icon="edit"
@click="comment.isEditMode = true" @click="editComment($event)"
> >
<span class="sr-only">Éditer</span> <span class="sr-only">Éditer</span>
</button> </button>
@ -91,6 +97,7 @@ const api = useApiStore();
const dialog = useDialogStore(); const dialog = useDialogStore();
const { activeTracks } = storeToRefs(useDialogStore()); const { activeTracks } = storeToRefs(useDialogStore());
const draftText = ref(comment.text); const draftText = ref(comment.text);
const editField = ref(null);
// Functions // Functions
const getStatus = computed(() => { const getStatus = computed(() => {
@ -167,6 +174,13 @@ function cancelEditComment(event) {
comment.isEditMode = false; comment.isEditMode = false;
draftText.value = comment.text; draftText.value = comment.text;
} }
function editComment(event) {
comment.isEditMode = true;
setTimeout(() => {
editField.value.focus();
}, 100);
}
</script> </script>
<style scoped> <style scoped>