From e14f035a76b4582f7c9b28f5e8f76dc44c94a0c8 Mon Sep 17 00:00:00 2001
From: hrynevychroman <hrynevych.romann@gmail.com>
Date: Fri, 3 Jan 2025 13:28:41 +0200
Subject: [PATCH 1/5] docs(Editable): add `Change only on submit` example

---
 docs/content/components/editable.md | 34 +++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/docs/content/components/editable.md b/docs/content/components/editable.md
index b115ce59c..9286a7fc4 100644
--- a/docs/content/components/editable.md
+++ b/docs/content/components/editable.md
@@ -146,6 +146,40 @@ Contains the cancel trigger of the editable component.
 
 <!-- @include: @/meta/EditableCancelTrigger.md -->
 
+## Examples
+
+### Change only on submit
+
+Use the `default-value` prop to define starting value and `@submit` emit to handle the submit event.
+This is useful when you want to change the value only when the user submits the changes and have `auto-resize` working properly.
+
+```vue line=12-13
+<script setup lang="ts">
+const defaultValue = ref('Default value')
+
+function handleSubmit(label?: string) {
+  defaultValue.value = label
+}
+</script>
+
+<template>
+  <template>
+    <EditableRoot
+      :default-value="defaultValue"
+      @submit="handleSubmit"
+    >
+      <EditableArea>
+        <EditablePreview />
+        <EditableInput />
+      </EditableArea>
+      <EditableEditTrigger />
+      <EditableSubmitTrigger />
+      <EditableCancelTrigger />
+    </EditableRoot>
+  </template>
+</template>
+```
+
 ## Accessibility
 
 ### Keyboard Interactions

From 805ce2b355497d651e257c860b2a3490bb73c1e5 Mon Sep 17 00:00:00 2001
From: hrynevychroman <hrynevych.romann@gmail.com>
Date: Sat, 18 Jan 2025 12:56:54 +0200
Subject: [PATCH 2/5] feat(editable): update flow to update:model-value only on
 submit

---
 packages/radix-vue/src/Editable/EditableInput.vue |  4 ++--
 packages/radix-vue/src/Editable/EditableRoot.vue  | 15 +++++++++++----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/radix-vue/src/Editable/EditableInput.vue b/packages/radix-vue/src/Editable/EditableInput.vue
