@json-layout/core 0.21.0 → 0.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-layout/core",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "description": "Compilation and state management utilities for JSON Layout.",
   "type": "module",
   "exports": {

package/src/compile/index.js

@@ -9,11 +9,11 @@ import MarkdownIt from 'markdown-it'
 import { produce } from 'immer'
 import i18n from '../i18n/index.js'
 import { makeSkeletonTree } from './skeleton-tree.js'
-import { resolveRefs } from './utils/resolve-refs.js'
+import { resolveLocaleRefs } from './utils/resolve-refs.js'
 import clone from '../utils/clone.js'
 import { standardComponents } from '@json-layout/vocabulary'
 
-export { resolveRefs } from './utils/resolve-refs.js'
+export { resolveLocaleRefs } from './utils/resolve-refs.js'
 
 /**
  * @typedef {import('./types.js').SkeletonTree} SkeletonTree
@@ -103,9 +103,8 @@ export function compile (_schema, partialOptions = {}) {
   const options = fillOptions(partialOptions)
 
   const schema = /** @type {import('ajv').SchemaObject} */(clone(_schema))
-
   schema.$id = schema.$id ?? '_jl'
-  resolveRefs(schema, options.ajv, options.locale)
+  const getJSONRef = resolveLocaleRefs(schema, options.ajv, options.locale)
 
   /** @type {string[]} */
   const validatePointers = []
@@ -115,18 +114,26 @@ export function compile (_schema, partialOptions = {}) {
   const expressionsDefinitions = []
   /** @type {Record<string, string[]>} */
   const validationErrors = {}
-
-  const skeletonTree = makeSkeletonTree(
+  /** @type {Record<string, import('./types.js').SkeletonTree>} */
+  const skeletonTrees = {}
+
+  // makeSkeletonTree also mutates the schema (adding some error messages)
+  const mainTreePointer = `${schema.$id}#`
+  // @ts-ignore
+  skeletonTrees[mainTreePointer] = 'recursing'
+  skeletonTrees[mainTreePointer] = makeSkeletonTree(
     schema,
+    schema.$id,
     options,
+    getJSONRef,
+    skeletonTrees,
     validatePointers,
     validationErrors,
     normalizedLayouts,
     expressionsDefinitions,
-    `${schema.$id}#`,
+    mainTreePointer,
     'main'
   )
-
   options.ajv.addSchema(schema)
 
   const uriResolver = options.ajv.opts.uriResolver
@@ -168,7 +175,8 @@ export function compile (_schema, partialOptions = {}) {
   return {
     options,
     schema,
-    skeletonTree,
+    mainTree: mainTreePointer,
+    skeletonTrees,
     validates,
     validationErrors,
     normalizedLayouts,

package/src/compile/serialize.js

@@ -79,7 +79,8 @@ export const exportLocalizeErrors = localizeErrors;\n` + code
 
   const ast = parseModule(code)
   ast.exports.compiledLayout = {
-    skeletonTree: compiledLayout.skeletonTree,
+    mainTree: compiledLayout.mainTree,
+    skeletonTrees: clone(compiledLayout.skeletonTrees),
     normalizedLayouts: clone(compiledLayout.normalizedLayouts),
     validates: {},
     validationErrors: compiledLayout.validationErrors,

package/src/compile/skeleton-node.js

@@ -1,16 +1,20 @@
 // import Debug from 'debug'
 import { normalizeLayoutFragment, isSwitchStruct, isGetItemsExpression, isGetItemsFetch, isItemsLayout, getSchemaFragmentType } from '@json-layout/vocabulary'
 import { makeSkeletonTree } from './skeleton-tree.js'
+import { partialResolveRefs } from './utils/resolve-refs.js'
 
 /**
- * @param {any} schema
+ * @param {any} rawSchema
+ * @param {string} sourceSchemaId
  * @param {import('./index.js').CompileOptions} options
+ * @param {(schemaId: string, ref: string) => [any, string, string]} getJSONRef
+ * @param {Record<string, import('./types.js').SkeletonTree>} skeletonTrees
  * @param {string[]} validates
  * @param {Record<string, string[]>} validationErrors
  * @param {Record<string, import('@json-layout/vocabulary').NormalizedLayout>} normalizedLayouts
  * @param {import('@json-layout/vocabulary').Expression[]} expressions
  * @param {string | number} key
- * @param {string} pointer
+ * @param {string} currentPointer
  * @param {string | null} parentPointer
  * @param {boolean} required
  * @param {string} [condition]
@@ -19,24 +23,37 @@ import { makeSkeletonTree } from './skeleton-tree.js'
  * @returns {import('./types.js').SkeletonNode}
  */
 export function makeSkeletonNode (
-  schema,
+  rawSchema,
+  sourceSchemaId,
   options,
+  getJSONRef,
+  skeletonTrees,
   validates,
   validationErrors,
   normalizedLayouts,
   expressions,
   key,
-  pointer,
+  currentPointer,
   parentPointer,
   required,
   condition,
   dependent,
   knownType
 ) {
+  let schemaId = sourceSchemaId
+  let schema = rawSchema
+  let pointer = currentPointer
+  let refFragment
+  if (schema.$ref) {
+    [refFragment, schemaId, pointer] = getJSONRef(sourceSchemaId, schema.$ref)
+    schema = {...rawSchema, ...refFragment}
+    delete schema.$ref
+  }
+  schema = partialResolveRefs(schema, schemaId, getJSONRef)
   const { type, nullable } = knownType ? { type: knownType, nullable: false } : getSchemaFragmentType(schema)
 
   // improve on ajv error messages based on ajv-errors (https://ajv.js.org/packages/ajv-errors.html)
-  schema.errorMessage = schema.errorMessage ?? {}
+  rawSchema.errorMessage = rawSchema.errorMessage ?? {}
   if (!normalizedLayouts[pointer]) {
     const normalizationResult = normalizeLayoutFragment(
       /** @type {import('@json-layout/vocabulary').SchemaFragment} */(schema),
@@ -138,7 +155,10 @@ export function makeSkeletonNode (
         const dependent = schema.dependentRequired && Object.values(schema.dependentRequired).some(dependentProperties => dependentProperties.includes(propertyKey))
         node.children.push(makeSkeletonNode(
           schema.properties[propertyKey],
+          schemaId,
           options,
+          getJSONRef,
+          skeletonTrees,
           validates,
           validationErrors,
           normalizedLayouts,
@@ -150,20 +170,16 @@ export function makeSkeletonNode (
           undefined,
           dependent
         ))
-        if (schema?.required?.includes(propertyKey)) {
-          schema.errorMessage.required = schema.errorMessage.required ?? {}
-          schema.errorMessage.required[propertyKey] = options.messages.errorRequired
-        }
-        if (schema.dependentRequired && Object.keys(schema.dependentRequired).includes(propertyKey)) {
-          schema.errorMessage.dependentRequired = options.messages.errorRequired
-        }
 
         if (schema.dependentSchemas?.[propertyKey] || (schema.dependencies?.[propertyKey] && !Array.isArray(schema.dependencies[propertyKey]))) {
           const dependentSchema = schema.dependentSchemas?.[propertyKey] ?? schema.dependencies[propertyKey]
           const dependentPointer = schema.dependentSchemas?.[propertyKey] ? `${pointer}/dependentSchemas/${propertyKey}` : `${pointer}/dependencies/${propertyKey}`
           node.children.push(makeSkeletonNode(
             dependentSchema,
+            schemaId,
             options,
+            getJSONRef,
+            skeletonTrees,
             validates,
             validationErrors,
             normalizedLayouts,
@@ -184,7 +200,10 @@ export function makeSkeletonNode (
       for (let i = 0; i < schema.allOf.length; i++) {
         const allOfNode = makeSkeletonNode(
           schema.allOf[i],
+          schemaId,
           options,
+          getJSONRef,
+          skeletonTrees,
           validates,
           validationErrors,
           normalizedLayouts,
@@ -220,23 +239,32 @@ export function makeSkeletonNode (
           validationErrors[oneOfPointer.replace('_jl#', '/')] = normalizationResult.errors
         }
       }
-      /** @type {import('./types.js').SkeletonTree[]} */
+      /** @type {string[]} */
       const childrenTrees = []
       /** @type {string[]} */
       for (let i = 0; i < schema.oneOf.length; i++) {
         if (!schema.oneOf[i].type) schema.oneOf[i].type = type
         const title = schema.oneOf[i].title ?? `option ${i}`
         delete schema.oneOf[i].title
-        childrenTrees.push(makeSkeletonTree(
-          schema.oneOf[i],
-          options,
-          validates,
-          validationErrors,
-          normalizedLayouts,
-          expressions,
-          `${oneOfPointer}/${i}`,
-          title
-        ))
+        const childTreePointer = `${oneOfPointer}/${i}`
+        if (!skeletonTrees[childTreePointer]) {
+          // @ts-ignore
+          skeletonTrees[childTreePointer] = 'recursing'
+          skeletonTrees[childTreePointer] = makeSkeletonTree(
+            schema.oneOf[i],
+            schemaId,
+            options,
+            getJSONRef,
+            skeletonTrees,
+            validates,
+            validationErrors,
+            normalizedLayouts,
+            expressions,
+            childTreePointer,
+            title
+          )
+        }
+        childrenTrees.push(childTreePointer)
       }
       node.children = node.children ?? []
       node.children.push({
@@ -244,7 +272,7 @@ export function makeSkeletonNode (
         pointer: `${pointer}/oneOf`,
         parentPointer: pointer,
         childrenTrees,
-        pure: childrenTrees[0].root.pure,
+        pure: skeletonTrees[childrenTrees[0]]?.root.pure,
         propertyKeys: [],
         roPropertyKeys: []
       })
@@ -257,7 +285,10 @@ export function makeSkeletonNode (
         node.children = node.children ?? []
         node.children.push(makeSkeletonNode(
           schema.then,
+          schemaId,
           options,
+          getJSONRef,
+          skeletonTrees,
           validates,
           validationErrors,
           normalizedLayouts,
@@ -275,7 +306,10 @@ export function makeSkeletonNode (
         node.children = node.children ?? []
         node.children.push(makeSkeletonNode(
           schema.else,
+          schemaId,
           options,
+          getJSONRef,
+          skeletonTrees,
           validates,
           validationErrors,
           normalizedLayouts,
@@ -290,6 +324,16 @@ export function makeSkeletonNode (
         ))
       }
     }
+
+    for (const propertyKey of node.propertyKeys) {
+      if (schema?.required?.includes(propertyKey)) {
+        schema.errorMessage.required = schema.errorMessage.required ?? {}
+        schema.errorMessage.required[propertyKey] = options.messages.errorRequired
+      }
+      if (schema.dependentRequired && Object.keys(schema.dependentRequired).includes(propertyKey)) {
+        schema.errorMessage.dependentRequired = options.messages.errorRequired
+      }
+    }
   }
 
   if (type === 'array' && schema.items) {
@@ -297,7 +341,10 @@ export function makeSkeletonNode (
       node.children = schema.items.map((/** @type {any} */ itemSchema, /** @type {number} */ i) => {
         return makeSkeletonNode(
           itemSchema,
+          schemaId,
           options,
+          getJSONRef,
+          skeletonTrees,
           validates,
           validationErrors,
           normalizedLayouts,
@@ -309,23 +356,34 @@ export function makeSkeletonNode (
         )
       })
     } else {
-      node.childrenTrees = [
-        makeSkeletonTree(
+      const childTreePointer = `${pointer}/items`
+      if (!skeletonTrees[childTreePointer]) {
+        // @ts-ignore
+        skeletonTrees[childTreePointer] = 'recursing'
+        skeletonTrees[childTreePointer] = makeSkeletonTree(
           schema.items,
+          schemaId,
           options,
+          getJSONRef,
+          skeletonTrees,
           validates,
           validationErrors,
           normalizedLayouts,
           expressions,
-          `${pointer}/items`,
+          childTreePointer,
           schema.items.title
         )
-      ]
+      }
+      node.childrenTrees = [childTreePointer]
     }
   }
 
-  for (const child of node.children || []) if (!child.pure) node.pure = false
-  for (const childTree of node.childrenTrees || []) if (!childTree.root.pure) node.pure = false
+  for (const child of node.children || []) {
+    if (!child.pure) node.pure = false
+  }
+  for (const childTree of node.childrenTrees || []) {
+    if (!skeletonTrees[childTree]?.root?.pure) node.pure = false
+  }
 
   return node
 }

package/src/compile/skeleton-tree.js

@@ -5,7 +5,10 @@ import { makeSkeletonNode } from './skeleton-node.js'
 
 /**
  * @param {any} schema
+ * @param {string} schemaId
  * @param {import('./index.js').CompileOptions} options
+ * @param {(schemaId: string, ref: string) => [any, string, string]} getJSONRef
+ * @param {Record<string, import('./types.js').SkeletonTree>} skeletonTrees
  * @param {string[]} validates
  * @param {Record<string, string[]>} validationErrors
  * @param {Record<string, import('@json-layout/vocabulary').NormalizedLayout>} normalizedLayouts
@@ -16,7 +19,10 @@ import { makeSkeletonNode } from './skeleton-node.js'
  */
 export function makeSkeletonTree (
   schema,
+  schemaId,
   options,
+  getJSONRef,
+  skeletonTrees,
   validates,
   validationErrors,
   normalizedLayouts,
@@ -24,7 +30,21 @@ export function makeSkeletonTree (
   pointer,
   title
 ) {
-  const root = makeSkeletonNode(schema, options, validates, validationErrors, normalizedLayouts, expressions, '', pointer, null, true)
-  validates.push(pointer)
+  const root = makeSkeletonNode(
+    schema,
+    schemaId,
+    options,
+    getJSONRef,
+    skeletonTrees,
+    validates,
+    validationErrors,
+    normalizedLayouts,
+    expressions,
+    '',
+    pointer,
+    null,
+    true
+  )
+  validates.push(root.pointer)
   return { title, root }
 }

package/src/compile/types.ts

@@ -41,7 +41,8 @@ export type PartialCompileOptions = Partial<Omit<CompileOptions, 'messages'>> &
 export interface CompiledLayout {
   options?: CompileOptions
   schema?: SchemaObject
-  skeletonTree: SkeletonTree
+  mainTree: string,
+  skeletonTrees: Record<string, SkeletonTree>
   validates: Record<string, ValidateFunction>
   validationErrors: Record<string, string[]>
   normalizedLayouts: Record<string, NormalizedLayout>
@@ -70,7 +71,7 @@ export interface SkeletonNode {
   roPropertyKeys: string[]
   condition?: Expression
   children?: SkeletonNode[] // optional children in the case of arrays and object nodes
-  childrenTrees?: SkeletonTree[] // other trees that can be instantiated with separate validation (for example in the case of new array items of oneOfs, etc)
+  childrenTrees?: string[] // other trees that can be instantiated with separate validation (for example in the case of new array items of oneOfs, etc)
   required?: boolean
   nullable?: boolean
 }

package/src/compile/utils/resolve-refs.js

@@ -1,69 +1,130 @@
 import ajvModule from 'ajv/dist/2019.js'
-
-const Ajv = ajvModule.default
+import clone from '../../utils/clone.js'
 
 /**
  * @param {Record<string, import('ajv').SchemaObject>} schemas
- * @param {string} ref
  * @param {ajvModule.default} ajv
- * @returns {[any, string]}
+ * @returns {(schemaId: string, ref: string) => [any, string, string]}
  */
-const getJSONRef = (schemas, ref, ajv) => {
-  const [schemaId, pointer] = ref.split('#')
-  schemas[schemaId] = schemas[schemaId] ?? (ajv.getSchema(schemaId)?.schema)
-  if (!schemas[schemaId]) throw new Error(`reference not found ${schemaId}`)
-  const pointerParts = pointer.split('/').filter(p => !!p)
-  const { value: fragment } = pointerParts.reduce((a, pointerPart) => {
-    a.path.push(pointerPart)
-    if (!(pointerPart in a.value)) throw new Error(`reference not found ${schemaId}#${a.path.join('/')}`)
-    a.value = a.value[pointerPart]
-    return a
-  }, { path: ['/'], value: schemas[schemaId] })
-  return [fragment, schemaId]
+const prepareGetJSONRef = (schemas, ajv) => 
+{
+  return (sourceSchemaId, ref) => {
+    const fullRef = ajv.opts.uriResolver.resolve(sourceSchemaId, ref)
+    const [schemaId, pointer] = fullRef.split('#')
+    schemas[schemaId] = schemas[schemaId] ?? (ajv.getSchema(schemaId)?.schema)
+    if (!schemas[schemaId]) throw new Error(`reference not found ${schemaId}`)
+    const pointerParts = pointer.split('/').filter(p => !!p)
+    const { value: fragment } = pointerParts.reduce((a, pointerPart) => {
+      a.path.push(pointerPart)
+      if (!(pointerPart in a.value)) throw new Error(`reference not found ${schemaId}#${a.path.join('/')}`)
+      a.value = a.value[pointerPart]
+      return a
+    }, { path: /** @type {string[]} */([]), value: schemas[schemaId] })
+    return [fragment, schemaId, fullRef]
+  }
+}
+
+/**
+ * mutates a schema by replacing ~$locale~ in all refs
+ * @param {import('ajv').SchemaObject} schema
+ * @param {ajvModule.default} ajv
+ * @param {string} locale
+ * @returns {(schemaId: string, ref: string) => [any, string, string]}
+ */
+export function resolveLocaleRefs (schema, ajv, locale = 'en') {
+  if (!schema.$id) throw new Error('missing schema id')
+  const getJSONRef = prepareGetJSONRef({ [schema.$id]: schema }, ajv)
+  /** @type {any[]} */
+  const recursed = []
+  recurseResolveLocale(schema, schema.$id, getJSONRef, locale, recursed)
+  return getJSONRef
 }
 
 /**
- * @param {Record<string, import('ajv').SchemaObject>} schemas
  * @param {import('ajv').SchemaObject} schemaFragment
  * @param {string} schemaId
- * @param {ajvModule.default} ajv
+ * @param {(schemaId: string, ref: string) => [any, string, string]} getJSONRef
  * @param {string} locale
- * @returns {import('ajv').SchemaObject}
+ * @param {any[]} recursed
  */
-const recurse = (schemas, schemaFragment, schemaId, ajv, locale = 'en') => {
+
+const recurseResolveLocale = (schemaFragment, schemaId, getJSONRef, locale, recursed) => {
+  if (recursed.includes(schemaFragment)) return
+  recursed.push(schemaFragment)
   for (const key of Object.keys(schemaFragment)) {
     if (schemaFragment[key] && typeof schemaFragment[key] === 'object') {
       if ('$ref' in schemaFragment[key]) {
-        const fullRef = ajv.opts.uriResolver.resolve(schemaId, schemaFragment[key].$ref).replace('~$locale~', locale)
-        const fullRefDefaultLocale = ajv.opts.uriResolver.resolve(schemaId, schemaFragment[key].$ref).replace('~$locale~', 'en')
+        const ref = schemaFragment[key].$ref.replace('~$locale~', locale)
+        const refDefaultLocale = schemaFragment[key].$ref.replace('~$locale~', 'en')
         let refFragment, refSchemaId
         try {
-          [refFragment, refSchemaId] = getJSONRef(schemas, fullRef, ajv)
+          [refFragment, refSchemaId] = getJSONRef(schemaId, ref)
+          schemaFragment[key].$ref = ref
         } catch (err) {
-          [refFragment, refSchemaId] = getJSONRef(schemas, fullRefDefaultLocale, ajv)
+          [refFragment, refSchemaId] = getJSONRef(schemaId, refDefaultLocale)
+          schemaFragment[key].$ref = refDefaultLocale
         }
-        if (typeof refFragment === 'object' && !Array.isArray(refFragment)) {
-          schemaFragment[key] = { ...refFragment, ...schemaFragment[key] }
-          delete schemaFragment[key].$ref
-        } else {
+        if (typeof refFragment === 'string') {
           schemaFragment[key] = refFragment
+        } else {
+          recurseResolveLocale(refFragment, refSchemaId, getJSONRef, locale, recursed)
         }
-        recurse(schemas, schemaFragment[key], refSchemaId, ajv, locale)
       } else {
-        recurse(schemas, schemaFragment[key], schemaId, ajv, locale)
+        recurseResolveLocale(schemaFragment[key], schemaId, getJSONRef, locale, recursed)
       }
     }
   }
-  return schemaFragment
 }
 
 /**
+ * partially resolve a schema but not recursively, used for layout normalization
  * @param {import('ajv').SchemaObject} schema
- * @param {ajvModule.default} ajv
- * @param {string} locale
- * @returns {import('ajv').SchemaObject}
+ * @param {string} schemaId
+ * @param {(schemaId: string, ref: string) => [any, string, string]} getJSONRef
  */
-export function resolveRefs (schema, ajv, locale = 'en') {
-  if (!schema.$id) throw new Error('missing schema id')
-  return recurse({ [schema.$id]: schema }, schema, schema.$id, ajv ?? new Ajv(), locale)
-}
+export function partialResolveRefs (schema, schemaId, getJSONRef) {
+  let clonedSchema = null
+  if (schema.items && schema.items.$ref) {
+    const [refFragment] = getJSONRef(schemaId, schema.items.$ref)
+    clonedSchema = clonedSchema ?? clone(schema)
+    clonedSchema.items = { ...refFragment, ... schema.items }
+  }
+  if (schema.properties) {
+    for (const key in schema.properties) {
+      if (schema.properties[key].$ref) {
+        const [refFragment] = getJSONRef(schemaId, schema.properties[key].$ref)
+        clonedSchema = clonedSchema ?? clone(schema)
+        clonedSchema.properties[key] = { ...refFragment, ... schema.properties[key] }
+      }
+    }
+  }
+  if (schema.oneOf) {
+    for (let i = 0; i < schema.oneOf.length; i++) {
+      if (schema.oneOf[i].$ref) {
+        const [refFragment] = getJSONRef(schemaId, schema.oneOf[i].$ref)
+        clonedSchema = clonedSchema ?? clone(schema)
+        clonedSchema.oneOf[i] = { ...refFragment, ... schema.oneOf[i] }
+      }
+    }
+  }
+  if (schema.anyOf) {
+    for (let i = 0; i < schema.anyOf.length; i++) {
+      if (schema.anyOf[i].$ref) {
+        const [refFragment] = getJSONRef(schemaId, schema.anyOf[i].$ref)
+        clonedSchema = clonedSchema ?? clone(schema)
+        clonedSchema.anyOf[i] = { ...refFragment, ... schema.anyOf[i] }
+      }
+    }
+  }
+  if (schema.allOf) {
+    for (let i = 0; i < schema.allOf.length; i++) {
+      if (schema.allOf[i].$ref) {
+        const [refFragment] = getJSONRef(schemaId, schema.allOf[i].$ref)
+        clonedSchema = clonedSchema ?? clone(schema)
+        clonedSchema.allOf[i] = { ...refFragment, ... schema.allOf[i] }
+      }
+    }
+  }
+
+  return clonedSchema ?? schema
+}

package/src/state/index.js

@@ -227,7 +227,7 @@ export class StatefulLayout {
     this._previousAutofocusTarget = null
     this._data = data
     this.initValidationState()
-    this.activeItems = {}
+    this.activatedItems = {}
     this.updateState()
     this.handleAutofocus()
   }
@@ -295,7 +295,7 @@ export class StatefulLayout {
   createStateTree (rehydrate = false) {
     /** @type {CreateStateTreeContext} */
     const createStateTreeContext = {
-      activeItems: this.activeItems,
+      activatedItems: this.activatedItems,
       autofocusTarget: this._autofocusTarget,
       initial: !this._lastCreateStateTreeContext,
       rehydrate,
@@ -322,7 +322,6 @@ export class StatefulLayout {
         validatedChildren: createStateTreeContext.nodes.filter(n => n.validated).map(n => n.fullKey)
       }
     }
-    this.activeItems = createStateTreeContext.activeItems
     this.files = shallowProduceArray(this.files, createStateTreeContext.files)
   }
 
@@ -416,7 +415,7 @@ export class StatefulLayout {
     }
 
     if (activateKey !== undefined) {
-      this.activeItems = produce(this.activeItems, draft => { draft[node.fullKey] = activateKey })
+      this.activatedItems = produce(this.activatedItems, draft => { draft[node.fullKey] = activateKey })
       this._autofocusTarget = node.fullKey + '/' + activateKey
     }
     if (node.parentFullKey === null) {
@@ -625,14 +624,14 @@ export class StatefulLayout {
   /**
    * @type {Record<string, number>}
    */
-  activeItems
+  activatedItems
 
   /**
    * @param {StateNode} node
    * @param {number} key
    */
   activateItem (node, key) {
-    this.activeItems = produce(this.activeItems, draft => { draft[node.fullKey] = key })
+    this.activatedItems = produce(this.activatedItems, draft => { draft[node.fullKey] = key })
     this._autofocusTarget = node.fullKey + '/' + key
     if (node.key === '$oneOf') {
       this.input(node, undefined)
@@ -646,7 +645,12 @@ export class StatefulLayout {
    * @param {StateNode} node
    */
   deactivateItem (node) {
-    this.activeItems = produce(this.activeItems, draft => { delete draft[node.fullKey] })
+    // also deactivate children oneOf for example
+    this.activatedItems = produce(this.activatedItems, draft => {
+      for (const key in draft) {
+        if (key.startsWith(node.fullKey)) delete draft[key]
+      }
+    })
     this.updateState()
   }