feat(group title): adds additional mouse listener, focus and selection (

#843)
vcync · Apr 8, 2023 · 4b54059 · 4b54059
1 parent 888ed83
commit 4b54059
Showing 1 changed file with 20 additions and 1 deletion.
diff --git a/src/components/Group.vue b/src/components/Group.vue
@@ -190,6 +190,7 @@
  }}</span>
  <TextInput
  v-model="localName"
+ ref="titleInput"
  v-else
  @keypress.enter="endTitleEditable"
  />
@@ -285,6 +286,10 @@ export default {
  }
  },
 
+ beforeDestroy() {
+ window.removeEventListener("mousedown", this.endTitleEditable);
+ },
+
  computed: {
  groups() {
  return this.$modV.store.state.groups.groups.filter(
@@ -482,9 +487,23 @@ export default {
 
  toggleTitleEditable() {
  this.titleEditable = !this.titleEditable;
+
+ if (this.titleEditable) {
+ window.addEventListener("mousedown", this.endTitleEditable);
+ this.$nextTick(() => {
+ this.$refs.titleInput.$el.focus();
+ this.$refs.titleInput.$el.select();
+ });
+ }
  },
 
- endTitleEditable() {
+ endTitleEditable(e) {
+ if (e.target === this.$refs.titleInput.$el) {
+ return;
+ }
+
+ window.removeEventListener("mousedown", this.endTitleEditable);
+
  const { localName } = this;
  const trimmedName = localName.trim();