index c1e276a21..a4a898d49 100644
--- a/packages/radix-vue/src/Editable/EditableInput.vue
+++ b/packages/radix-vue/src/Editable/EditableInput.vue
@@ -53,7 +53,7 @@ function handleSubmitKeyDown(event: KeyboardEvent) {
   <Primitive
     ref="primitiveElement"
     v-bind="props"
-    :value="context.modelValue.value"
+    :value="context.inputValue.value"
     :placeholder="placeholder"
     :disabled="disabled"
     :maxlength="context.maxLength.value"
@@ -63,7 +63,7 @@ function handleSubmitKeyDown(event: KeyboardEvent) {
     aria-label="editable input"
     :hidden="context.autoResize.value ? undefined : !context.isEditing.value"
     :style="context.autoResize.value ? { all: 'unset', gridArea: '1 / 1 / auto / auto', visibility: !context.isEditing.value ? 'hidden' : undefined } : undefined"
-    @input="context.modelValue.value = $event.target.value"
+    @input="context.inputValue.value = $event.target.value"
     @keydown.enter.space="handleSubmitKeyDown"
     @keydown.esc="context.cancel"
   >
diff --git a/packages/radix-vue/src/Editable/EditableRoot.vue b/packages/radix-vue/src/Editable/EditableRoot.vue
index 1b445be9f..a005356e4 100644
--- a/packages/radix-vue/src/Editable/EditableRoot.vue
+++ b/packages/radix-vue/src/Editable/EditableRoot.vue
@@ -13,6 +13,7 @@ type EditableRootContext = {
   maxLength: Ref<number | undefined>
   disabled: Ref<boolean>
   modelValue: Ref<string | undefined>
+  inputValue: Ref<string | undefined>
   placeholder: Ref<{ edit: string, preview: string }>
   isEditing: Ref<boolean>
   submitMode: Ref<SubmitMode>
@@ -75,7 +76,7 @@ export const [injectEditableRootContext, provideEditableRootContext]
 </script>
 
 <script setup lang="ts">
-import { type Ref, computed, ref, toRefs } from 'vue'
+import { type Ref, computed, ref, toRefs, watch } from 'vue'
 import { Primitive, usePrimitiveElement } from '@/Primitive'
 import { useVModel } from '@vueuse/core'
 
@@ -146,21 +147,26 @@ const placeholder = computed(() => {
   return typeof propPlaceholder.value === 'string' ? { edit: propPlaceholder.value, preview: propPlaceholder.value } : propPlaceholder.value
 })
 
-const previousValue = ref(modelValue.value)
+const inputValue = ref(modelValue.value)
+
+watch(() => modelValue.value, () => {
+  inputValue.value = modelValue.value
+}, { immediate: true, deep: true })
 
 function cancel() {
-  modelValue.value = previousValue.value
   isEditing.value = false
   emits('update:state', 'cancel')
 }
 
 function edit() {
   isEditing.value = true
+  inputValue.value = modelValue.value
+
   emits('update:state', 'edit')
 }
 
 function submit() {
-  previousValue.value = modelValue.value
+  modelValue.value = inputValue.value
   isEditing.value = false
 
   emits('update:state', 'submit')
@@ -196,6 +202,7 @@ provideEditableRootContext({
   isEditing,
   maxLength,
   modelValue,
+  inputValue,
   placeholder,
   edit,
   cancel,

From 0faa548e70d4acd17f20864159046859ef7c350a Mon Sep 17 00:00:00 2001
From: hrynevychroman <hrynevych.romann@gmail.com>
Date: Sat, 18 Jan 2025 13:05:24 +0200
Subject: [PATCH 3/5] test(Editable): update `enter` submit props because we
 have `blur` by default

---
 packages/radix-vue/src/Editable/Editable.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/radix-vue/src/Editable/Editable.test.ts b/packages/radix-vue/src/Editable/Editable.test.ts
index 35d4035ae..7ebf425c6 100644
--- a/packages/radix-vue/src/Editable/Editable.test.ts
+++ b/packages/radix-vue/src/Editable/Editable.test.ts
@@ -83,7 +83,7 @@ describe('editable', () => {
   })
 
   it('submits the value when pressing enter', async () => {
-    const { input, preview, rerender } = setup({ editableProps: { modelValue: '' }, emits: { 'onUpdate:modelValue': (data: string) => rerender({ modelValue: data }) } })
+    const { input, preview, rerender } = setup({ editableProps: { modelValue: '', submitMode: 'enter' }, emits: { 'onUpdate:modelValue': (data: string) => rerender({ modelValue: data }) } })
 
     await userEvent.type(input, 'New Value')
     await userEvent.keyboard(kbd.ENTER)

From aed6c1d78dbbf2578454a3d0e7a20159a5b65f45 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Tue, 21 Jan 2025 15:41:24 +0800
Subject: [PATCH 4/5] test: fix test

---
 packages/radix-vue/src/Editable/Editable.test.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/radix-vue/src/Editable/Editable.test.ts b/packages/radix-vue/src/Editable/Editable.test.ts
index 7ebf425c6..d6ee4fc77 100644
--- a/packages/radix-vue/src/Editable/Editable.test.ts
+++ b/packages/radix-vue/src/Editable/Editable.test.ts
@@ -94,8 +94,10 @@ describe('editable', () => {
   it('submits the value on blur', async () => {
     const { input, preview, rerender } = setup({ editableProps: { modelValue: '', submitMode: 'blur' }, emits: { 'onUpdate:modelValue': (data: string) => rerender({ modelValue: data, submitMode: 'blur' }) } })
 
+    await userEvent.dblClick(preview)
     await userEvent.type(input, 'New Value')
-    await userEvent.tab()
+    await userEvent.click(document.children[0])
+
     expect(preview).toBeVisible()
     expect(preview).toHaveTextContent('New Value')
   })
@@ -112,8 +114,10 @@ describe('editable', () => {
   it('submits the value on blur if submitMode is both', async () => {
     const { input, preview, rerender } = setup({ editableProps: { modelValue: '', submitMode: 'both' }, emits: { 'onUpdate:modelValue': (data: string) => rerender({ modelValue: data, submitMode: 'blur' }) } })
 
+    await userEvent.dblClick(preview)
     await userEvent.type(input, 'New Value')
-    await userEvent.tab()
+    await userEvent.click(document.children[0])
+
     expect(preview).toBeVisible()
     expect(preview).toHaveTextContent('New Value')
   })

From 1d90579c6d9b1b053e6b10c402404df06ace5e77 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Tue, 28 Jan 2025 13:10:35 +0800
Subject: [PATCH 5/5] docs: update example

---
 docs/content/components/editable.md | 37 ++++++++++-------------------
 1 file changed, 12 insertions(+), 25 deletions(-)

diff --git a/docs/content/components/editable.md b/docs/content/components/editable.md
index 9286a7fc4..9ef8d09ad 100644
--- a/docs/content/components/editable.md
+++ b/docs/content/components/editable.md
@@ -150,33 +150,20 @@ Contains the cancel trigger of the editable component.
 
 ### Change only on submit
 
-Use the `default-value` prop to define starting value and `@submit` emit to handle the submit event.
-This is useful when you want to change the value only when the user submits the changes and have `auto-resize` working properly.
-
-```vue line=12-13
-<script setup lang="ts">
-const defaultValue = ref('Default value')
-
-function handleSubmit(label?: string) {
-  defaultValue.value = label
-}
-</script>
+By default the component will submit when `blur` event triggers. We can modify the `submit-mode` prop to alter this behavior.
+In this case, we want to submit only when user click on `EditableSubmitTrigger`, so we change the submit mode to `none`.
 
+```vue line=2,8
 <template>
-  <template>
-    <EditableRoot
-      :default-value="defaultValue"
-      @submit="handleSubmit"
-    >
-      <EditableArea>
-        <EditablePreview />
-        <EditableInput />
-      </EditableArea>
-      <EditableEditTrigger />
-      <EditableSubmitTrigger />
-      <EditableCancelTrigger />
-    </EditableRoot>
-  </template>
+  <EditableRoot submit-mode="none">
+    <EditableArea>
+      <EditablePreview />
+      <EditableInput />
+    </EditableArea>
+    <EditableEditTrigger />
+    <EditableSubmitTrigger />
+    <EditableCancelTrigger />
+  </EditableRoot>
 </template>
 ```