From fda1838c21d715b526478d9d172b7c83ff4981e5 Mon Sep 17 00:00:00 2001
From: LukasBoll <ga24xeg@mytum.de>
Date: Mon, 25 Oct 2021 16:59:04 +0200
Subject: [PATCH 1/9] path to array

---
 .../src/layouts/array-layout.renderer.ts      |  4 +-
 .../src/other/master-detail/master.ts         |  8 ++--
 .../src/other/table.renderer.ts               |  2 +-
 packages/angular/src/abstract-control.ts      |  2 +-
 packages/angular/src/base.renderer.ts         |  2 +-
 packages/core/src/actions/actions.ts          |  4 +-
 packages/core/src/reducers/core.ts            | 20 ++++-----
 packages/core/src/reducers/reducers.ts        |  6 +--
 packages/core/src/reducers/uischemas.ts       |  4 +-
 packages/core/src/testers/testers.ts          |  6 +--
 packages/core/src/util/combinators.ts         |  2 +-
 packages/core/src/util/path.ts                | 33 +++++++++-----
 packages/core/src/util/renderer.ts            | 40 ++++++++---------
 packages/core/src/util/resolvers.ts           |  4 +-
 packages/core/src/util/runtime.ts             | 14 +++---
 packages/core/src/util/util.ts                |  2 +-
 packages/example/src/util.tsx                 |  4 +-
 packages/examples/src/person.ts               |  4 +-
 .../MaterialListWithDetailRenderer.tsx        |  5 ++-
 .../src/complex/CombinatorProperties.tsx      |  2 +-
 .../material/src/complex/DeleteDialog.tsx     |  2 +-
 .../complex/MaterialArrayControlRenderer.tsx  |  9 ++--
 .../src/complex/MaterialEnumArrayRenderer.tsx |  6 ++-
 .../src/complex/MaterialTableControl.tsx      | 44 +++++++++++--------
 .../material/src/complex/TableToolbar.tsx     |  4 +-
 .../material/src/layouts/ArrayToolbar.tsx     |  5 ++-
 .../src/layouts/ExpandPanelRenderer.tsx       | 29 ++++++------
 .../src/layouts/MaterialArrayLayout.tsx       | 10 ++---
 .../layouts/MaterialArrayLayoutRenderer.tsx   |  4 +-
 packages/material/src/util/datejs.ts          |  4 +-
 packages/material/src/util/debounce.ts        |  2 +-
 packages/material/src/util/layout.tsx         |  2 +-
 packages/react/src/JsonForms.tsx              |  4 +-
 .../vanilla/src/complex/TableArrayControl.tsx | 25 ++++++-----
 .../src/complex/array/ArrayControl.tsx        |  6 +--
 .../complex/categorization/SingleCategory.tsx |  2 +-
 packages/vanilla/src/layouts/util.tsx         |  4 +-
 packages/vue/vue/src/jsonFormsCompositions.ts |  4 +-
 38 files changed, 182 insertions(+), 152 deletions(-)

diff --git a/packages/angular-material/src/layouts/array-layout.renderer.ts b/packages/angular-material/src/layouts/array-layout.renderer.ts
index 3b7cd8250..7c9f7d9ab 100644
--- a/packages/angular-material/src/layouts/array-layout.renderer.ts
+++ b/packages/angular-material/src/layouts/array-layout.renderer.ts
@@ -129,8 +129,8 @@ export class ArrayLayoutRenderer
   removeTooltip: string;
   removeAriaLabel: string;
   noData: boolean;
