question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Dependency defaults do not render for uncontrolled Form components

See original GitHub issue

Prerequisites

Description

With release 1.6.1, some of our dependency defaults now render correctly - incl. the ones listed in a previous issue. However, we still have one set of dependency defaults that do not render. My hypothesis is that it may be because we also use “definitions” as part of the structure.

Steps to Reproduce

I will provide a playground example of the issue - but the playground seems to be 1.6.0 rather than 1.6.1, so currently I can’t create one. However, I’ve added the example Schema below. Note that the option C is the one that has default values that do not get inserted.

{
  "type": "object",
  "definitions": {
    "can": {
      "type": "object",
      "properties": {
        "phy": {
          "title": "TitleX",
          "type": "object",
          "properties": {
            "bit_rate_cfg_mode": {
              "title": "TitleY",
              "type": "integer",
              "default": 0,
              "anyOf": [
                {
                  "title": "A",
                  "enum": [
                    0
                  ]
                },
                {
                  "title": "B",
                  "enum": [
                    1
                  ]
                },
                {
                  "title": "C",
                  "enum": [
                    2
                  ]
                }
              ]
            }
          },
          "dependencies": {
            "bit_rate_cfg_mode": {
              "oneOf": [
                {
                  "properties": {
                    "bit_rate_cfg_mode": {
                      "enum": [
                        0
                      ]
                    }
                  }
                },
                {
                  "properties": {
                    "bit_rate_cfg_mode": {
                      "enum": [
                        1
                      ]
                    }
                  }
                },
                {
                  "properties": {
                    "bit_rate_cfg_mode": {
                      "enum": [
                        2
                      ]
                    },
                    "brp": {
                      "title": "XYZ 1",
                      "type": "integer",
                      "default": 12,
                      "minimum": 1
                    }
                  }
                }
              ]
            }
          }
        }
      }
    }
  },
  "properties": {
    "can_1": {
      "title": "CHANNEL 1",
      "$ref": "#/definitions/can"
    }
  }
}

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:20 (8 by maintainers)

github_iconTop GitHub Comments

1reaction
epicfaacecommented, Jun 19, 2019

It seems like the workaround is to make the form a controlled component – i.e., save the form data in the state and update it in during onChange – see this jsfiddle for example: https://jsfiddle.net/qrhws8f6/

1reaction
MatinFcommented, Jun 15, 2019

@epicfaace Our challenge with such a solution is that we need to have a specific value in the dropdown be the default selection of the dropdown. However, one of the non-default dropdown selections have dependency defaults - hence we run into the rendering issue.

Since this seems to work in the playground, I guess there’s some sort of compensation fix going on in that code. Perhaps a similar thinking could be used to solve this issue. I use the pagination extension to rjsf and noticed that when I select the “option C” in the dropdown example, the default value will be populated when I switch tabs back and forth. So I’d assume some form of similar effect could be triggered as a special case in rjsf when dependency defaults need to be rendered.

Best,

Read more comments on GitHub >

github_iconTop Results From Across the Web

Uncontrolled Components - React
Default Values. In the React rendering lifecycle, the value attribute on form elements will override the value in the DOM. With an uncontrolled...
Read more >
How to Create a React Form: Controlled vs. Uncontrolled ...
In this article, we'll cover two ways to create React forms: the HTML way, with uncontrolled components, and the best practice, ...
Read more >
React-Champ: Part II: When and how to use uncontrolled ...
Values need to be retrieved only on “submit”. No fields are dependent on any other field(s)?. How to implement uncontrolled components?
Read more >
Using Uncontrolled Components in React Apps
Uncontrolled components are where we use the DOM properties to manipulate form inputs. We can use a ref to get form values directly...
Read more >
Warning: A component is changing a controlled input of type file
"A component is changing an uncontrolled input of type file to be controlled. Input elements should not switch from uncontrolled to controlled ( ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found