Chakra-ui: [Component] More docs for controlled components

Created on 31 May 2020 · 3Comments · Source: chakra-ui/chakra-ui

Observed behaviour:
The Editable component doesn't allow editing upon clicking.

Expected Behaviour:
After clicking on the component, the input field should allow the value to be changed.

To Reproduce
Use this sandbox: https://codesandbox.io/s/dazzling-pond-4qimx
It should be straightforward to see.

Desktop (please complete the following information):

OS: Ubuntu
Browser: Firefox
Versions: 0.7.0, 0.8.0

Source

gabriel-fortin

Most helpful comment

In your example, you're passing value to Editable, making it a controlled component, but you never call setName to update the value, so the Editable always shows the initial value. You can either remove the value prop to make it an uncontrolled component, or you can call setName from the onChange prop, like this:

function App() {
  const [name, setName] = React.useState("I cannot be edited");

  return (
    <Heading>
      <Text>Hello</Text>
      <Editable value={name} onChange={value => setName(value)}>
        <EditablePreview />
        <EditableInput />
      </Editable>
    </Heading>
  );
}

mplis on 31 May 2020

👍2 ❤1

All 3 comments

function App() {
  const [name, setName] = React.useState("I cannot be edited");

  return (
    <Heading>
      <Text>Hello</Text>
      <Editable value={name} onChange={value => setName(value)}>
        <EditablePreview />
        <EditableInput />
      </Editable>
    </Heading>
  );
}

mplis on 31 May 2020

👍2 ❤1

Ah, that makes sense.
I just wish it was stated in the docs. I looked at the doc for \

I also noticed that, when it's a controlled component, the argument to onSubmit is always an empty string. I'm wondering if it's intentional. I see no reason for that behaviour but would accept it easily - again, if it was documented.

And last, I don't think I've seen any mentions of "controller components" anywhere in the docs. I think that's something that could be added as well.

I hope this comment is helpful and not too much of a rant.
Cheers and thanks for help!

gabriel-fortin on 6 Jun 2020

Controlled and uncontrolled components are topics covered by the React documentation itself:

I agree that this distinction is important enough that we should note it somewhere in our documentation, especially since we have built our own utility for seamlessly managing controlled and uncontrolled state in our components. I've created #1008 to cover this issue.