Lack of correct Controlled Behavior
## **Describe the problem**
The `PhoneInput` component currently lacks support for correct controlled behavior, which is essential for cases where external state management is required. Without this, the component manages its own state, limiting control and flexibility.
[](https://stackblitz.com/edit/react-international-phone-controlled-issue-zygjjhah?embed=1&file=src%2FApp.tsx)
## **Expected behavior**
The API should support both controlled and uncontrolled modes. In controlled mode, the `value` prop should always reflect the latest external state, while uncontrolled mode should allow internal state management with an optional `defaultValue`.
## **Example usage**
In the example below, both controlled and uncontrolled behaviors are demonstrated, showing how an external button click can change the value in controlled mode:
```tsx
// Uncontrolled example
const UncontrolledDemo = () => (
<PhoneInput defaultValue="+123456789" />
);
// Controlled example
const ControlledDemo = () => {
const [value, setValue] = React.useState("+123456789");
return (
<div>
<button onClick={() => setValue("+987654321")}>Change externally</button>
<PhoneInput
value={value}
onChange={setValue} // Binding state update to external control. If this is removed, nothing will change when input is edited, because states update are not synchronized back to external control.
/>
</div>
);
};
```
## Benefits of the Proposed API:
1. **Aligns with React Patterns**: Adds support for controlled/uncontrolled modes, matching React’s standard approach.
1. **Greater Flexibility**: Developers can choose behavior based on their needs.
1. **Better Integration**: Simplifies syncing with state management libraries.
This change would make `PhoneInput` more versatile and adaptable.
issue