schema form fix (#102)

Co-authored-by: 300074366 <[email protected]>

Author: airishgupta

components/schema-form/src/json-schema-renderer.ts

@@ -26,6 +26,7 @@ export type UI = UIField | UIArrayField | UIObjectField
 export interface SchemaRendererOptions {
   resolveComponent(name: string): ComponentType
   resolveOptions(format: string, schema: any): Array<any> | void // TODO: Accept promise.
+  optionsProcessed: boolean
 }
 
 interface PropPostProcessor {
@@ -44,6 +45,7 @@ interface GeneratorContext {
     props: Record<string, any>
     layout: Record<string, any>
   }
+  optionsProcessed: boolean
 }
 
 export function createRenderFactory(
@@ -128,7 +130,8 @@ function generateAnyField(
 ) {
   schema = normalizeSchema(schema)
 
-  if (schemaToUI.has(schema)) return schemaToUI.get(schema)
+  if (schemaToUI.has(schema) && !context.optionsProcessed)
+    return schemaToUI.get(schema)
 
   const generator =
     'type' in schema

components/schema-form/src/schema-form.tsx

@@ -32,10 +32,12 @@ interface Props extends FormProps {
  */
 export default class SchemaForm extends Component<Props, { ui: UI | null }> {
   optionsCache: Record<string, any[]>
+  optionsPromise: Record<string, boolean>
 
   constructor(props) {
     super(props)
-
+    this.optionsCache = {}
+    this.optionsPromise = {}
     this.state = {
       ui: this.createUI(props.schema),
     }
@@ -54,10 +56,11 @@ export default class SchemaForm extends Component<Props, { ui: UI | null }> {
     console.log('Deleting SchemaForm')
   }
 
-  createUI(schema: Schema) {
+  createUI(schema: Schema, optionsProcessed: boolean = false) {
     return createRenderFactory(schema, {
       resolveComponent: this.componentProvider,
       resolveOptions: this.optionsProvider,
+      optionsProcessed,
     })
   }
 
@@ -76,14 +79,15 @@ export default class SchemaForm extends Component<Props, { ui: UI | null }> {
       if (Array.isArray(result)) return result
       if (result === null) return
       if (result.then) {
-        result.then((result) => {
-          if (this.optionsCache[format] !== result) {
+        if (!this.optionsPromise[format]) {
+          result.then((result) => {
+            this.optionsPromise[format] = true
             this.optionsCache[format] = result
-            console.log('Option loaded.')
-            this.forceUpdate() // Options Loaded.
-          }
-        })
-
+            this.setState({
+              ui: this.createUI(this.props.schema, true),
+            })
+          })
+        }
         return this.optionsCache[format] || []
       }
     }