-  addItem: (path: string, value: any) => () => void;
-  removeItems: (path: string, toDelete: number[]) => () => void;
+  addItem: (path: string[], value: any) => () => void;
+  removeItems: (path: string[], toDelete: number[]) => () => void;
   uischemas: {
     tester: UISchemaTester;
     uischema: UISchemaElement;
diff --git a/packages/angular-material/src/other/master-detail/master.ts b/packages/angular-material/src/other/master-detail/master.ts
index 8d4663dd0..3d451aade 100644
--- a/packages/angular-material/src/other/master-detail/master.ts
+++ b/packages/angular-material/src/other/master-detail/master.ts
@@ -46,7 +46,7 @@ import {
 
 const keywords = ['#', 'properties', 'items'];
 
-export const removeSchemaKeywords = (path: string) => {
+export const removeSchemaKeywords = (path: string[]) => {
   return path
     .split('/')
     .filter(s => !some(keywords, key => key === s))
@@ -141,9 +141,9 @@ export class MasterListComponent extends JsonFormsArrayControl {
   masterItems: any[];
   selectedItem: any;
   selectedItemIdx: number;
-  addItem: (path: string, value: any) => () => void;
-  removeItems: (path: string, toDelete: number[]) => () => void;
-  propsPath: string;
+  addItem: (path: string[], value: any) => () => void;
+  removeItems: (path: string[], toDelete: number[]) => () => void;
+  propsPath: string[];
   highlightedIdx: number;
 
   constructor(jsonformsService: JsonFormsAngularService, private changeDetectorRef: ChangeDetectorRef) {
diff --git a/packages/angular-material/src/other/table.renderer.ts b/packages/angular-material/src/other/table.renderer.ts
index 9a02df430..3dbbf28e0 100644
--- a/packages/angular-material/src/other/table.renderer.ts
+++ b/packages/angular-material/src/other/table.renderer.ts
@@ -97,7 +97,7 @@ export class TableRenderer extends JsonFormsArrayControl {
   }
   generateCells = (
     schema: JsonSchema,
-    rowPath: string
+    rowPath: string[]
   ): ColumnDescription[] => {
     if (schema.type === 'object') {
       return this.getValidColumnProps(schema).map(prop => {
diff --git a/packages/angular/src/abstract-control.ts b/packages/angular/src/abstract-control.ts
index 251a6a5ae..122c90c71 100644
--- a/packages/angular/src/abstract-control.ts
+++ b/packages/angular/src/abstract-control.ts
@@ -63,7 +63,7 @@ export abstract class JsonFormsAbstractControl<
   rootSchema: JsonSchema;
   enabled: boolean;
   hidden: boolean;
-  propsPath: string;
+  propsPath: string[];
 
   constructor(protected jsonFormsService: JsonFormsAngularService) {
     super();
diff --git a/packages/angular/src/base.renderer.ts b/packages/angular/src/base.renderer.ts
index 2c080dc67..359573d1c 100644
--- a/packages/angular/src/base.renderer.ts
+++ b/packages/angular/src/base.renderer.ts
@@ -33,7 +33,7 @@ import {
 export class JsonFormsBaseRenderer<T extends UISchemaElement> {
   @Input() uischema: T;
   @Input() schema: JsonSchema;
-  @Input() path: string;
+  @Input() path: string[];
 
   protected getOwnProps(): OwnPropsOfRenderer {
     return {
diff --git a/packages/core/src/actions/actions.ts b/packages/core/src/actions/actions.ts
index ddd7fe54a..0f86972b8 100644
--- a/packages/core/src/actions/actions.ts
+++ b/packages/core/src/actions/actions.ts
@@ -71,7 +71,7 @@ export type CoreActions =
 
 export interface UpdateAction {
   type: 'jsonforms/UPDATE';
-  path: string;
+  path: string[];
   updater(existingData?: any): any;
 }
 
@@ -166,7 +166,7 @@ export const setAjv = (ajv: AJV) => ({
 });
 
 export const update = (
-  path: string,
+  path: string[],
   updater: (existingData: any) => any
 ): UpdateAction => ({
   type: UPDATE_DATA,
diff --git a/packages/core/src/reducers/core.ts b/packages/core/src/reducers/core.ts
index b6c5ce546..f82156513 100644
--- a/packages/core/src/reducers/core.ts
+++ b/packages/core/src/reducers/core.ts
@@ -44,7 +44,7 @@ import {
   UPDATE_CORE,
   UpdateCoreAction
 } from '../actions';
-import { createAjv, Reducer } from '../util';
+import { contains, createAjv, Reducer } from '../util';
 import { JsonSchema, UISchemaElement } from '../models';
 
 export const validate = (validator: ValidateFunction | undefined, data: any): ErrorObject[] => {
@@ -230,7 +230,7 @@ export const coreReducer: Reducer<JsonFormsCore, CoreActions> = (
     case UPDATE_DATA: {
       if (action.path === undefined || action.path === null) {
         return state;
-      } else if (action.path === '') {
+      } else if (action.path === []) {
         // empty path is ok
         const result = action.updater(cloneDeep(state.data));
         const errors = validate(state.validator, result);
@@ -333,9 +333,9 @@ export const getControlPath = (error: ErrorObject) => {
 }
 
 export const errorsAt = (
-  instancePath: string,
+  instancePath: string[],
   schema: JsonSchema,
-  matchPath: (path: string) => boolean
+  matchPath: (path: string[]) => boolean
 ) => (errors: ErrorObject[]): ErrorObject[] => {
   // Get data paths of oneOf and anyOf errors to later determine whether an error occurred inside a subschema of oneOf or anyOf.
   const combinatorPaths = filter(
@@ -360,7 +360,7 @@ export const errorsAt = (
     // because the parent schema can never match the property schema (e.g. for 'required' checks).
     const parentSchema: JsonSchema | undefined = error.parentSchema;
     if (result && !isObjectSchema(parentSchema)
-      && combinatorPaths.findIndex(p => instancePath.startsWith(p)) !== -1) {
+      && combinatorPaths.findIndex(p => contains(instancePath,p)) !== -1) {
       result = result && isEqual(parentSchema, schema);
     }
     return result;
@@ -388,13 +388,13 @@ const isObjectSchema = (schema?: JsonSchema): boolean => {
 const filteredErrorKeywords = ['additionalProperties', 'allOf', 'anyOf', 'oneOf'];
 
 const getErrorsAt = (
-  instancePath: string,
+  instancePath: string[],
   schema: JsonSchema,
-  matchPath: (path: string) => boolean
+  matchPath: (path: string[]) => boolean
 ) => (state: JsonFormsCore): ErrorObject[] =>
   errorsAt(instancePath, schema, matchPath)(state.validationMode === 'ValidateAndHide' ? [] : state.errors);
 
-export const errorAt = (instancePath: string, schema: JsonSchema) =>
+export const errorAt = (instancePath: string[], schema: JsonSchema) =>
   getErrorsAt(instancePath, schema, path => path === instancePath);
-export const subErrorsAt = (instancePath: string, schema: JsonSchema) =>
-  getErrorsAt(instancePath, schema, path => path.startsWith(instancePath));
+export const subErrorsAt = (instancePath: string[], schema: JsonSchema) =>
+  getErrorsAt(instancePath, schema, path => contains(path,instancePath));
diff --git a/packages/core/src/reducers/reducers.ts b/packages/core/src/reducers/reducers.ts
index 38dd2f87a..e44276784 100644
--- a/packages/core/src/reducers/reducers.ts
+++ b/packages/core/src/reducers/reducers.ts
@@ -91,7 +91,7 @@ export const findUISchema = (
   uischemas: JsonFormsUISchemaRegistryEntry[],
   schema: JsonSchema,
   schemaPath: string,
-  path: string,
+  path: string[],
   fallbackLayoutType = 'VerticalLayout',
   control?: ControlElement,
   rootSchema?: JsonSchema
@@ -121,7 +121,7 @@ export const findUISchema = (
   return uiSchema;
 };
 
-export const getErrorAt = (instancePath: string, schema: JsonSchema) => (
+export const getErrorAt = (instancePath: string[], schema: JsonSchema) => (
   state: JsonFormsState
 ) => {
   return errorAt(instancePath, schema)(state.jsonforms.core);
@@ -129,7 +129,7 @@ export const getErrorAt = (instancePath: string, schema: JsonSchema) => (
 
 export { errorsAt, getControlPath };
 
-export const getSubErrorsAt = (instancePath: string, schema: JsonSchema) => (
+export const getSubErrorsAt = (instancePath: string[], schema: JsonSchema) => (
   state: JsonFormsState
 ) => subErrorsAt(instancePath, schema)(state.jsonforms.core);
 
diff --git a/packages/core/src/reducers/uischemas.ts b/packages/core/src/reducers/uischemas.ts
index 3ebe2e230..632cdd9fa 100644
--- a/packages/core/src/reducers/uischemas.ts
+++ b/packages/core/src/reducers/uischemas.ts
@@ -33,7 +33,7 @@ import { Reducer } from '../util';
 export type UISchemaTester = (
   schema: JsonSchema,
   schemaPath: string,
-  path: string
+  path: string[]
 ) => number;
 
 export interface JsonFormsUISchemaRegistryEntry {
@@ -64,7 +64,7 @@ export const findMatchingUISchema = (
 ) => (
   jsonSchema: JsonSchema,
   schemaPath: string,
-  path: string
+  path: string[]
 ): UISchemaElement => {
   const match = maxBy(state, entry =>
     entry.tester(jsonSchema, schemaPath, path)
diff --git a/packages/core/src/testers/testers.ts b/packages/core/src/testers/testers.ts
index 6790b6193..004454d98 100644
--- a/packages/core/src/testers/testers.ts
+++ b/packages/core/src/testers/testers.ts
@@ -96,7 +96,7 @@ export const schemaMatches = (
 };
 
 export const schemaSubPathMatches = (
-  subPath: string,
+  subPath: string[],
   predicate: (schema: JsonSchema) => boolean
 ): Tester => (uischema: UISchemaElement, schema: JsonSchema): boolean => {
   if (isEmpty(uischema) || !isControl(uischema)) {
@@ -382,7 +382,7 @@ export const isObjectArray = and(
   schemaMatches(
     schema => hasType(schema, 'array') && !Array.isArray(schema.items) // we don't care about tuples
   ),
-  schemaSubPathMatches('items', schema => hasType(schema, 'object'))
+  schemaSubPathMatches(['items'], schema => hasType(schema, 'object'))
 );
 
 /**
@@ -481,7 +481,7 @@ export const isPrimitiveArrayControl = and(
   schemaMatches(
     schema => deriveTypes(schema).length !== 0 && !Array.isArray(schema.items) // we don't care about tuples
   ),
-  schemaSubPathMatches('items', schema => {
+  schemaSubPathMatches(['items'], schema => {
     const types = deriveTypes(schema);
     return (
       types.length === 1 &&
diff --git a/packages/core/src/util/combinators.ts b/packages/core/src/util/combinators.ts
index c89496f5d..25ea71d7f 100644
--- a/packages/core/src/util/combinators.ts
+++ b/packages/core/src/util/combinators.ts
@@ -70,7 +70,7 @@ export const createCombinatorRenderInfos = (
   rootSchema: JsonSchema,
   keyword: CombinatorKeyword,
   control: ControlElement,
-  path: string,
+  path: string[],
   uischemas: JsonFormsUISchemaRegistryEntry[]
 ): CombinatorSubSchemaRenderInfo[] =>
   combinatorSubSchemas.map((subSchema, subSchemaIndex) => ({
diff --git a/packages/core/src/util/path.ts b/packages/core/src/util/path.ts
index 24b4ebd8a..52d3331b6 100644
--- a/packages/core/src/util/path.ts
+++ b/packages/core/src/util/path.ts
@@ -27,18 +27,15 @@ import isEmpty from 'lodash/isEmpty';
 import range from 'lodash/range';
 import { Scopable } from '../models';
 
-export const compose = (path1: string, path2: string) => {
+export const compose = (path1: string[], path2: string[]) => {
   let p1 = path1;
-  if (!isEmpty(path1) && !isEmpty(path2) && !path2.startsWith('[')) {
-    p1 = path1 + '.';
-  }
 
   if (isEmpty(p1)) {
     return path2;
   } else if (isEmpty(path2)) {
     return p1;
   } else {
-    return `${p1}${path2}`;
+    return p1.concat(path2);
   }
 };
 
@@ -75,16 +72,32 @@ export const toDataPathSegments = (schemaPath: string): string[] => {
  * @param {string} schemaPath the schema path to be converted
  * @returns {string} the path without schema-specific keywords
  */
-export const toDataPath = (schemaPath: string): string => {
-  return toDataPathSegments(schemaPath).join('.');
+export const toDataPath = (schemaPath: string): string[] => {
+  return toDataPathSegments(schemaPath);
 };
 
-export const composeWithUi = (scopableUi: Scopable, path: string): string => {
+export const composeWithUi = (scopableUi: Scopable, path: string[]): string[] => {
   const segments = toDataPathSegments(scopableUi.scope);
 
   if (isEmpty(segments) && path === undefined) {
-    return '';
+    return [];
   }
 
-  return isEmpty(segments) ? path : compose(path, segments.join('.'));
+  return isEmpty(segments) ? path : compose(path, segments);
 };
+
+export const toId = (path: string[]): string=>{
+  return path.join('');
+}
+
+export const contains = (path1: string[], path2: string[]):boolean =>{
+  if(path1.length<path2.length){
+    return false;
+  }
+  path2.forEach((value,i)=>{
+    if (path1[i]!==value){
+      return false;
+    }
+  })
+  return true;
+}
\ No newline at end of file
diff --git a/packages/core/src/util/renderer.ts b/packages/core/src/util/renderer.ts
index 0677029a2..fee0482eb 100644
--- a/packages/core/src/util/renderer.ts
+++ b/packages/core/src/util/renderer.ts
@@ -208,7 +208,7 @@ export interface OwnPropsOfRenderer {
    * path can not be inferred via the UI schema element as
    * it is the case with nested controls.
    */
-  path?: string;
+  path?: string[];
 
   renderers?: JsonFormsRendererRegistryEntry[];
 
@@ -267,7 +267,7 @@ export interface StatePropsOfRenderer {
   /**
    * Instance path the data is written to, in case of a control.
    */
-  path: string;
+  path: string[];
 
   /**
    * All available renderers.
@@ -348,7 +348,7 @@ export interface DispatchPropsOfControl {
    * @param {string} path the path to the data to be updated
    * @param {any} value the new value that should be written to the given path
    */
-  handleChange(path: string, value: any): void;
+  handleChange(path: string[], value: any): void;
 }
 
 /**
@@ -556,7 +556,7 @@ export const mapStateToMasterListItemProps = (
         );
       })
     : undefined;
-  const childPath = composePaths(path, `${index}`);
+  const childPath = composePaths(path, [`${index}`]);
   const childData = Resolve.data(getData(state), childPath);
   const childLabel = firstPrimitiveProp ? childData[firstPrimitiveProp] : '';
 
@@ -578,10 +578,10 @@ export interface StatePropsOfControlWithDetail extends StatePropsOfControl {
 export interface OwnPropsOfMasterListItem {
   index: number;
   selected: boolean;
-  path: string;
+  path: string[];
   schema: JsonSchema;
   handleSelect(index: number): () => void;
-  removeItem(path: string, value: number): () => void;
+  removeItem(path: string[], value: number): () => void;
 }
 
 export interface StatePropsOfMasterItem extends OwnPropsOfMasterListItem {
@@ -653,10 +653,10 @@ export const mapStateToArrayControlProps = (
  * Dispatch props of a table control
  */
 export interface DispatchPropsOfArrayControl {
-  addItem(path: string, value: any): () => void;
-  removeItems?(path: string, toDelete: number[]): () => void;
-  moveUp?(path: string, toMove: number): () => void;
-  moveDown?(path: string, toMove: number): () => void;
+  addItem(path: string[], value: any): () => void;
+  removeItems?(path: string[], toDelete: number[]): () => void;
+  moveUp?(path: string[], toMove: number): () => void;
+  moveDown?(path: string[], toMove: number): () => void;
 }
 
 /**
@@ -668,19 +668,19 @@ export interface DispatchPropsOfArrayControl {
 export const mapDispatchToArrayControlProps = (
   dispatch: Dispatch<CoreActions>
 ): DispatchPropsOfArrayControl => ({
-  addItem: (path: string, value: any) => () => {
+  addItem: (path: string[], value: any) => () => {
     dispatch(
       update(path, array => {
         if (array === undefined || array === null) {
           return [value];
         }
-
+        
         array.push(value);
         return array;
       })
     );
   },
-  removeItems: (path: string, toDelete: number[]) => () => {
+  removeItems: (path: string[], toDelete: number[]) => () => {
     dispatch(
       update(path, array => {
         toDelete
@@ -710,14 +710,14 @@ export const mapDispatchToArrayControlProps = (
 });
 
 export interface DispatchPropsOfMultiEnumControl {
-  addItem: (path: string, value: any) => void;
-  removeItem?: (path: string, toDelete: any) => void;
+  addItem: (path: string[], value: any) => void;
+  removeItem?: (path: string[], toDelete: any) => void;
 }
 
 export const mapDispatchToMultiEnumProps = (
   dispatch: Dispatch<CoreActions>
 ): DispatchPropsOfMultiEnumControl => ({
-  addItem: (path: string, value: any) => {
+  addItem: (path: string[], value: any) => {
     dispatch(
       update(path, data => {
         if (data === undefined || data === null) {
@@ -728,7 +728,7 @@ export const mapDispatchToMultiEnumProps = (
       })
     );
   },
-  removeItem: (path: string, toDelete: any) => {
+  removeItem: (path: string[], toDelete: any) => {
     dispatch(
       update(path, data => {
         const indexInData = data.indexOf(toDelete);
@@ -749,12 +749,12 @@ export interface ArrayControlProps
 export const layoutDefaultProps: {
   visible: boolean;
   enabled: boolean;
-  path: string;
+  path: string[];
   direction: 'row' | 'column';
 } = {
   visible: true,
   enabled: true,
-  path: '',
+  path: [],
   direction: 'column'
 };
 
@@ -856,7 +856,7 @@ export const controlDefaultProps = {
 
 export interface StatePropsOfCombinator extends OwnPropsOfControl {
   rootSchema: JsonSchema;
-  path: string;
+  path: string[];
   id: string;
   indexOfFittingSchema: number;
   uischemas: JsonFormsUISchemaRegistryEntry[];
diff --git a/packages/core/src/util/resolvers.ts b/packages/core/src/util/resolvers.ts
index 9be6c1f30..f38422e49 100644
--- a/packages/core/src/util/resolvers.ts
+++ b/packages/core/src/util/resolvers.ts
@@ -41,11 +41,11 @@ const isArraySchema = (schema: JsonSchema): boolean => {
   return schema.type === 'array' && schema.items !== undefined;
 };
 
-export const resolveData = (instance: any, dataPath: string): any => {
+export const resolveData = (instance: any, dataPath: string[]): any => {
   if (isEmpty(dataPath)) {
     return instance;
   }
-  const dataPathSegments = dataPath.split('.');
+  const dataPathSegments = dataPath;
 
   return dataPathSegments
     .map(segment => decodeURIComponent(segment))
diff --git a/packages/core/src/util/runtime.ts b/packages/core/src/util/runtime.ts
index d636f4c70..c6fdbd9a3 100644
--- a/packages/core/src/util/runtime.ts
+++ b/packages/core/src/util/runtime.ts
@@ -54,14 +54,14 @@ const isSchemaCondition = (
   condition: Condition
 ): condition is SchemaBasedCondition => has(condition, 'schema');
 
-const getConditionScope = (condition: Scopable, path: string): string => {
+const getConditionScope = (condition: Scopable, path: string[]): string[] => {
   return composeWithUi(condition, path);
 };
 
 const evaluateCondition = (
   data: any,
   condition: Condition,
-  path: string,
+  path: string[],
   ajv: Ajv
 ): boolean => {
   if (isAndCondition(condition)) {
@@ -89,7 +89,7 @@ const evaluateCondition = (
 const isRuleFulfilled = (
   uischema: UISchemaElement,
   data: any,
-  path: string,
+  path: string[],
   ajv: Ajv
 ): boolean => {
   const condition = uischema.rule.condition;
@@ -99,7 +99,7 @@ const isRuleFulfilled = (
 export const evalVisibility = (
   uischema: UISchemaElement,
   data: any,
-  path: string = undefined,
+  path: string[] = undefined,
   ajv: Ajv
 ): boolean => {
   const fulfilled = isRuleFulfilled(uischema, data, path, ajv);
@@ -118,7 +118,7 @@ export const evalVisibility = (
 export const evalEnablement = (
   uischema: UISchemaElement,
   data: any,
-  path: string = undefined,
+  path: string[] = undefined,
   ajv: Ajv
 ): boolean => {
   const fulfilled = isRuleFulfilled(uischema, data, path, ajv);
@@ -159,7 +159,7 @@ export const hasEnableRule = (uischema: UISchemaElement): boolean => {
 export const isVisible = (
   uischema: UISchemaElement,
   data: any,
-  path: string = undefined,
+  path: string[] = undefined,
   ajv: Ajv
 ): boolean => {
   if (uischema.rule) {
@@ -172,7 +172,7 @@ export const isVisible = (
 export const isEnabled = (
   uischema: UISchemaElement,
   data: any,
-  path: string = undefined,
+  path: string[] = undefined,
   ajv: Ajv
 ): boolean => {
   if (uischema.rule) {
diff --git a/packages/core/src/util/util.ts b/packages/core/src/util/util.ts
index 946d5b54d..c1a9a2459 100644
--- a/packages/core/src/util/util.ts
+++ b/packages/core/src/util/util.ts
@@ -101,7 +101,7 @@ export const Resolve: {
    schemaPath: string,
    rootSchema?: JsonSchema
  ): JsonSchema;
- data(data: any, path: string): any;
+ data(data: any, path: string[]): any;
 } = {
  schema: resolveSchema,
  data: resolveData
diff --git a/packages/example/src/util.tsx b/packages/example/src/util.tsx
index 7d4037f4e..2ad32b9e1 100644
--- a/packages/example/src/util.tsx
+++ b/packages/example/src/util.tsx
@@ -206,14 +206,14 @@ export const enhanceExample: (
             <div>
               <button
                 onClick={() => {
-                  dispatch(Actions.update('toggleTopLayout', bool => !bool));
+                  dispatch(Actions.update(['toggleTopLayout'], bool => !bool));
                 }}
               >
                 Enable/Disable top layout
               </button>
               <button
                 onClick={() => {
-                  dispatch(Actions.update('toggleBottomLayout', bool => !bool));
+                  dispatch(Actions.update(['toggleBottomLayout'], bool => !bool));
                 }}
               >
                 Show/Hide bottom layout
diff --git a/packages/examples/src/person.ts b/packages/examples/src/person.ts
index cc85d8c2f..1b9c9fdbe 100644
--- a/packages/examples/src/person.ts
+++ b/packages/examples/src/person.ts
@@ -54,7 +54,7 @@ export const schema = {
     personalData: {
       type: 'object',
       properties: {
-        age: {
+        'ag.e': {
           type: 'integer',
           description: 'Please enter your age.'
         },
@@ -100,7 +100,7 @@ export const uischema = {
         },
         {
           type: 'Control',
-          scope: '#/properties/personalData/properties/age'
+          scope: '#/properties/personalData/properties/ag.e'
         },
         {
           type: 'Control',
diff --git a/packages/material/src/additional/MaterialListWithDetailRenderer.tsx b/packages/material/src/additional/MaterialListWithDetailRenderer.tsx
index a88a4593d..7e8182519 100644
--- a/packages/material/src/additional/MaterialListWithDetailRenderer.tsx
+++ b/packages/material/src/additional/MaterialListWithDetailRenderer.tsx
@@ -64,7 +64,7 @@ export const MaterialListWithDetailRenderer = ({
 }: ArrayLayoutProps) => {
   const [selectedIndex, setSelectedIndex] = useState(undefined);
   const handleRemoveItem = useCallback(
-    (p: string, value: any) => () => {
+    (p: string[], value: any) => () => {
       removeItems(p, [value])();
       if (selectedIndex === value) {
         setSelectedIndex(undefined);
@@ -95,6 +95,7 @@ export const MaterialListWithDetailRenderer = ({
     [uischemas, schema, uischema.scope, path, uischema]
   );
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
+  console.log("here");
 
   return (
     <Hidden xsUp={!visible}>
@@ -137,7 +138,7 @@ export const MaterialListWithDetailRenderer = ({
               visible={visible}
               schema={schema}
               uischema={foundUISchema}
-              path={composePaths(path, `${selectedIndex}`)}
+              path={composePaths(path, [`${selectedIndex}`])}
             />
           ) : (
             <Typography variant='h6'>No Selection</Typography>
diff --git a/packages/material/src/complex/CombinatorProperties.tsx b/packages/material/src/complex/CombinatorProperties.tsx
index c691f85f1..f475b32df 100644
--- a/packages/material/src/complex/CombinatorProperties.tsx
+++ b/packages/material/src/complex/CombinatorProperties.tsx
@@ -30,7 +30,7 @@ import { JsonFormsDispatch } from '@jsonforms/react';
 interface CombinatorPropertiesProps {
   schema: JsonSchema;
   combinatorKeyword: 'oneOf' | 'anyOf';
-  path: string;
+  path: string[];
 }
 
 export const isLayout = (uischema: UISchemaElement): uischema is Layout =>
diff --git a/packages/material/src/complex/DeleteDialog.tsx b/packages/material/src/complex/DeleteDialog.tsx
index 28a3c723d..737fbe2fa 100644
--- a/packages/material/src/complex/DeleteDialog.tsx
+++ b/packages/material/src/complex/DeleteDialog.tsx
@@ -40,7 +40,7 @@ export interface DeleteDialogProps {
 }
 
 export interface WithDeleteDialogSupport {
-  openDeleteDialog(path: string, data: number): void;
+  openDeleteDialog(path: string[], data: number): void;
 }
 
 export const DeleteDialog = React.memo(({ open, onClose, onConfirm, onCancel }: DeleteDialogProps) => {
diff --git a/packages/material/src/complex/MaterialArrayControlRenderer.tsx b/packages/material/src/complex/MaterialArrayControlRenderer.tsx
index 17ba04d64..76211e8f3 100644
--- a/packages/material/src/complex/MaterialArrayControlRenderer.tsx
+++ b/packages/material/src/complex/MaterialArrayControlRenderer.tsx
@@ -31,22 +31,23 @@ import { DeleteDialog } from './DeleteDialog';
 
 export const MaterialArrayControlRenderer = (props: ArrayLayoutProps) => {
   const [open, setOpen] = useState(false);
-  const [path, setPath] = useState(undefined);
+  const [path, setPath] = useState<string[]>(undefined);
   const [rowData, setRowData] = useState(undefined);
   const { removeItems, visible } = props;
 
-  const openDeleteDialog = useCallback((p: string, rowIndex: number) => {
+  const openDeleteDialog = useCallback((p: string[], rowIndex: number) => {
     setOpen(true);
     setPath(p);
     setRowData(rowIndex);
   }, [setOpen, setPath, setRowData]);
   const deleteCancel = useCallback(() => setOpen(false), [setOpen]);
   const deleteConfirm = useCallback(() => {
-    const p = path.substring(0, path.lastIndexOf(('.')));
-    removeItems(p, [rowData])();
+    path.pop();
+    removeItems(path, [rowData])();
     setOpen(false);
   }, [setOpen, path, rowData]);
   const deleteClose = useCallback(() => setOpen(false), [setOpen]);
+  console.log("here");
 
   return (
     <Hidden xsUp={!visible}>
diff --git a/packages/material/src/complex/MaterialEnumArrayRenderer.tsx b/packages/material/src/complex/MaterialEnumArrayRenderer.tsx
index 37d6f8c5d..2e65d650d 100644
--- a/packages/material/src/complex/MaterialEnumArrayRenderer.tsx
+++ b/packages/material/src/complex/MaterialEnumArrayRenderer.tsx
@@ -37,12 +37,14 @@ export const MaterialEnumArrayRenderer = ({
   removeItem,
   ...otherProps
 }: ControlProps & OwnPropsOfEnum & DispatchPropsOfMultiEnumControl) => {
+  console.log("here");
+
   return (
     <Hidden xlUp={!visible}>
       <FormControl component='fieldset'>
         <FormGroup row>
           {options.map((option: any, index: number) => {
-            const optionPath = Paths.compose(path, `${index}`);
+            const optionPath = Paths.compose(path, [`${index}`]);
             const checkboxValue = data?.includes(option.value)
               ? option.value
               : undefined;
@@ -101,7 +103,7 @@ export const materialEnumArrayRendererTester: RankedTester = rankWith(
           !Array.isArray(schema.items) &&
           schema.uniqueItems === true
       ),
-      schemaSubPathMatches('items', schema => {
+      schemaSubPathMatches(['items'], schema => {
         return hasOneOfItems(schema) || hasEnumItems(schema);
       })
     )
diff --git a/packages/material/src/complex/MaterialTableControl.tsx b/packages/material/src/complex/MaterialTableControl.tsx
index 86e253a18..853638afe 100644
--- a/packages/material/src/complex/MaterialTableControl.tsx
+++ b/packages/material/src/complex/MaterialTableControl.tsx
@@ -52,7 +52,8 @@ import {
   Paths,
   Resolve,
   JsonFormsRendererRegistryEntry,
-  JsonFormsCellRendererRegistryEntry
+  JsonFormsCellRendererRegistryEntry,
+  toId
 } from '@jsonforms/core';
 import IconButton from '@material-ui/core/IconButton';
 import DeleteIcon from '@material-ui/icons/Delete';
@@ -64,6 +65,7 @@ import NoBorderTableCell from './NoBorderTableCell';
 import TableToolbar from './TableToolbar';
 import { ErrorObject } from 'ajv';
 import merge from 'lodash/merge';
+import * as _ from 'lodash';
 
 // we want a cell that doesn't automatically span
 const styles = {
@@ -86,13 +88,13 @@ const styles = {
 const generateCells = (
   Cell: React.ComponentType<OwnPropsOfNonEmptyCell | TableHeaderCellProps>,
   schema: JsonSchema,
-  rowPath: string,
+  rowPath: string[],
   enabled: boolean,
   cells?: JsonFormsCellRendererRegistryEntry[]
 ) => {
   if (schema.type === 'object') {
     return getValidColumnProps(schema).map(prop => {
-      const cellPath = Paths.compose(rowPath, prop);
+      const cellPath = Paths.compose(rowPath, [prop]);
       const props = {
         propName: prop,
         schema,
@@ -102,7 +104,7 @@ const generateCells = (
         enabled,
         cells
       };
-      return <Cell key={cellPath} {...props} />;
+      return <Cell key={toId(cellPath)} {...props} />;
     });
   } else {
     // primitives
@@ -112,7 +114,7 @@ const generateCells = (
       cellPath: rowPath,
       enabled
     };
-    return <Cell key={rowPath} {...props} />;
+    return <Cell key={toId(rowPath)} {...props} />;
   }
 };
 
@@ -149,11 +151,11 @@ const TableHeaderCell = React.memo(({ title }: TableHeaderCellProps) => (
 interface NonEmptyCellProps extends OwnPropsOfNonEmptyCell {
   rootSchema: JsonSchema;
   errors: string;
-  path: string;
+  path: string[];
   enabled: boolean;
 }
 interface OwnPropsOfNonEmptyCell {
-  rowPath: string;
+  rowPath: string[];
   propName?: string;
   schema: JsonSchema;
   enabled: boolean;
@@ -164,9 +166,11 @@ const ctxToNonEmptyCellProps = (
   ctx: JsonFormsStateContext,
   ownProps: OwnPropsOfNonEmptyCell
 ): NonEmptyCellProps => {
-  const path =
-    ownProps.rowPath +
-    (ownProps.schema.type === 'object' ? '.' + ownProps.propName : '');
+  const path: string[] = _.cloneDeep(ownProps.rowPath);
+  if(ownProps.schema.type === 'object'){ 
+    path.push(ownProps.propName);
+  }
+
   const errors = formatErrorMessage(
     union(
       errorsAt(
@@ -240,7 +244,7 @@ const NonEmptyCell = (ownProps: OwnPropsOfNonEmptyCell) => {
 };
 
 interface NonEmptyRowProps {
-  childPath: string;
+  childPath: string[];
   schema: JsonSchema;
   rowIndex: number;
   moveUp: () => void;
@@ -266,8 +270,10 @@ const NonEmptyRow = React.memo(
     enabled,
     cells
   }: NonEmptyRowProps & WithDeleteDialogSupport) => {
+    console.log("here");
+
     return (
-      <TableRow key={childPath} hover>
+      <TableRow key={toId(childPath)} hover>
         {generateCells(NonEmptyCell, schema, childPath, enabled, cells)}
         {enabled ? (
           <NoBorderTableCell
@@ -318,14 +324,14 @@ const NonEmptyRow = React.memo(
 );
 interface TableRowsProp {
   data: number;
-  path: string;
+  path: string[];
   schema: JsonSchema;
   uischema: ControlElement;
   config?: any;
   enabled: boolean;
   cells?: JsonFormsCellRendererRegistryEntry[];
-  moveUp?(path: string, toMove: number): () => void;
-  moveDown?(path: string, toMove: number): () => void;
+  moveUp?(path: string[], toMove: number): () => void;
+  moveDown?(path: string[], toMove: number): () => void;
 }
 const TableRows = ({
   data,
@@ -346,15 +352,16 @@ const TableRows = ({
   }
 
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
+  console.log("here");
 
   return (
     <React.Fragment>
       {range(data).map((index: number) => {
-        const childPath = Paths.compose(path, `${index}`);
+        const childPath = Paths.compose(path, [`${index}`]);
 
         return (
           <NonEmptyRow
-            key={childPath}
+            key={toId(childPath)}
             childPath={childPath}
             rowIndex={index}
             schema={schema}
@@ -377,7 +384,7 @@ export class MaterialTableControl extends React.Component<
   ArrayLayoutProps & WithDeleteDialogSupport,
   any
 > {
-  addItem = (path: string, value: any) => this.props.addItem(path, value);
+  addItem = (path: string[], value: any) => this.props.addItem(path, value);
   render() {
     const {
       label,
@@ -397,6 +404,7 @@ export class MaterialTableControl extends React.Component<
     const headerCells: any = isObjectSchema
       ? generateCells(TableHeaderCell, schema, path, enabled, cells)
       : undefined;
+      console.log("here");
 
     return (
       <Hidden xsUp={!visible}>
diff --git a/packages/material/src/complex/TableToolbar.tsx b/packages/material/src/complex/TableToolbar.tsx
index 017f01349..b8696d067 100644
--- a/packages/material/src/complex/TableToolbar.tsx
+++ b/packages/material/src/complex/TableToolbar.tsx
@@ -40,12 +40,12 @@ export interface MaterialTableToolbarProps {
   numColumns: number;
   errors: string;
   label: string;
-  path: string;
+  path: string[];
   uischema: ControlElement;
   schema: JsonSchema;
   rootSchema: JsonSchema;
   enabled: boolean;
-  addItem(path: string, value: any): () => void;
+  addItem(path: string[], value: any): () => void;
 }
 
 const fixedCellSmall = {
diff --git a/packages/material/src/layouts/ArrayToolbar.tsx b/packages/material/src/layouts/ArrayToolbar.tsx
index e2bef4b45..5d2e85e82 100644
--- a/packages/material/src/layouts/ArrayToolbar.tsx
+++ b/packages/material/src/layouts/ArrayToolbar.tsx
@@ -8,8 +8,8 @@ import ValidationIcon from '../complex/ValidationIcon';
 export interface ArrayLayoutToolbarProps {
   label: string;
   errors: string;
-  path: string;
-  addItem(path: string, data: any): () => void;
+  path: string[];
+  addItem(path: string[], data: any): () => void;
   createDefault(): any;
 }
 export const ArrayLayoutToolbar = React.memo(
@@ -20,6 +20,7 @@ export const ArrayLayoutToolbar = React.memo(
     path,
     createDefault
   }: ArrayLayoutToolbarProps) => {
+    console.log("here");
     return (
       <Toolbar disableGutters={true}>
         <Grid container alignItems='center' justify='space-between'>
diff --git a/packages/material/src/layouts/ExpandPanelRenderer.tsx b/packages/material/src/layouts/ExpandPanelRenderer.tsx
index 4535d48af..9b163d7a3 100644
--- a/packages/material/src/layouts/ExpandPanelRenderer.tsx
+++ b/packages/material/src/layouts/ExpandPanelRenderer.tsx
@@ -21,7 +21,8 @@ import {
   JsonFormsUISchemaRegistryEntry,
   getFirstPrimitiveProp,
   createId,
-  removeId
+  removeId,
+  toId
 } from '@jsonforms/core';
 import IconButton from '@material-ui/core/IconButton';
 import Accordion from '@material-ui/core/Accordion';
@@ -38,7 +39,7 @@ const iconStyle: any = { float: 'right' };
 
 interface OwnPropsOfExpandPanel {
   index: number;
-  path: string;
+  path: string[];
   uischema: ControlElement;
   schema: JsonSchema;
   expanded: boolean;
@@ -50,12 +51,12 @@ interface OwnPropsOfExpandPanel {
   enableMoveDown: boolean;
   config: any;
   childLabelProp?: string;
-  handleExpansion(panel: string): (event: any, expanded: boolean) => void;
+  handleExpansion(index: number): (event: any, expanded: boolean) => void;
 }
 
 interface StatePropsOfExpandPanel extends OwnPropsOfExpandPanel {
   childLabel: string;
-  childPath: string;
+  childPath: string[];
   enableMoveUp: boolean;
   enableMoveDown: boolean;
 }
@@ -64,9 +65,9 @@ interface StatePropsOfExpandPanel extends OwnPropsOfExpandPanel {
  * Dispatch props of a table control
  */
 export interface DispatchPropsOfExpandPanel {
-  removeItems(path: string, toDelete: number[]): (event: any) => void;
-  moveUp(path: string, toMove: number): (event: any) => void;
-  moveDown(path: string, toMove: number): (event: any) => void;
+  removeItems(path: string[], toDelete: number[]): (event: any) => void;
+  moveUp(path: string[], toMove: number): (event: any) => void;
+  moveDown(path: string[], toMove: number): (event: any) => void;
 }
 
 export interface ExpandPanelProps
@@ -123,7 +124,7 @@ const ExpandPanelRenderer = (props: ExpandPanelProps) => {
     <Accordion
       aria-labelledby={labelHtmlId}
       expanded={expanded}
-      onChange={handleExpansion(childPath)}
+      onChange={handleExpansion(index)}
     >
       <AccordionSummary expandIcon={<ExpandMoreIcon />}>
         <Grid container alignItems={'center'}>
@@ -192,7 +193,7 @@ const ExpandPanelRenderer = (props: ExpandPanelProps) => {
           schema={schema}
           uischema={foundUISchema}
           path={childPath}
-          key={childPath}
+          key={toId(childPath)}
           renderers={renderers}
           cells={cells}
         />
@@ -210,7 +211,7 @@ const ExpandPanelRenderer = (props: ExpandPanelProps) => {
 export const ctxDispatchToExpandPanelProps: (
   dispatch: Dispatch<ReducerAction<any>>
 ) => DispatchPropsOfExpandPanel = dispatch => ({
-  removeItems: (path: string, toDelete: number[]) => (event: any): void => {
+  removeItems: (path: string[], toDelete: number[]) => (event: any): void => {
     event.stopPropagation();
     dispatch(
       update(path, array => {
@@ -222,7 +223,7 @@ export const ctxDispatchToExpandPanelProps: (
       })
     );
   },
-  moveUp: (path: string, toMove: number) => (event: any): void => {
+  moveUp: (path: string[], toMove: number) => (event: any): void => {
     event.stopPropagation();
     dispatch(
       update(path, array => {
@@ -231,7 +232,7 @@ export const ctxDispatchToExpandPanelProps: (
       })
     );
   },
-  moveDown: (path: string, toMove: number) => (event: any): void => {
+  moveDown: (path: string[], toMove: number) => (event: any): void => {
     event.stopPropagation();
     dispatch(
       update(path, array => {
@@ -256,12 +257,12 @@ export const withContextToExpandPanelProps = (
 }: JsonFormsStateContext & ExpandPanelProps) => {
   const dispatchProps = ctxDispatchToExpandPanelProps(ctx.dispatch);
   const { childLabelProp, schema, path, index, uischemas } = props;
-  const childPath = composePaths(path, `${index}`);
+  const childPath = composePaths(path, [`${index}`]);
   const childData = Resolve.data(ctx.core.data, childPath);
   const childLabel = childLabelProp
     ? get(childData, childLabelProp, '')
     : get(childData, getFirstPrimitiveProp(schema), '');
-
+    console.log("here");
   return (
     <Component
       {...props}
diff --git a/packages/material/src/layouts/MaterialArrayLayout.tsx b/packages/material/src/layouts/MaterialArrayLayout.tsx
index 48a471863..ca6644fb3 100644
--- a/packages/material/src/layouts/MaterialArrayLayout.tsx
+++ b/packages/material/src/layouts/MaterialArrayLayout.tsx
@@ -26,7 +26,6 @@ import range from 'lodash/range';
 import React from 'react';
 import {
   ArrayLayoutProps,
-  composePaths,
   computeLabel,
   createDefaultValue,
 } from '@jsonforms/core';
@@ -36,7 +35,7 @@ import ExpandPanelRenderer from './ExpandPanelRenderer';
 import merge from 'lodash/merge';
 
 interface MaterialArrayLayoutState {
-  expanded: string | boolean;
+  expanded: number | boolean;
 }
 export class MaterialArrayLayout extends React.PureComponent<
   ArrayLayoutProps,
@@ -46,13 +45,13 @@ export class MaterialArrayLayout extends React.PureComponent<
     expanded: null
   };
   innerCreateDefaultValue = () => createDefaultValue(this.props.schema);
-  handleChange = (panel: string) => (_event: any, expanded: boolean) => {
+  handleChange = (index: number) => (_event: any, expanded: boolean) => {
     this.setState({
-      expanded: expanded ? panel : false
+      expanded: expanded ? index : false
     });
   };
   isExpanded = (index: number) =>
-    this.state.expanded === composePaths(this.props.path, `${index}`);
+    this.state.expanded === index;
   render() {
     const {
       data,
@@ -74,6 +73,7 @@ export class MaterialArrayLayout extends React.PureComponent<
       config,
       this.props.uischema.options
     );
+    console.log("here");
 
     return (
       <div>
diff --git a/packages/material/src/layouts/MaterialArrayLayoutRenderer.tsx b/packages/material/src/layouts/MaterialArrayLayoutRenderer.tsx
index abbcfb680..3fc8bd2a5 100644
--- a/packages/material/src/layouts/MaterialArrayLayoutRenderer.tsx
+++ b/packages/material/src/layouts/MaterialArrayLayoutRenderer.tsx
@@ -50,9 +50,11 @@ export const MaterialArrayLayoutRenderer = ({
   uischemas,
   addItem
 }: ArrayLayoutProps) => {
-  const addItemCb = useCallback((p: string, value: any) => addItem(p, value), [
+  const addItemCb = useCallback((p: string[], value: any) => addItem(p, value), [
     addItem
   ]);
+  console.log("here");
+
   return (
     <Hidden xsUp={!visible}>
       <MaterialArrayLayout
diff --git a/packages/material/src/util/datejs.ts b/packages/material/src/util/datejs.ts
index 3c4cc1f09..cdcfe52d0 100644
--- a/packages/material/src/util/datejs.ts
+++ b/packages/material/src/util/datejs.ts
@@ -5,8 +5,8 @@ import customParsing from 'dayjs/plugin/customParseFormat';
 dayjs.extend(customParsing);
 
 export const createOnChangeHandler = (
-  path: string,
-  handleChange: (path: string, value: any) => void,
+  path: string[],
+  handleChange: (path: string[], value: any) => void,
   saveFormat: string | undefined
 ) => (time: dayjs.Dayjs) => {
   if (!time) {
diff --git a/packages/material/src/util/debounce.ts b/packages/material/src/util/debounce.ts
index c5b299171..b04a197fc 100644
--- a/packages/material/src/util/debounce.ts
+++ b/packages/material/src/util/debounce.ts
@@ -3,7 +3,7 @@ import { useState, useCallback, useEffect } from 'react'
 
 
 const eventToValue = (ev: any) => ev.target.value;
-export const useDebouncedChange = (handleChange: (path: string, value: any) => void, defaultValue: any, data: any, path: string, eventToValueFunction: (ev: any) => any = eventToValue, timeout = 300): [any, React.ChangeEventHandler, () => void] => {
+export const useDebouncedChange = (handleChange: (path: string[], value: any) => void, defaultValue: any, data: any, path: string[], eventToValueFunction: (ev: any) => any = eventToValue, timeout = 300): [any, React.ChangeEventHandler, () => void] => {
   const [input, setInput] = useState(data ?? defaultValue);
   useEffect(() => {
     setInput(data ?? defaultValue);
diff --git a/packages/material/src/util/layout.tsx b/packages/material/src/util/layout.tsx
index 02755d88c..44c1d2c89 100644
--- a/packages/material/src/util/layout.tsx
+++ b/packages/material/src/util/layout.tsx
@@ -40,7 +40,7 @@ import { Grid, Hidden } from '@material-ui/core';
 export const renderLayoutElements = (
   elements: UISchemaElement[],
   schema: JsonSchema,
-  path: string,
+  path: string[],
   enabled: boolean,
   renderers?: JsonFormsRendererRegistryEntry[],
   cells?: JsonFormsCellRendererRegistryEntry[]
diff --git a/packages/react/src/JsonForms.tsx b/packages/react/src/JsonForms.tsx
index 95f3fb08f..f08f1c453 100644
--- a/packages/react/src/JsonForms.tsx
+++ b/packages/react/src/JsonForms.tsx
@@ -94,7 +94,7 @@ const TestAndRender = React.memo(
   (props: {
     uischema: UISchemaElement;
     schema: JsonSchema;
-    path: string;
+    path: string[];
     enabled: boolean;
     renderers: JsonFormsRendererRegistryEntry[];
     cells: JsonFormsCellRendererRegistryEntry[];
@@ -143,7 +143,7 @@ const useJsonFormsDispatchRendererProps = (props: OwnPropsOfJsonFormsRenderer &
   return {
     schema: props.schema || ctx.core.schema,
     uischema: props.uischema || ctx.core.uischema,
-    path: props.path || '',
+    path: props.path || [],
     enabled: props.enabled,
     rootSchema: ctx.core.schema,
     renderers: props.renderers || ctx.renderers,
diff --git a/packages/vanilla/src/complex/TableArrayControl.tsx b/packages/vanilla/src/complex/TableArrayControl.tsx
index b210a5cf6..bbefb2b0b 100644
--- a/packages/vanilla/src/complex/TableArrayControl.tsx
+++ b/packages/vanilla/src/complex/TableArrayControl.tsx
@@ -39,7 +39,8 @@ import {
   RankedTester,
   Resolve,
   Test,
-  getControlPath
+  getControlPath,
+  toId
 } from '@jsonforms/core';
 import { DispatchCell, withJsonFormsArrayControlProps } from '@jsonforms/react';
 import { withVanillaControlProps } from '../util';
@@ -61,9 +62,9 @@ export const tableArrayControlTester: RankedTester = rankWith(
 
 class TableArrayControl extends React.Component<ArrayControlProps & VanillaRendererProps, any> {
 
-  confirmDelete = (path: string, index: number) => {
-    const p = path.substring(0, path.lastIndexOf(('.')));
-    this.props.removeItems(p, [index])();
+  confirmDelete = (path: string[], index: number) => {
+    path.pop();
+    this.props.removeItems(path, [index])();
   };
 
   render() {
@@ -140,7 +141,7 @@ class TableArrayControl extends React.Component<ArrayControlProps & VanillaRende
                 data.map((_child, index) => {
                   const childPath = Paths.compose(
                     path,
-                    `${index}`
+                    [`${index}`]
                   );
                   // TODO
                   const errorsPerEntry: any[] = filter(childErrors, error => {
@@ -155,7 +156,7 @@ class TableArrayControl extends React.Component<ArrayControlProps & VanillaRende
                     validationClassName;
 
                   return (
-                    <tr key={childPath}>
+                    <tr key={toId(childPath)}>
                       {schema.properties ? (
                         fpflow(
                           fpkeys,
@@ -165,15 +166,15 @@ class TableArrayControl extends React.Component<ArrayControlProps & VanillaRende
                           fpmap(prop => {
                             const childPropPath = Paths.compose(
                               childPath,
-                              prop.toString()
+                              [prop.toString()]
                             );
 
                             return (
-                              <td key={childPropPath}>
+                              <td key={toId(childPropPath)}>
                                 <DispatchCell
                                   schema={Resolve.schema(schema, `#/properties/${prop}`, rootSchema)}
                                   uischema={createControlElement(prop)}
-                                  path={childPath + '.' + prop}
+                                  path={Paths.compose(childPath,[prop])}
                                 />
                               </td>
                             );
@@ -181,10 +182,10 @@ class TableArrayControl extends React.Component<ArrayControlProps & VanillaRende
                         )(schema.properties)
                       ) : (
                           <td
-                            key={Paths.compose(
+                            key={toId(Paths.compose(
                               childPath,
-                              index.toString()
-                            )}
+                              [index.toString()]
+                            ))}
                           >
                             <DispatchCell
                               schema={schema}
diff --git a/packages/vanilla/src/complex/array/ArrayControl.tsx b/packages/vanilla/src/complex/array/ArrayControl.tsx
index ed4e935d7..1e022646c 100644
--- a/packages/vanilla/src/complex/array/ArrayControl.tsx
+++ b/packages/vanilla/src/complex/array/ArrayControl.tsx
@@ -24,7 +24,7 @@
 */
 import range from 'lodash/range';
 import React, { useMemo } from 'react';
-import { ArrayControlProps, composePaths, createDefaultValue, findUISchema } from '@jsonforms/core';
+import { ArrayControlProps, composePaths, createDefaultValue, findUISchema, toId } from '@jsonforms/core';
 import { JsonFormsDispatch } from '@jsonforms/react';
 import { VanillaRendererProps } from '../../index';
 
@@ -58,14 +58,14 @@ export const ArrayControl = ({
         <div className={classNames.children}>
           {data ? (
             range(0, data.length).map(index => {
-              const childPath = composePaths(path, `${index}`);
+              const childPath = composePaths(path, [`${index}`]);
 
               return (
                 <JsonFormsDispatch
                   schema={schema}
                   uischema={childUiSchema || uischema}
                   path={childPath}
-                  key={childPath}
+                  key={toId(childPath)}
                   renderers={renderers}
                 />
               );
diff --git a/packages/vanilla/src/complex/categorization/SingleCategory.tsx b/packages/vanilla/src/complex/categorization/SingleCategory.tsx
index 09cb6e72e..79b1a6f0e 100644
--- a/packages/vanilla/src/complex/categorization/SingleCategory.tsx
+++ b/packages/vanilla/src/complex/categorization/SingleCategory.tsx
@@ -29,7 +29,7 @@ import { JsonFormsDispatch } from '@jsonforms/react';
 export interface CategoryProps {
   category: Category;
   schema: JsonSchema;
-  path: string;
+  path: string[];
 }
 
 export const SingleCategory = ({ category, schema, path }: CategoryProps) => (
diff --git a/packages/vanilla/src/layouts/util.tsx b/packages/vanilla/src/layouts/util.tsx
index 7f0346aa3..a97691a4d 100644
--- a/packages/vanilla/src/layouts/util.tsx
+++ b/packages/vanilla/src/layouts/util.tsx
@@ -30,14 +30,14 @@ export interface RenderChildrenProps {
   layout: Layout;
   schema: JsonSchema;
   className: string;
-  path: string;
+  path: string[];
 }
 
 export const renderChildren = (
   layout: Layout,
   schema: JsonSchema,
   className: string,
-  path: string
+  path: string[]
 ) => {
   if (isEmpty(layout.elements)) {
     return [];
diff --git a/packages/vue/vue/src/jsonFormsCompositions.ts b/packages/vue/vue/src/jsonFormsCompositions.ts
index a983a7955..1cc94b981 100644
--- a/packages/vue/vue/src/jsonFormsCompositions.ts
+++ b/packages/vue/vue/src/jsonFormsCompositions.ts
@@ -117,7 +117,7 @@ export const masterListItemProps = () => ({
   removeItem: {
     required: false as false,
     type: Function as CompType<
-      (path: string, value: number) => void,
+      (path: string[], value: number) => void,
       FunctionConstructor
     >,
     default: undefined
@@ -127,7 +127,7 @@ export const masterListItemProps = () => ({
 export interface RendererProps<U = UISchemaElement> {
   schema: JsonSchema;
   uischema: U;
-  path: string;
+  path: string[];
   enabled?: boolean;
   renderers?: JsonFormsRendererRegistryEntry[];
   cells?: JsonFormsCellRendererRegistryEntry[];

From 0a8f01b46f9783460ba576ddc38878ddfd6ae4b9 Mon Sep 17 00:00:00 2001
From: LukasBoll <ga24xeg@mytum.de>
Date: Mon, 25 Oct 2021 19:42:15 +0200
Subject: [PATCH 2/9] angular

---
 package-lock.json                             | 54 ++-----------------
 .../src/layouts/array-layout.renderer.ts      |  2 +-
 .../src/other/master-detail/master.ts         | 16 +++---
 .../src/other/object.renderer.ts              |  3 +-
 .../src/other/table.renderer.ts               |  2 +-
 packages/angular-test/src/boolean.ts          | 10 ++--
 packages/angular-test/src/number.ts           |  8 +--
 packages/angular-test/src/range.ts            | 10 ++--
 packages/angular-test/src/text.ts             | 10 ++--
 packages/core/src/util/path.ts                | 10 +---
 .../vue/vue-vanilla/src/util/composition.ts   |  2 +-
 11 files changed, 36 insertions(+), 91 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 65c148d9d..c1d6d639e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6101,12 +6101,6 @@
       "resolved": "https://registry.npmjs.org/@types/object-hash/-/object-hash-1.3.4.tgz",
       "integrity": "sha512-xFdpkAkikBgqBdG9vIlsqffDV8GpvnPEzs0IUtr1v3BEB97ijsFQ4RXVbUZwjFThhB4MDSTUfvmxUD5PGx0wXA=="
     },
-    "@types/parse-json": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
-      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
-      "optional": true
-    },
     "@types/prop-types": {
       "version": "15.7.4",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
@@ -6620,11 +6614,9 @@
           "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
           "optional": true,
           "requires": {
-            "@types/parse-json": "^4.0.0",
             "import-fresh": "^3.1.0",
             "parse-json": "^5.0.0",
-            "path-type": "^4.0.0",
-            "yaml": "^1.7.2"
+            "path-type": "^4.0.0"
           },
           "dependencies": {
             "path-type": {
@@ -6678,7 +6670,7 @@
           }
         },
         "fork-ts-checker-webpack-plugin-v5": {
-          "version": "npm:fork-ts-checker-webpack-plugin@5.2.1",
+          "version": "npm:fork-ts-checker-webpack-plugin-v5@5.2.1",
           "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-5.2.1.tgz",
           "integrity": "sha512-SVi+ZAQOGbtAsUWrZvGzz38ga2YqjWvca1pXQFUArIVXqli0lLoDQ8uS0wg0kSpcwpZmaW5jVCZXQebkyUQSsw==",
           "optional": true,
@@ -6689,7 +6681,6 @@
             "cosmiconfig": "^6.0.0",
             "deepmerge": "^4.2.2",
             "fs-extra": "^9.0.0",
-            "memfs": "^3.1.2",
             "minimatch": "^3.0.4",
             "schema-utils": "2.7.0",
             "semver": "^7.3.2",
@@ -6759,7 +6750,6 @@
           "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
           "optional": true,
           "requires": {
-            "parent-module": "^1.0.0",
             "resolve-from": "^4.0.0"
           }
         },
@@ -7348,7 +7338,7 @@
           }
         },
         "vue-loader-v16": {
-          "version": "npm:vue-loader@16.8.1",
+          "version": "npm:vue-loader-v16@16.8.1",
           "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.1.tgz",
           "integrity": "sha512-V53TJbHmzjBhCG5OYI2JWy/aYDspz4oVHKxS43Iy212GjGIG1T3EsB3+GWXFm/1z5VwjdjLmdZUFYM70y77vtQ==",
           "optional": true,
@@ -14454,12 +14444,6 @@
         "through2": "^2.0.3"
       }
     },
-    "fs-monkey": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.3.tgz",
-      "integrity": "sha512-cybjIfiiE+pTWicSCLFHSrXZ6EilF30oh91FDP9S2B051prEa7QWfrVTQm10/dDpswBDXZugPa1Ogu8Yh+HV0Q==",
-      "optional": true
-    },
     "fs-write-stream-atomic": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz",
@@ -19287,15 +19271,6 @@
         "p-is-promise": "^2.0.0"
       }
     },
-    "memfs": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.3.0.tgz",
-      "integrity": "sha512-BEE62uMfKOavX3iG7GYX43QJ+hAeeWnwIAuJ/R6q96jaMtiLzhsxHJC8B1L7fK7Pt/vXDRwb3SG/yBpNGDPqzg==",
-      "optional": true,
-      "requires": {
-        "fs-monkey": "1.0.3"
-      }
-    },
     "memory-fs": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.5.0.tgz",
@@ -21541,23 +21516,6 @@
         "no-case": "^2.2.0"
       }
     },
-    "parent-module": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
-      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "optional": true,
-      "requires": {
-        "callsites": "^3.0.0"
-      },
-      "dependencies": {
-        "callsites": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
-          "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-          "optional": true
-        }
-      }
-    },
     "parse-asn1": {
       "version": "5.1.6",
       "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.6.tgz",
@@ -28645,12 +28603,6 @@
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
       "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
     },
-    "yaml": {
-      "version": "1.10.2",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
-      "optional": true
-    },
     "yargs": {
       "version": "14.2.3",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-14.2.3.tgz",
diff --git a/packages/angular-material/src/layouts/array-layout.renderer.ts b/packages/angular-material/src/layouts/array-layout.renderer.ts
index 7c9f7d9ab..e0b3c4129 100644
--- a/packages/angular-material/src/layouts/array-layout.renderer.ts
+++ b/packages/angular-material/src/layouts/array-layout.renderer.ts
@@ -181,7 +181,7 @@ export class ArrayLayoutRenderer
     }
     return {
       schema: this.scopedSchema,
-      path: Paths.compose(this.propsPath, `${index}`),
+      path: Paths.compose(this.propsPath, [`${index}`]),
       uischema
     };
   }
diff --git a/packages/angular-material/src/other/master-detail/master.ts b/packages/angular-material/src/other/master-detail/master.ts
index 3d451aade..71cafc0e3 100644
--- a/packages/angular-material/src/other/master-detail/master.ts
+++ b/packages/angular-material/src/other/master-detail/master.ts
@@ -22,7 +22,7 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import some from 'lodash/some';
+//import some from 'lodash/some';
 import get from 'lodash/get';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
 import {
@@ -31,6 +31,7 @@ import {
 } from '@jsonforms/angular';
 import {
   ArrayControlProps,
+  composePaths,
   ControlElement,
   createDefaultValue,
   findUISchema,
@@ -44,15 +45,15 @@ import {
   uiTypeIs
 } from '@jsonforms/core';
 
-const keywords = ['#', 'properties', 'items'];
+//const keywords = ['#', 'properties', 'items'];
 
-export const removeSchemaKeywords = (path: string[]) => {
+/*export const removeSchemaKeywords = (path: string[]) => {
   return path
     .split('/')
     .filter(s => !some(keywords, key => key === s))
     .join('.');
 };
-
+*/
 @Component({
   selector: 'jsonforms-list-with-detail-master',
   template: `
@@ -180,14 +181,13 @@ export class MasterListComponent extends JsonFormsArrayControl {
       );
 
     const masterItems = (data || []).map((d: any, index: number) => {
-      const labelRefInstancePath = controlElement.options?.labelRef && removeSchemaKeywords(
-        controlElement.options.labelRef
-      );
+      const labelRefInstancePath = controlElement.options?.labelRef &&
+        controlElement.options.labelRef;
       const isPrimitive = d !== undefined && typeof d !== 'object';
       const masterItem = {
         label: isPrimitive ? d.toString() : get(d, labelRefInstancePath ?? getFirstPrimitiveProp(schema)),
         data: d,
-        path: `${path}.${index}`,
+        path: composePaths(path, [`${index}`]),
         schema,
         uischema: detailUISchema
       };
diff --git a/packages/angular-material/src/other/object.renderer.ts b/packages/angular-material/src/other/object.renderer.ts
index 62a9bc86b..64a6ccf29 100644
--- a/packages/angular-material/src/other/object.renderer.ts
+++ b/packages/angular-material/src/other/object.renderer.ts
@@ -70,7 +70,8 @@ export class ObjectControlRenderer extends JsonFormsControlWithDetail {
     if (isEmpty(props.path)) {
       this.detailUiSchema.type = 'VerticalLayout';
     } else {
-      (this.detailUiSchema as GroupLayout).label = startCase(props.path);
+      console.log(props.path);
+      (this.detailUiSchema as GroupLayout).label = props.path.map(element=>startCase(element)).toString();
     }
     if (!this.isEnabled()) {
       setReadonly(this.detailUiSchema);
diff --git a/packages/angular-material/src/other/table.renderer.ts b/packages/angular-material/src/other/table.renderer.ts
index 3dbbf28e0..44a348009 100644
--- a/packages/angular-material/src/other/table.renderer.ts
+++ b/packages/angular-material/src/other/table.renderer.ts
@@ -88,7 +88,7 @@ export class TableRenderer extends JsonFormsArrayControl {
     this.displayedColumns = this.items.map(item => item.property);
   }
   getProps(index: number, props: OwnPropsOfRenderer): OwnPropsOfRenderer {
-    const rowPath = Paths.compose(props.path, `${index}`);
+    const rowPath = Paths.compose(props.path, [`${index}`]);
     return {
       schema: props.schema,
       uischema: props.uischema,
diff --git a/packages/angular-test/src/boolean.ts b/packages/angular-test/src/boolean.ts
index f33489fdc..8fc38c4c6 100644
--- a/packages/angular-test/src/boolean.ts
+++ b/packages/angular-test/src/boolean.ts
@@ -114,7 +114,7 @@ export const booleanBaseTest = <C extends JsonFormsControl, I>(
     fixture.detectChanges();
 
     getJsonFormsService(component).updateCore(
-      Actions.update('foo', () => false)
+      Actions.update(['foo'], () => false)
     );
     fixture.detectChanges();
     expect(component.data).toBe(false);
@@ -130,7 +130,7 @@ export const booleanBaseTest = <C extends JsonFormsControl, I>(
     fixture.detectChanges();
 
     getJsonFormsService(component).updateCore(
-      Actions.update('foo', () => undefined)
+      Actions.update(['foo'], () => undefined)
     );
     fixture.detectChanges();
     expect(component.data).toBe(undefined);
@@ -146,7 +146,7 @@ export const booleanBaseTest = <C extends JsonFormsControl, I>(
     fixture.detectChanges();
 
     getJsonFormsService(component).updateCore(
-      Actions.update('foo', () => null)
+      Actions.update(['foo'], () => null)
     );
     fixture.detectChanges();
     expect(component.data).toBe(null);
@@ -162,10 +162,10 @@ export const booleanBaseTest = <C extends JsonFormsControl, I>(
     fixture.detectChanges();
 
     getJsonFormsService(component).updateCore(
-      Actions.update('foo', () => true)
+      Actions.update(['foo'], () => true)
     );
     getJsonFormsService(component).updateCore(
-      Actions.update('bar', () => false)
+      Actions.update(['bar'], () => false)
     );
     fixture.detectChanges();
     expect(component.data).toBe(true);
diff --git a/packages/angular-test/src/number.ts b/packages/angular-test/src/number.ts
index c5d686677..e4dd9a550 100644
--- a/packages/angular-test/src/number.ts
+++ b/packages/angular-test/src/number.ts
@@ -175,7 +175,7 @@ export const numberBaseTest = <C extends JsonFormsControl>(
     component.ngOnInit();
     fixture.detectChanges();
     getJsonFormsService(fixture.componentInstance).updateCore(
-      Actions.update('foo', () => 456.456)
+      Actions.update(['foo'], () => 456.456)
     );
     fixture.detectChanges();
     expect(component.data).toBe(456.456);
@@ -191,7 +191,7 @@ export const numberBaseTest = <C extends JsonFormsControl>(
     component.ngOnInit();
     fixture.detectChanges();
     getJsonFormsService(fixture.componentInstance).updateCore(
-      Actions.update('foo', () => undefined)
+      Actions.update(['foo'], () => undefined)
     );
     fixture.detectChanges();
 
@@ -208,7 +208,7 @@ export const numberBaseTest = <C extends JsonFormsControl>(
     component.ngOnInit();
     fixture.detectChanges();
     getJsonFormsService(fixture.componentInstance).updateCore(
-      Actions.update('foo', () => null)
+      Actions.update(['foo'], () => null)
     );
     fixture.detectChanges();
     expect(component.data).toBe(null);
@@ -224,7 +224,7 @@ export const numberBaseTest = <C extends JsonFormsControl>(
     component.ngOnInit();
     fixture.detectChanges();
     getJsonFormsService(fixture.componentInstance).updateCore(
-      Actions.update('bar', () => 456.456)
+      Actions.update(['bar'], () => 456.456)
     );
     fixture.detectChanges();
     expect(component.data).toBe(123.123);
diff --git a/packages/angular-test/src/range.ts b/packages/angular-test/src/range.ts
index 74c5b8247..025e6e32b 100644
--- a/packages/angular-test/src/range.ts
+++ b/packages/angular-test/src/range.ts
@@ -152,7 +152,7 @@ export const rangeBaseTest = <C extends JsonFormsControl, I>(
     fixture.detectChanges();
 
     getJsonFormsService(component).updateCore(
-      Actions.update('foo', () => 4.56)
+      Actions.update(['foo'], () => 4.56)
     );
     fixture.detectChanges();
     expect(component.data).toBe(4.56);
@@ -169,7 +169,7 @@ export const rangeBaseTest = <C extends JsonFormsControl, I>(
     fixture.detectChanges();
 
     getJsonFormsService(component).updateCore(
-      Actions.update('foo', () => undefined)
+      Actions.update(['foo'], () => undefined)
     );
     fixture.detectChanges();
     expect(component.data).toBe(undefined);
@@ -186,7 +186,7 @@ export const rangeBaseTest = <C extends JsonFormsControl, I>(
     fixture.detectChanges();
 
     getJsonFormsService(component).updateCore(
-      Actions.update('foo', () => null)
+      Actions.update(['foo'], () => null)
     );
     fixture.detectChanges();
     expect(component.data).toBe(null);
@@ -203,10 +203,10 @@ export const rangeBaseTest = <C extends JsonFormsControl, I>(
     fixture.detectChanges();
 
     getJsonFormsService(component).updateCore(
-      Actions.update('foo', () => 1.234)
+      Actions.update(['foo'], () => 1.234)
     );
     getJsonFormsService(component).updateCore(
-      Actions.update('bar', () => 456.456)
+      Actions.update(['bar'], () => 456.456)
     );
 
     fixture.detectChanges();
diff --git a/packages/angular-test/src/text.ts b/packages/angular-test/src/text.ts
index 2802ba40b..6e859f924 100644
--- a/packages/angular-test/src/text.ts
+++ b/packages/angular-test/src/text.ts
@@ -128,7 +128,7 @@ export const textBaseTest = <C extends JsonFormsControl>(
     fixture.detectChanges();
 
     getJsonFormsService(component).updateCore(
-      Actions.update('foo', () => 'bar')
+      Actions.update(['foo'], () => 'bar')
     );
     fixture.detectChanges();
     expect(component.data).toBe('bar');
@@ -144,7 +144,7 @@ export const textBaseTest = <C extends JsonFormsControl>(
     fixture.detectChanges();
 
     getJsonFormsService(component).updateCore(
-      Actions.update('foo', () => undefined)
+      Actions.update(['foo'], () => undefined)
     );
     fixture.detectChanges();
     expect(component.data).toBe(undefined);
@@ -160,7 +160,7 @@ export const textBaseTest = <C extends JsonFormsControl>(
     fixture.detectChanges();
 
     getJsonFormsService(component).updateCore(
-      Actions.update('foo', () => null)
+      Actions.update(['foo'], () => null)
     );
     fixture.detectChanges();
     expect(component.data).toBe(null);
@@ -176,10 +176,10 @@ export const textBaseTest = <C extends JsonFormsControl>(
     fixture.detectChanges();
 
     getJsonFormsService(component).updateCore(
-      Actions.update('foo', () => 'foo')
+      Actions.update(['foo'], () => 'foo')
     );
     getJsonFormsService(component).updateCore(
-      Actions.update('bar', () => 'bar')
+      Actions.update(['bar'], () => 'bar')
     );
     fixture.detectChanges();
     expect(component.data).toBe('foo');
diff --git a/packages/core/src/util/path.ts b/packages/core/src/util/path.ts
index 52d3331b6..df115cfde 100644
--- a/packages/core/src/util/path.ts
+++ b/packages/core/src/util/path.ts
@@ -28,15 +28,7 @@ import range from 'lodash/range';
 import { Scopable } from '../models';
 
 export const compose = (path1: string[], path2: string[]) => {
-  let p1 = path1;
-
-  if (isEmpty(p1)) {
-    return path2;
-  } else if (isEmpty(path2)) {
-    return p1;
-  } else {
-    return p1.concat(path2);
-  }
+    return path1.concat(path2);
 };
 
 export { compose as composePaths };
diff --git a/packages/vue/vue-vanilla/src/util/composition.ts b/packages/vue/vue-vanilla/src/util/composition.ts
index ae101c319..40d179eb6 100644
--- a/packages/vue/vue-vanilla/src/util/composition.ts
+++ b/packages/vue/vue-vanilla/src/util/composition.ts
@@ -103,7 +103,7 @@ export const useVanillaArrayControl = <I extends { control: any }>(
     }
     const labelValue = Resolve.data(
       input.control.value.data,
-      composePaths(`${index}`, childLabelProp)
+      composePaths([`${index}`], childLabelProp)
     );
     if (labelValue === undefined || labelValue === null || labelValue === NaN) {
       return '';

From 369b64ae9d710a4db5ec6787244616d85cdc7580 Mon Sep 17 00:00:00 2001
From: LukasBoll <ga24xeg@mytum.de>
Date: Thu, 11 Nov 2021 01:13:31 +0100
Subject: [PATCH 3/9] fix

---
 packages/core/src/util/path.ts                | 7 +++++++
 packages/vue/vue/src/jsonFormsCompositions.ts | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/util/path.ts b/packages/core/src/util/path.ts
index df115cfde..a0d31d392 100644
--- a/packages/core/src/util/path.ts
+++ b/packages/core/src/util/path.ts
@@ -28,7 +28,14 @@ import range from 'lodash/range';
 import { Scopable } from '../models';
 
 export const compose = (path1: string[], path2: string[]) => {
+
+  if (isEmpty(path1)) {
+    return path2;
+  } else if (isEmpty(path2)) {
+    return path1;
+  } else {
     return path1.concat(path2);
+  }
 };
 
 export { compose as composePaths };
diff --git a/packages/vue/vue/src/jsonFormsCompositions.ts b/packages/vue/vue/src/jsonFormsCompositions.ts
index 1cc94b981..95d8fa7f0 100644
--- a/packages/vue/vue/src/jsonFormsCompositions.ts
+++ b/packages/vue/vue/src/jsonFormsCompositions.ts
@@ -63,7 +63,7 @@ export const rendererProps = <U = UISchemaElement>() => ({
   },
   path: {
     required: true as true,
-    type: String
+    type: Array as CompType<string[], ArrayConstructor>,
   },
   enabled: {
     required: false as false,

From d996af7ff2fc7d4b2d6b557c5e90d9f0a0f62f03 Mon Sep 17 00:00:00 2001
From: LukasBoll <ga24xeg@mytum.de>
Date: Mon, 29 Nov 2021 19:01:35 +0100
Subject: [PATCH 4/9] logging

---
 packages/core/src/reducers/core.ts                     | 5 +++++
 packages/core/src/util/path.ts                         | 2 ++
 packages/material/src/complex/MaterialTableControl.tsx | 5 ++++-
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/reducers/core.ts b/packages/core/src/reducers/core.ts
index f82156513..1a95242d3 100644
--- a/packages/core/src/reducers/core.ts
+++ b/packages/core/src/reducers/core.ts
@@ -337,6 +337,7 @@ export const errorsAt = (
   schema: JsonSchema,
   matchPath: (path: string[]) => boolean
 ) => (errors: ErrorObject[]): ErrorObject[] => {
+  console.log("errors: ",errors);
   // Get data paths of oneOf and anyOf errors to later determine whether an error occurred inside a subschema of oneOf or anyOf.
   const combinatorPaths = filter(
     errors,
@@ -344,12 +345,15 @@ export const errorsAt = (
     ).map(error => getControlPath(error));
     
     return filter(errors, error => {
+
       // Filter errors that match any keyword that we don't want to show in the UI
       if (filteredErrorKeywords.indexOf(error.keyword) !== -1) {
         return false;
       }
     const controlPath = getControlPath(error);
+    console.log("controllpath: ", controlPath);
     let result = matchPath(controlPath);
+    console.log("result: ",result);
     // In anyOf and oneOf blocks with "primitive" (i.e. string, number etc.) or array subschemas,
     // we want to make sure that errors are only shown for the correct subschema.
     // Therefore, we compare the error's parent schema with the property's schema.
@@ -363,6 +367,7 @@ export const errorsAt = (
       && combinatorPaths.findIndex(p => contains(instancePath,p)) !== -1) {
       result = result && isEqual(parentSchema, schema);
     }
+    console.log(result);
     return result;
   });
 };
diff --git a/packages/core/src/util/path.ts b/packages/core/src/util/path.ts
index a0d31d392..d0706cb3e 100644
--- a/packages/core/src/util/path.ts
+++ b/packages/core/src/util/path.ts
@@ -90,6 +90,7 @@ export const toId = (path: string[]): string=>{
 }
 
 export const contains = (path1: string[], path2: string[]):boolean =>{
+  console.log("contains");
   if(path1.length<path2.length){
     return false;
   }
@@ -98,5 +99,6 @@ export const contains = (path1: string[], path2: string[]):boolean =>{
       return false;
     }
   })
+  console.log("true");
   return true;
 }
\ No newline at end of file
diff --git a/packages/material/src/complex/MaterialTableControl.tsx b/packages/material/src/complex/MaterialTableControl.tsx
index 853638afe..fdf6f63c6 100644
--- a/packages/material/src/complex/MaterialTableControl.tsx
+++ b/packages/material/src/complex/MaterialTableControl.tsx
@@ -170,7 +170,7 @@ const ctxToNonEmptyCellProps = (
   if(ownProps.schema.type === 'object'){ 
     path.push(ownProps.propName);
   }
-
+  console.log(ctx.core.errors);
   const errors = formatErrorMessage(
     union(
       errorsAt(
@@ -180,6 +180,7 @@ const ctxToNonEmptyCellProps = (
       )(ctx.core.errors).map((error: ErrorObject) => error.message)
     )
   );
+  console.log("errores: ",errors);
   return {
     rowPath: ownProps.rowPath,
     propName: ownProps.propName,
@@ -212,6 +213,7 @@ const NonEmptyCell = (ownProps: OwnPropsOfNonEmptyCell) => {
     cells
   } = ctxToNonEmptyCellProps(ctx, ownProps);
 
+  console.log("errors: ",errors);
   const isValid = isEmpty(errors);
   return (
     <NoBorderTableCell>
@@ -405,6 +407,7 @@ export class MaterialTableControl extends React.Component<
       ? generateCells(TableHeaderCell, schema, path, enabled, cells)
       : undefined;
       console.log("here");
+      console.log("errors: ",errors);
 
     return (
       <Hidden xsUp={!visible}>

From 67ae3dea4f684c8ce8cacab852a09fab62a369b1 Mon Sep 17 00:00:00 2001
From: LukasBoll <ga24xeg@mytum.de>
Date: Thu, 2 Dec 2021 10:44:38 +0100
Subject: [PATCH 5/9] fix errormessage

---
 packages/core/src/reducers/core.ts             | 18 +++++++++---------
 .../src/complex/MaterialTableControl.tsx       |  5 +++--
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/packages/core/src/reducers/core.ts b/packages/core/src/reducers/core.ts
index 1a95242d3..157a48f5a 100644
--- a/packages/core/src/reducers/core.ts
+++ b/packages/core/src/reducers/core.ts
@@ -312,23 +312,22 @@ const getInvalidProperty = (error: ErrorObject): string | undefined => {
 
 export const getControlPath = (error: ErrorObject) => {
   const dataPath = (error as any).dataPath;
+  console.log("datapath: ",dataPath);
   // older AJV version
   if (dataPath) {
-    return dataPath.replace(/\//g, '.').substr(1);
+    return dataPath.split("/\//g").filter((e: string) =>e!=="");
   }
   // dataPath was renamed to instancePath in AJV v8
-  var controlPath: string = error.instancePath;
-
   // change '/' chars to '.'
-  controlPath = controlPath.replace(/\//g, '.');
+  console.log("instancePath: ",error.instancePath);
+  var controlPath: string[] = error.instancePath.split("/").filter(e=> e!=="");
   
   const invalidProperty = getInvalidProperty(error);
-  if (invalidProperty !== undefined && !controlPath.endsWith(invalidProperty)) {
-    controlPath = `${controlPath}.${invalidProperty}`;
+  if (invalidProperty !== undefined && controlPath && controlPath[controlPath.length]!==invalidProperty) {
+    controlPath.push(invalidProperty);
   }
   
-  // remove '.' chars at the beginning of paths
-  controlPath = controlPath.replace(/^./, '');
+  console.log("returnedPath: ",controlPath);
   return controlPath;
 }
 
@@ -400,6 +399,7 @@ const getErrorsAt = (
   errorsAt(instancePath, schema, matchPath)(state.validationMode === 'ValidateAndHide' ? [] : state.errors);
 
 export const errorAt = (instancePath: string[], schema: JsonSchema) =>
-  getErrorsAt(instancePath, schema, path => path === instancePath);
+  getErrorsAt(instancePath, schema, p => {
+    return p.length === instancePath.length && p.every((element,i) => element === instancePath[i])});
 export const subErrorsAt = (instancePath: string[], schema: JsonSchema) =>
   getErrorsAt(instancePath, schema, path => contains(path,instancePath));
diff --git a/packages/material/src/complex/MaterialTableControl.tsx b/packages/material/src/complex/MaterialTableControl.tsx
index fdf6f63c6..5e4e2699a 100644
--- a/packages/material/src/complex/MaterialTableControl.tsx
+++ b/packages/material/src/complex/MaterialTableControl.tsx
@@ -125,7 +125,7 @@ const getValidColumnProps = (scopedSchema: JsonSchema) => {
     );
   }
   // primitives
-  return [''];
+  return [];
 };
 
 export interface EmptyTableProps {
@@ -176,7 +176,8 @@ const ctxToNonEmptyCellProps = (
       errorsAt(
         path,
         ownProps.schema,
-        p => p === path
+        p => {
+          return p.length === path.length && p.every((element,i) => element === path[i])}
       )(ctx.core.errors).map((error: ErrorObject) => error.message)
     )
   );

From ed67367a170bbef28e762af8432e6856134596d1 Mon Sep 17 00:00:00 2001
From: LukasBoll <ga24xeg@mytum.de>
Date: Thu, 2 Dec 2021 10:48:59 +0100
Subject: [PATCH 6/9] revert logging

---
 packages/core/src/reducers/core.ts                     | 5 -----
 packages/core/src/util/path.ts                         | 2 --
 packages/material/src/complex/MaterialTableControl.tsx | 5 +----
 3 files changed, 1 insertion(+), 11 deletions(-)

diff --git a/packages/core/src/reducers/core.ts b/packages/core/src/reducers/core.ts
index 157a48f5a..8d6000900 100644
--- a/packages/core/src/reducers/core.ts
+++ b/packages/core/src/reducers/core.ts
@@ -336,7 +336,6 @@ export const errorsAt = (
   schema: JsonSchema,
   matchPath: (path: string[]) => boolean
 ) => (errors: ErrorObject[]): ErrorObject[] => {
-  console.log("errors: ",errors);
   // Get data paths of oneOf and anyOf errors to later determine whether an error occurred inside a subschema of oneOf or anyOf.
   const combinatorPaths = filter(
     errors,
@@ -344,15 +343,12 @@ export const errorsAt = (
     ).map(error => getControlPath(error));
     
     return filter(errors, error => {
-
       // Filter errors that match any keyword that we don't want to show in the UI
       if (filteredErrorKeywords.indexOf(error.keyword) !== -1) {
         return false;
       }
     const controlPath = getControlPath(error);
-    console.log("controllpath: ", controlPath);
     let result = matchPath(controlPath);
-    console.log("result: ",result);
     // In anyOf and oneOf blocks with "primitive" (i.e. string, number etc.) or array subschemas,
     // we want to make sure that errors are only shown for the correct subschema.
     // Therefore, we compare the error's parent schema with the property's schema.
@@ -366,7 +362,6 @@ export const errorsAt = (
       && combinatorPaths.findIndex(p => contains(instancePath,p)) !== -1) {
       result = result && isEqual(parentSchema, schema);
     }
-    console.log(result);
     return result;
   });
 };
diff --git a/packages/core/src/util/path.ts b/packages/core/src/util/path.ts
index d0706cb3e..a0d31d392 100644
--- a/packages/core/src/util/path.ts
+++ b/packages/core/src/util/path.ts
@@ -90,7 +90,6 @@ export const toId = (path: string[]): string=>{
 }
 
 export const contains = (path1: string[], path2: string[]):boolean =>{
-  console.log("contains");
   if(path1.length<path2.length){
     return false;
   }
@@ -99,6 +98,5 @@ export const contains = (path1: string[], path2: string[]):boolean =>{
       return false;
     }
   })
-  console.log("true");
   return true;
 }
\ No newline at end of file
diff --git a/packages/material/src/complex/MaterialTableControl.tsx b/packages/material/src/complex/MaterialTableControl.tsx
index 5e4e2699a..a3a6f2363 100644
--- a/packages/material/src/complex/MaterialTableControl.tsx
+++ b/packages/material/src/complex/MaterialTableControl.tsx
@@ -170,7 +170,7 @@ const ctxToNonEmptyCellProps = (
   if(ownProps.schema.type === 'object'){ 
     path.push(ownProps.propName);
   }
-  console.log(ctx.core.errors);
+
   const errors = formatErrorMessage(
     union(
       errorsAt(
@@ -181,7 +181,6 @@ const ctxToNonEmptyCellProps = (
       )(ctx.core.errors).map((error: ErrorObject) => error.message)
     )
   );
-  console.log("errores: ",errors);
   return {
     rowPath: ownProps.rowPath,
     propName: ownProps.propName,
@@ -214,7 +213,6 @@ const NonEmptyCell = (ownProps: OwnPropsOfNonEmptyCell) => {
     cells
   } = ctxToNonEmptyCellProps(ctx, ownProps);
 
-  console.log("errors: ",errors);
   const isValid = isEmpty(errors);
   return (
     <NoBorderTableCell>
@@ -408,7 +406,6 @@ export class MaterialTableControl extends React.Component<
       ? generateCells(TableHeaderCell, schema, path, enabled, cells)
       : undefined;
       console.log("here");
-      console.log("errors: ",errors);
 
     return (
       <Hidden xsUp={!visible}>

From 0c483458ea9b93f15e1de906cc333d8dc0cf1830 Mon Sep 17 00:00:00 2001
From: Stefan Dirix <sdirix@eclipsesource.com>
Date: Thu, 2 Dec 2021 16:35:46 +0100
Subject: [PATCH 7/9] Fix Angular issues

---
 packages/angular/src/abstract-control.ts    | 5 ++++-
 packages/angular/src/jsonforms.component.ts | 6 ++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/angular/src/abstract-control.ts b/packages/angular/src/abstract-control.ts
index 122c90c71..82d6276c8 100644
--- a/packages/angular/src/abstract-control.ts
+++ b/packages/angular/src/abstract-control.ts
@@ -43,6 +43,7 @@ import { Subscription } from 'rxjs';
 import { JsonFormsBaseRenderer } from './base.renderer';
 import { JsonFormsAngularService } from './jsonforms.service';
 import merge from 'lodash/merge';
+import { isEqual } from 'lodash';
 @Component({
   template: ''
 })
@@ -126,7 +127,9 @@ export abstract class JsonFormsAbstractControl<
           this.scopedSchema !== undefined ? this.scopedSchema.description : '';
         this.id = props.id;
         this.form.setValue(data);
-        this.propsPath = path;
+        if (!isEqual(this.propsPath, path)) {
+          this.propsPath = path;
+        }
         this.mapAdditionalProps(props);
       }
     });
diff --git a/packages/angular/src/jsonforms.component.ts b/packages/angular/src/jsonforms.component.ts
index 62aac02ac..3abfbe8fd 100644
--- a/packages/angular/src/jsonforms.component.ts
+++ b/packages/angular/src/jsonforms.component.ts
@@ -57,7 +57,7 @@ const areEqual = (prevProps: StatePropsOfJsonFormsRenderer, nextProps: StateProp
     && get(prevProps, 'uischemas.length') === get(nextProps, 'uischemas.length')
     && get(prevProps, 'schema') === get(nextProps, 'schema')
     && isEqual(get(prevProps, 'uischema'), get(nextProps, 'uischema'))
-    && get(prevProps, 'path') === get(nextProps, 'path');
+    && isEqual(get(prevProps, 'path'), get(nextProps, 'path'));
 };
 
 @Directive({
@@ -78,7 +78,9 @@ export class JsonFormsOutlet extends JsonFormsBaseRenderer<UISchemaElement>
 
   @Input()
   set renderProps(renderProps: OwnPropsOfRenderer) {
-    this.path = renderProps.path;
+    if (!isEqual(this.path, renderProps.path)) {
+      this.path = renderProps.path;
+    }
     this.schema = renderProps.schema;
     this.uischema = renderProps.uischema;
     this.update(this.jsonformsService.getState());

From e5086bd35705a5ac74aa91f257df2394b9f601bc Mon Sep 17 00:00:00 2001
From: LukasBoll <ga24xeg@mytum.de>
Date: Tue, 7 Dec 2021 00:35:06 +0100
Subject: [PATCH 8/9] clean up and vue fix

---
 .../angular-material/src/other/object.renderer.ts   |  1 -
 packages/core/src/reducers/core.ts                  |  3 ---
 packages/core/src/util/path.ts                      |  2 +-
 .../additional/MaterialListWithDetailRenderer.tsx   |  1 -
 .../src/complex/MaterialArrayControlRenderer.tsx    |  1 -
 .../src/complex/MaterialEnumArrayRenderer.tsx       |  1 -
 .../material/src/complex/MaterialTableControl.tsx   | 13 +++++--------
 packages/material/src/layouts/ArrayToolbar.tsx      |  1 -
 .../material/src/layouts/ExpandPanelRenderer.tsx    |  5 ++---
 .../material/src/layouts/MaterialArrayLayout.tsx    |  1 -
 .../src/layouts/MaterialArrayLayoutRenderer.tsx     |  1 -
 packages/react/test/renderers/JsonForms.test.tsx    |  4 ++--
 packages/vanilla/src/complex/TableArrayControl.tsx  | 10 +++++-----
 packages/vanilla/src/complex/array/ArrayControl.tsx |  4 ++--
 .../vanilla/test/renderers/InputControl.test.tsx    |  2 +-
 packages/vue/vue/src/components/JsonForms.vue       |  2 +-
 16 files changed, 19 insertions(+), 33 deletions(-)

diff --git a/packages/angular-material/src/other/object.renderer.ts b/packages/angular-material/src/other/object.renderer.ts
index 64a6ccf29..26e4dcb9b 100644
--- a/packages/angular-material/src/other/object.renderer.ts
+++ b/packages/angular-material/src/other/object.renderer.ts
@@ -70,7 +70,6 @@ export class ObjectControlRenderer extends JsonFormsControlWithDetail {
     if (isEmpty(props.path)) {
       this.detailUiSchema.type = 'VerticalLayout';
     } else {
-      console.log(props.path);
       (this.detailUiSchema as GroupLayout).label = props.path.map(element=>startCase(element)).toString();
     }
     if (!this.isEnabled()) {
diff --git a/packages/core/src/reducers/core.ts b/packages/core/src/reducers/core.ts
index 8d6000900..ff3ce3c1d 100644
--- a/packages/core/src/reducers/core.ts
+++ b/packages/core/src/reducers/core.ts
@@ -312,14 +312,12 @@ const getInvalidProperty = (error: ErrorObject): string | undefined => {
 
 export const getControlPath = (error: ErrorObject) => {
   const dataPath = (error as any).dataPath;
-  console.log("datapath: ",dataPath);
   // older AJV version
   if (dataPath) {
     return dataPath.split("/\//g").filter((e: string) =>e!=="");
   }
   // dataPath was renamed to instancePath in AJV v8
   // change '/' chars to '.'
-  console.log("instancePath: ",error.instancePath);
   var controlPath: string[] = error.instancePath.split("/").filter(e=> e!=="");
   
   const invalidProperty = getInvalidProperty(error);
@@ -327,7 +325,6 @@ export const getControlPath = (error: ErrorObject) => {
     controlPath.push(invalidProperty);
   }
   
-  console.log("returnedPath: ",controlPath);
   return controlPath;
 }
 
diff --git a/packages/core/src/util/path.ts b/packages/core/src/util/path.ts
index a0d31d392..405ad87d1 100644
--- a/packages/core/src/util/path.ts
+++ b/packages/core/src/util/path.ts
@@ -85,7 +85,7 @@ export const composeWithUi = (scopableUi: Scopable, path: string[]): string[] =>
   return isEmpty(segments) ? path : compose(path, segments);
 };
 
-export const toId = (path: string[]): string=>{
+export const toKey = (path: string[]): string=>{
   return path.join('');
 }
 
diff --git a/packages/material/src/additional/MaterialListWithDetailRenderer.tsx b/packages/material/src/additional/MaterialListWithDetailRenderer.tsx
index 7e8182519..6a4133884 100644
--- a/packages/material/src/additional/MaterialListWithDetailRenderer.tsx
+++ b/packages/material/src/additional/MaterialListWithDetailRenderer.tsx
@@ -95,7 +95,6 @@ export const MaterialListWithDetailRenderer = ({
     [uischemas, schema, uischema.scope, path, uischema]
   );
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
-  console.log("here");
 
   return (
     <Hidden xsUp={!visible}>
diff --git a/packages/material/src/complex/MaterialArrayControlRenderer.tsx b/packages/material/src/complex/MaterialArrayControlRenderer.tsx
index 76211e8f3..95afdff80 100644
--- a/packages/material/src/complex/MaterialArrayControlRenderer.tsx
+++ b/packages/material/src/complex/MaterialArrayControlRenderer.tsx
@@ -47,7 +47,6 @@ export const MaterialArrayControlRenderer = (props: ArrayLayoutProps) => {
     setOpen(false);
   }, [setOpen, path, rowData]);
   const deleteClose = useCallback(() => setOpen(false), [setOpen]);
-  console.log("here");
 
   return (
     <Hidden xsUp={!visible}>
diff --git a/packages/material/src/complex/MaterialEnumArrayRenderer.tsx b/packages/material/src/complex/MaterialEnumArrayRenderer.tsx
index 2e65d650d..aca8beac0 100644
--- a/packages/material/src/complex/MaterialEnumArrayRenderer.tsx
+++ b/packages/material/src/complex/MaterialEnumArrayRenderer.tsx
@@ -37,7 +37,6 @@ export const MaterialEnumArrayRenderer = ({
   removeItem,
   ...otherProps
 }: ControlProps & OwnPropsOfEnum & DispatchPropsOfMultiEnumControl) => {
-  console.log("here");
 
   return (
     <Hidden xlUp={!visible}>
diff --git a/packages/material/src/complex/MaterialTableControl.tsx b/packages/material/src/complex/MaterialTableControl.tsx
index a3a6f2363..1a4d59f5a 100644
--- a/packages/material/src/complex/MaterialTableControl.tsx
+++ b/packages/material/src/complex/MaterialTableControl.tsx
@@ -53,7 +53,7 @@ import {
   Resolve,
   JsonFormsRendererRegistryEntry,
   JsonFormsCellRendererRegistryEntry,
-  toId
+  toKey
 } from '@jsonforms/core';
 import IconButton from '@material-ui/core/IconButton';
 import DeleteIcon from '@material-ui/icons/Delete';
@@ -104,7 +104,7 @@ const generateCells = (
         enabled,
         cells
       };
-      return <Cell key={toId(cellPath)} {...props} />;
+      return <Cell key={toKey(cellPath)} {...props} />;
     });
   } else {
     // primitives
@@ -114,7 +114,7 @@ const generateCells = (
       cellPath: rowPath,
       enabled
     };
-    return <Cell key={toId(rowPath)} {...props} />;
+    return <Cell key={toKey(rowPath)} {...props} />;
   }
 };
 
@@ -271,10 +271,9 @@ const NonEmptyRow = React.memo(
     enabled,
     cells
   }: NonEmptyRowProps & WithDeleteDialogSupport) => {
-    console.log("here");
 
     return (
-      <TableRow key={toId(childPath)} hover>
+      <TableRow key={toKey(childPath)} hover>
         {generateCells(NonEmptyCell, schema, childPath, enabled, cells)}
         {enabled ? (
           <NoBorderTableCell
@@ -353,7 +352,6 @@ const TableRows = ({
   }
 
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
-  console.log("here");
 
   return (
     <React.Fragment>
@@ -362,7 +360,7 @@ const TableRows = ({
 
         return (
           <NonEmptyRow
-            key={toId(childPath)}
+            key={toKey(childPath)}
             childPath={childPath}
             rowIndex={index}
             schema={schema}
@@ -405,7 +403,6 @@ export class MaterialTableControl extends React.Component<
     const headerCells: any = isObjectSchema
       ? generateCells(TableHeaderCell, schema, path, enabled, cells)
       : undefined;
-      console.log("here");
 
     return (
       <Hidden xsUp={!visible}>
diff --git a/packages/material/src/layouts/ArrayToolbar.tsx b/packages/material/src/layouts/ArrayToolbar.tsx
index 5d2e85e82..e861e0c4a 100644
--- a/packages/material/src/layouts/ArrayToolbar.tsx
+++ b/packages/material/src/layouts/ArrayToolbar.tsx
@@ -20,7 +20,6 @@ export const ArrayLayoutToolbar = React.memo(
     path,
     createDefault
   }: ArrayLayoutToolbarProps) => {
-    console.log("here");
     return (
       <Toolbar disableGutters={true}>
         <Grid container alignItems='center' justify='space-between'>
diff --git a/packages/material/src/layouts/ExpandPanelRenderer.tsx b/packages/material/src/layouts/ExpandPanelRenderer.tsx
index 9b163d7a3..e31d5cba4 100644
--- a/packages/material/src/layouts/ExpandPanelRenderer.tsx
+++ b/packages/material/src/layouts/ExpandPanelRenderer.tsx
@@ -22,7 +22,7 @@ import {
   getFirstPrimitiveProp,
   createId,
   removeId,
-  toId
+  toKey
 } from '@jsonforms/core';
 import IconButton from '@material-ui/core/IconButton';
 import Accordion from '@material-ui/core/Accordion';
@@ -193,7 +193,7 @@ const ExpandPanelRenderer = (props: ExpandPanelProps) => {
           schema={schema}
           uischema={foundUISchema}
           path={childPath}
-          key={toId(childPath)}
+          key={toKey(childPath)}
           renderers={renderers}
           cells={cells}
         />
@@ -262,7 +262,6 @@ export const withContextToExpandPanelProps = (
   const childLabel = childLabelProp
     ? get(childData, childLabelProp, '')
     : get(childData, getFirstPrimitiveProp(schema), '');
-    console.log("here");
   return (
     <Component
       {...props}
diff --git a/packages/material/src/layouts/MaterialArrayLayout.tsx b/packages/material/src/layouts/MaterialArrayLayout.tsx
index ca6644fb3..a068ff726 100644
--- a/packages/material/src/layouts/MaterialArrayLayout.tsx
+++ b/packages/material/src/layouts/MaterialArrayLayout.tsx
@@ -73,7 +73,6 @@ export class MaterialArrayLayout extends React.PureComponent<
       config,
       this.props.uischema.options
     );
-    console.log("here");
 
     return (
       <div>
diff --git a/packages/material/src/layouts/MaterialArrayLayoutRenderer.tsx b/packages/material/src/layouts/MaterialArrayLayoutRenderer.tsx
index 3fc8bd2a5..017667902 100644
--- a/packages/material/src/layouts/MaterialArrayLayoutRenderer.tsx
+++ b/packages/material/src/layouts/MaterialArrayLayoutRenderer.tsx
@@ -53,7 +53,6 @@ export const MaterialArrayLayoutRenderer = ({
   const addItemCb = useCallback((p: string[], value: any) => addItem(p, value), [
     addItem
   ]);
-  console.log("here");
 
   return (
     <Hidden xsUp={!visible}>
diff --git a/packages/react/test/renderers/JsonForms.test.tsx b/packages/react/test/renderers/JsonForms.test.tsx
index b70a0d31f..426bbe408 100644
--- a/packages/react/test/renderers/JsonForms.test.tsx
+++ b/packages/react/test/renderers/JsonForms.test.tsx
@@ -297,7 +297,7 @@ test('render schema with $ref', () => {
 
   const wrapper = mount(
     <JsonFormsDispatchRenderer
-      path={''}
+      path={[]}
       uischema={fixture.uischema}
       schema={schemaWithRef}
       renderers={renderers}
@@ -355,7 +355,7 @@ test.skip('updates schema with ref', () => {
 
   const wrapper = shallow(
     <JsonFormsDispatchRenderer
-      path={''}
+      path={[]}
       uischema={fixture.uischema}
       schema={fixture.schema}
       renderers={renderers}
diff --git a/packages/vanilla/src/complex/TableArrayControl.tsx b/packages/vanilla/src/complex/TableArrayControl.tsx
index bbefb2b0b..73b01290f 100644
--- a/packages/vanilla/src/complex/TableArrayControl.tsx
+++ b/packages/vanilla/src/complex/TableArrayControl.tsx
@@ -40,7 +40,7 @@ import {
   Resolve,
   Test,
   getControlPath,
-  toId
+  toKey
 } from '@jsonforms/core';
 import { DispatchCell, withJsonFormsArrayControlProps } from '@jsonforms/react';
 import { withVanillaControlProps } from '../util';
@@ -146,7 +146,7 @@ class TableArrayControl extends React.Component<ArrayControlProps & VanillaRende
                   // TODO
                   const errorsPerEntry: any[] = filter(childErrors, error => {
                     const errorPath = getControlPath(error);
-                    return errorPath.startsWith(childPath);
+                    return errorPath.length >= childPath.length && childPath.every((element,i) => element === errorPath[i])
                   });
 
                   const validationClassName = getStyleAsClassName('array.validation');
@@ -156,7 +156,7 @@ class TableArrayControl extends React.Component<ArrayControlProps & VanillaRende
                     validationClassName;
 
                   return (
-                    <tr key={toId(childPath)}>
+                    <tr key={toKey(childPath)}>
                       {schema.properties ? (
                         fpflow(
                           fpkeys,
@@ -170,7 +170,7 @@ class TableArrayControl extends React.Component<ArrayControlProps & VanillaRende
                             );
 
                             return (
-                              <td key={toId(childPropPath)}>
+                              <td key={toKey(childPropPath)}>
                                 <DispatchCell
                                   schema={Resolve.schema(schema, `#/properties/${prop}`, rootSchema)}
                                   uischema={createControlElement(prop)}
@@ -182,7 +182,7 @@ class TableArrayControl extends React.Component<ArrayControlProps & VanillaRende
                         )(schema.properties)
                       ) : (
                           <td
-                            key={toId(Paths.compose(
+                            key={toKey(Paths.compose(
                               childPath,
                               [index.toString()]
                             ))}
diff --git a/packages/vanilla/src/complex/array/ArrayControl.tsx b/packages/vanilla/src/complex/array/ArrayControl.tsx
index 1e022646c..a8090bd32 100644
--- a/packages/vanilla/src/complex/array/ArrayControl.tsx
+++ b/packages/vanilla/src/complex/array/ArrayControl.tsx
@@ -24,7 +24,7 @@
 */
 import range from 'lodash/range';
 import React, { useMemo } from 'react';
-import { ArrayControlProps, composePaths, createDefaultValue, findUISchema, toId } from '@jsonforms/core';
+import { ArrayControlProps, composePaths, createDefaultValue, findUISchema, toKey } from '@jsonforms/core';
 import { JsonFormsDispatch } from '@jsonforms/react';
 import { VanillaRendererProps } from '../../index';
 
@@ -65,7 +65,7 @@ export const ArrayControl = ({
                   schema={schema}
                   uischema={childUiSchema || uischema}
                   path={childPath}
-                  key={toId(childPath)}
+                  key={toKey(childPath)}
                   renderers={renderers}
                 />
               );
diff --git a/packages/vanilla/test/renderers/InputControl.test.tsx b/packages/vanilla/test/renderers/InputControl.test.tsx
index b18eb6e93..715cd0d70 100644
--- a/packages/vanilla/test/renderers/InputControl.test.tsx
+++ b/packages/vanilla/test/renderers/InputControl.test.tsx
@@ -196,7 +196,7 @@ describe('Input control', () => {
         <InputControl
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path={''}
+          path={[]}
           visible={false}
         />
       </JsonFormsStateProvider>
diff --git a/packages/vue/vue/src/components/JsonForms.vue b/packages/vue/vue/src/components/JsonForms.vue
index 73ad27cdc..37e8a7990 100644
--- a/packages/vue/vue/src/components/JsonForms.vue
+++ b/packages/vue/vue/src/components/JsonForms.vue
@@ -2,7 +2,7 @@
   <dispatch-renderer
     v-bind:schema="jsonforms.core.schema"
     v-bind:uischema="jsonforms.core.uischema"
-    v-bind:path="''"
+    v-bind:path="[]"
   />
 </template>
 

From 5f947f79d5da27f2a78303962e5fb47a5f3d961a Mon Sep 17 00:00:00 2001
From: LukasBoll <ga24xeg@mytum.de>
Date: Tue, 7 Dec 2021 02:46:23 +0100
Subject: [PATCH 9/9] adjust tests

---
 packages/core/test/reducers/core.test.ts | 43 ++++++++++++------------
 1 file changed, 22 insertions(+), 21 deletions(-)

diff --git a/packages/core/test/reducers/core.test.ts b/packages/core/test/reducers/core.test.ts
index ab5e8a5e3..9ef324062 100644
--- a/packages/core/test/reducers/core.test.ts
+++ b/packages/core/test/reducers/core.test.ts
@@ -272,7 +272,7 @@ test('core reducer - update - undefined data should update for given path', t =>
 
   const after = coreReducer(
     before,
-    update('foo', _ => {
+    update(['foo'], _ => {
       return 'bar';
     })
   );
@@ -379,7 +379,7 @@ test('core reducer - update - empty path should update root state', t => {
 
   const after = coreReducer(
     before,
-    update('', _ => {
+    update([], _ => {
       return { foo: 'xyz' };
     })
   );
@@ -420,7 +420,7 @@ test('core reducer - update - providing a path should update data only belonging
 
   const after = coreReducer(
     before,
-    update('color', _ => {
+    update(['color'], _ => {
       return 'Green';
     })
   );
@@ -460,7 +460,7 @@ test('core reducer - update - should update errors', t => {
 
   const after = coreReducer(
     before,
-    update('color', _ => {
+    update(['color'], _ => {
       return 'Yellow';
     })
   );
@@ -552,7 +552,7 @@ test('errorAt filters enum', t => {
     uischema: undefined,
     errors
   };
-  const filtered = errorAt('foo', schema.properties.foo)(state);
+  const filtered = errorAt(['foo'], schema.properties.foo)(state);
   t.is(filtered.length, 1);
   t.deepEqual(filtered[0], state.errors[1]);
 });
@@ -583,7 +583,7 @@ test('errorAt filters required', t => {
     uischema: undefined,
     errors
   };
-  const filtered = errorAt('foo', schema.properties.foo)(state);
+  const filtered = errorAt(['foo'], schema.properties.foo)(state);
   t.is(filtered.length, 1);
   t.deepEqual(filtered[0], state.errors[1]);
 });
@@ -633,7 +633,7 @@ test('errorAt filters required in oneOf object', t => {
     errors
   };
   const filtered = errorAt(
-    'fooOrBar.foo',
+    ['fooOrBar','foo'],
     schema.properties.fooOrBar.oneOf[0].properties.foo
   )(state);
   t.is(filtered.length, 1);
@@ -685,7 +685,7 @@ test('errorAt filters required in anyOf object', t => {
     errors
   };
   const filtered = errorAt(
-    'fooOrBar.foo',
+    ['fooOrBar','foo'],
     schema.properties.fooOrBar.anyOf[0].properties.foo
   )(state);
   t.is(filtered.length, 1);
@@ -732,7 +732,7 @@ test('errorAt filters array minItems', t => {
     uischema: undefined,
     errors
   };
-  const filtered = errorAt('colours', schema.properties.colours)(state);
+  const filtered = errorAt(['colours'], schema.properties.colours)(state);
   t.is(filtered.length, 1);
   t.deepEqual(filtered[0], state.errors[1]);
 });
@@ -777,7 +777,7 @@ test('errorAt filters array inner value', t => {
     uischema: undefined,
     errors
   };
-  const filtered = errorAt('colours.0', schema.properties.colours)(state);
+  const filtered = errorAt(['colours','0'], schema.properties.colours)(state);
   t.is(filtered.length, 1);
   t.deepEqual(filtered[0], state.errors[1]);
 });
@@ -814,7 +814,7 @@ test('errorAt filters oneOf simple', t => {
     errors
   };
   const filtered = errorAt(
-    'coloursOrNumbers',
+    ['coloursOrNumbers'],
     schema.properties.coloursOrNumbers.oneOf[1]
   )(state);
   t.is(filtered.length, 1);
@@ -853,7 +853,7 @@ test('errorAt filters anyOf simple', t => {
     errors
   };
   const filtered = errorAt(
-    'coloursOrNumbers',
+    ['coloursOrNumbers'],
     schema.properties.coloursOrNumbers.anyOf[1]
   )(state);
   t.is(filtered.length, 1);
@@ -907,7 +907,7 @@ test('errorAt filters oneOf objects', t => {
     errors
   };
   const filtered = errorAt(
-    'coloursOrNumbers.colour',
+    ['coloursOrNumbers','colour'],
     schema.properties.coloursOrNumbers.oneOf[1].properties.colour
   )(state);
   t.is(filtered.length, 1);
@@ -959,7 +959,7 @@ test('errorAt filters oneOf objects same properties', t => {
     errors
   };
   const filtered = errorAt(
-    'coloursOrNumbers.colourOrNumber',
+    ['coloursOrNumbers','colourOrNumber'],
     schema.properties.coloursOrNumbers.oneOf[1].properties.colourOrNumber
   )(state);
   t.is(filtered.length, 1);
@@ -1008,7 +1008,7 @@ test('errorAt filters oneOf array', t => {
     errors
   };
   const filtered = errorAt(
-    'coloursOrNumbers',
+    ['coloursOrNumbers'],
     schema.properties.coloursOrNumbers.oneOf[1]
   )(state);
   t.is(filtered.length, 1);
@@ -1057,7 +1057,7 @@ test('errorAt filters oneOf array inner', t => {
     errors
   };
   const filtered = errorAt(
-    'coloursOrNumbers',
+    ['coloursOrNumbers'],
     schema.properties.coloursOrNumbers.oneOf[1]
   )(state);
   t.is(filtered.length, 0);
@@ -1104,9 +1104,10 @@ test('subErrorsAt filters array inner', t => {
     errors
   };
   const filtered = subErrorsAt(
-    'colours',
+    ['colours'],
     schema.properties.colours.items as JsonSchema
   )(state);
+  console.log("fillterreeed: ",filtered);
   t.is(filtered.length, 1);
   t.deepEqual(filtered[0], state.errors[1]);
 });
@@ -1153,7 +1154,7 @@ test('subErrorsAt filters oneOf array inner', t => {
     errors
   };
   const filtered = subErrorsAt(
-    'coloursOrNumbers',
+    ['coloursOrNumbers'],
     schema.properties.coloursOrNumbers.oneOf[1].items as JsonSchema
   )(state);
   t.is(filtered.length, 1);
@@ -1179,7 +1180,7 @@ test('errorAt respects hide validation mode', t => {
     init(data, schema, undefined, { validationMode: 'ValidateAndHide' })
   );
   t.is(core.errors.length, 1);
-  t.is(errorAt('animal', schema)(core).length, 0);
+  t.is(errorAt(['animal'], schema)(core).length, 0);
 })
 
 test('core reducer - setValidationMode - No validation should not produce errors', t => {
@@ -1346,7 +1347,7 @@ test('core reducer - update - NoValidation should not produce errors', t => {
 
   const after: JsonFormsCore = coreReducer(
     before,
-    update('animal', () => 100)
+    update(['animal'], () => 100)
   );
   t.is(after.errors.length, 0);
 });
@@ -1373,7 +1374,7 @@ test('core reducer - update - ValidateAndHide should produce errors', t => {
 
   const after: JsonFormsCore = coreReducer(
     before,
-    update('animal', () => 100)
+    update(['animal'], () => 100)
   );
   t.is(after.errors.length, 1);
 });