search

koumoul-dev / vuetify-jsonschema-form

Create beautiful and low-effort forms that output valid data. Published on npm as @koumoul/vjsf.
https://koumoul-dev.github.io/vuetify-jsonschema-form/latest/
MIT License
539 stars 154 forks source link

non-unique id #root DOM Warning #222

Closed kubemq closed 3 years ago

kubemq commented 3 years ago

Hi, First, thank you for such a great component. When I'm using the following schema for example: const clusterApiInterfaceSchema = { type: "object", title: "Interfaces Settings", oneOf: [ { title: "Cluster IP", properties: { mode: { type: "string", title: "Expose Mode", const: "ClusterIP" } } }, { title: "Node Port", properties: { mode: { type: "string", title: "Expose Mode", const: "NodePort" }, nodePort: { type: "integer", title: "Node Port", "x-rules": ["validateNodePort"], default: 0, minimum: 0, maximum: 65355 } } }, { title: "Load Balancer", properties: { mode: { type: "string", title: "Expose Mode", const: "LoadBalancer" } } } ] };

I'm getting the following error: Found 4 elements with non-unique id #root: (More info: https://goo.gl/9p2vKq) <input id=​"root" readonly=​"readonly" type=​"text" aria-readonly=​"undefined" autocomplete=​"off">​ <input id=​"root" readonly=​"readonly" type=​"text" aria-readonly=​"undefined" autocomplete=​"off">​

Any idea?

albanm commented 3 years ago

I think the error happens only if you instantiate vjsf multiple times in the same page. You can use the idPrefix option to prepend a string to all generated ids and so remove conflicts.

kubemq commented 3 years ago

Thank you very much, This worked!