Value is not controllable (uncontrolled) by prop `value`

[terrynguyen255]

Describe the bug The component has its own internal state of value and doesn't obey the external prop value

Expected behavior value should be fully controlled by the external prop value

CodeSandbox URL https://codesandbox.io/s/dazzling-jones-l4esq In this sandbox, users should not be able to change the value of the editext.

Version: 4.2.1

[terrynguyen255]

Work-around for anyone who needs it. DISCLAIMER: This is anti-pattern as it make React fail to memorize the component, so React has to unmount and mount the component again and again.

 const [version, setVersion] = useState('0');
 
  const updateVersion = useCallback(() => {
    setVersion(String(Math.random()));
  }, []);

  const onSave = useCallback((v) => {
    updateVersion();
  }, []);

  const onCancel = useCallback((v) => {
    updateVersion();
  }, []);

  return (
    <Wrapper>
      <EdiText
        key={version} // keeps React re-mount the component at every renders
        type="text"
        value={value} // controlled ny external prop
        onSave={onSave}
        onCancel={onCancel}
      />
    </Wrapper>
  );

[alioguzhan]

Hi, thanks for pointing this out! Yes, when the value is set by the external prop it shouldn't be changed via the user action. I will look into that deeply. Meanwhile, I am open to Pull Requests if you have any recommendations.

[stale[bot]]

Is this still relevant? If so, what is blocking it? Is there anything you can do to help move it forward?

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[terrynguyen255]

This is still relevant. Unfortunately, I don't have time to look into the package :(

[alioguzhan]

Please help me to find the way here:

1. If the value prop is passed, we shouldn't change it anyway, right?
2. This is for view mode I believe. What happens if the user clicks to edit button to enable editing mode?
3. What will happen if the user changes the text in editing mode then press to save button when there is a controlled value?

Thanks

[stale[bot]]

Is this still relevant? If so, what is blocking it? Is there anything you can do to help move it forward?

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[terrynguyen255]

Sorry @Salioguzhan, I didn't have time to reply you sooner. Thank you so much for the time & efforts.

Basically, as a FE dev, I expect react-editext to have similar behaviors to <input />

1. If the value prop is passed, we shouldn't change it anyway, right?

• Yes. I think so

2. This is for view mode I believe. What happens if the user clicks to edit button to enable editing mode?

• I think this will be helpful in both modes

3. What will happen if the user changes the text in editing mode then press to save button when there is a controlled value?

• I think the component will fire an onChange event. And devs need to handle that event to update his state tp keep the component to update correctly

[stale[bot]]

Is this still relevant? If so, what is blocking it? Is there anything you can do to help move it forward?

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[alioguzhan]

Yes. I will look into it again based on the feedback from @Nogias9x

[stale[bot]]

Is this still relevant? If so, what is blocking it? Is there anything you can do to help move it forward?

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[alioguzhan]

I am closing this as won't fix. i don't have time to fix this for now. I am open to pull requests.