From dfb51122329bb59710fd847e2c5da06222a62451 Mon Sep 17 00:00:00 2001
From: Felix Borzik <borzik1992@gmail.com>
Date: Thu, 26 Sep 2019 16:35:31 +0300
Subject: [PATCH] feat: propagate observer setErrors to its child observers

---
 docs/guide/validation-observer.md |  2 +-
 src/components/Observer.ts        |  4 +++
 tests/providers/observer.js       | 48 +++++++++++++++++++++++++++++++
 3 files changed, 53 insertions(+), 1 deletion(-)

diff --git a/docs/guide/validation-observer.md b/docs/guide/validation-observer.md
index 50b2aa08d..3d7ce8cd0 100644
--- a/docs/guide/validation-observer.md
+++ b/docs/guide/validation-observer.md
@@ -152,7 +152,7 @@ export default {
 
 While you can add errors manually to `ValidationProvider` with the `setErrors` method, it can be annoying to do so for multiple fields at once.
 
-The `ValidationObserver` exposes a `setErrors` method that can set errors for its children providers.
+The `ValidationObserver` exposes a `setErrors` method that can set errors for its children providers and observers.
 
 ```vue
 <template>
diff --git a/src/components/Observer.ts b/src/components/Observer.ts
index 81a9be947..f776fa460 100644
--- a/src/components/Observer.ts
+++ b/src/components/Observer.ts
@@ -248,6 +248,10 @@ export const ValidationObserver = (Vue as withObserverNode).extend({
 
         provider.setErrors(errors[key] || []);
       });
+
+      this.observers.forEach((observer: any) => {
+        observer.setErrors(errors);
+      });
     }
   }
 });
diff --git a/tests/providers/observer.js b/tests/providers/observer.js
index cf2010466..8de8b3b75 100644
--- a/tests/providers/observer.js
+++ b/tests/providers/observer.js
@@ -490,3 +490,51 @@ test('Sets errors for all providers', async () => {
   expect(wrapper.find('#error1').text()).toBe('wrong');
   expect(wrapper.find('#error2').text()).toBe('whoops');
 });
+
+test('Sets errors for nested observer providers', async () => {
+  const wrapper = mount(
+    {
+      data: () => ({
+        field1: '',
+        field2: ''
+      }),
+      template: `
+    <div>
+      <ValidationObserver ref="observer">
+        <ValidationObserver>
+          <ValidationProvider
+            vid="field1"
+            v-slot="{ errors }"
+          >
+            <input type="text" v-model="field1">
+            <span id="error1">{{ errors[0] }}</span>
+          </ValidationProvider>
+
+          <ValidationProvider
+            name="field2"
+            v-slot="{ errors }"
+          >
+            <input type="text" v-model="field2">
+            <span id="error2">{{ errors[0] }}</span>
+          </ValidationProvider>
+        </ValidationObserver>
+      </ValidationObserver>
+    </div>
+    `
+    },
+    { localVue: Vue }
+  );
+
+  await flushPromises();
+  expect(wrapper.find('#error1').text()).toBe('');
+  expect(wrapper.find('#error2').text()).toBe('');
+
+  wrapper.vm.$refs.observer.setErrors({
+    field1: ['wrong'],
+    field2: ['whoops']
+  });
+
+  await flushPromises();
+  expect(wrapper.find('#error1').text()).toBe('wrong');
+  expect(wrapper.find('#error2').text()).toBe('whoops');
+});