fix(vue): prop "scope" of SchemaField not work with x-reactions (#1976)

Author: MisicDemone

packages/vue/src/__tests__/schema.json.spec.ts

@@ -1,6 +1,6 @@
-import { createForm } from '@formily/core'
+import { createForm, isField } from '@formily/core'
 import { Schema } from '@formily/json-schema'
-import { render } from '@testing-library/vue'
+import { render, waitFor } from '@testing-library/vue'
 import Vue, { FunctionalComponentOptions } from 'vue'
 import { FormProvider, createSchemaField } from '../vue2-components'
 
@@ -21,6 +21,21 @@ const Input: FunctionalComponentOptions = {
   },
 }
 
+const Input2: FunctionalComponentOptions = {
+  functional: true,
+  render(h, context) {
+    return h('input', {
+      attrs: {
+        value: context.props.value,
+        'data-testid': 'input2',
+      },
+      on: {
+        input: context.listeners.change,
+      },
+    })
+  },
+}
+
 const Previewer: FunctionalComponentOptions = {
   functional: true,
   render(h, context) {
@@ -296,3 +311,103 @@ describe('x-content', () => {
     expect(queryByTestId('previewer2').textContent).toEqual('123')
   })
 })
+
+describe('scope', () => {
+  test('scope in <SchemaField> prop', async () => {
+    const form = createForm()
+    const { SchemaField } = createSchemaField({
+      components: {
+        Input,
+        Input2,
+        Previewer,
+      },
+    })
+    const { queryByTestId } = render({
+      components: { SchemaField },
+      data() {
+        return {
+          form,
+          schema: {
+            type: 'object',
+            properties: {
+              input1: {
+                type: 'string',
+                'x-component': 'Input',
+                'x-reactions': {
+                  target: 'input2',
+                  fulfill: {
+                    state: {
+                      value: '{{ test }}',
+                    },
+                  },
+                },
+              },
+              input2: {
+                type: 'string',
+                'x-component': 'Input2',
+              },
+            },
+          },
+        }
+      },
+      template: `<FormProvider :form="form">
+        <SchemaField
+          :schema="schema"
+          :scope="{
+            test: '123'
+          }"
+        />
+      </FormProvider>`,
+    })
+    expect(queryByTestId('input2').getAttribute('value')).toEqual('123')
+  })
+
+  test('scope in options of createSchemaField', async () => {
+    const form = createForm()
+    const { SchemaField } = createSchemaField({
+      components: {
+        Input,
+        Input2,
+        Previewer,
+      },
+      scope: {
+        test: '123',
+      },
+    })
+    const { queryByTestId } = render({
+      components: { SchemaField },
+      data() {
+        return {
+          form,
+          schema: {
+            type: 'object',
+            properties: {
+              input1: {
+                type: 'string',
+                'x-component': 'Input',
+                'x-reactions': {
+                  target: 'input2',
+                  fulfill: {
+                    state: {
+                      value: '{{ test }}',
+                    },
+                  },
+                },
+              },
+              input2: {
+                type: 'string',
+                'x-component': 'Input2',
+              },
+            },
+          },
+        }
+      },
+      template: `<FormProvider :form="form">
+        <SchemaField
+          :schema="schema"
+        />
+      </FormProvider>`,
+    })
+    expect(queryByTestId('input2').getAttribute('value')).toEqual('123')
+  })
+})

packages/vue/src/components/RecursionField.ts

@@ -57,10 +57,7 @@ const RecursionField = observer(
       const createSchema = (schemaProp: IRecursionFieldProps['schema']) =>
         new Schema(schemaProp)
       const createFieldSchema = (schema: Schema) =>
-        schema.compile?.({
-          ...optionsRef.value.scope,
-          ...scopeRef.value,
-        })
+        schema.compile?.(scopeRef.value)
       const schemaRef = shallowRef(createSchema(props.schema))
       const fieldSchemaRef = shallowRef(createFieldSchema(schemaRef.value))
       watch([() => props.schema, scopeRef, optionsRef], () => {
@@ -69,7 +66,7 @@ const RecursionField = observer(
       })
 
       const getPropsFromSchema = (schema: Schema) =>
-        schema?.toFieldProps?.(optionsRef.value)
+        schema?.toFieldProps?.({ ...optionsRef.value, scope: scopeRef.value })
       const fieldPropsRef = shallowRef(getPropsFromSchema(fieldSchemaRef.value))
       watch([fieldSchemaRef, optionsRef], () => {
         fieldPropsRef.value = getPropsFromSchema(fieldSchemaRef.value)