This repository was archived by the owner on Jan 14, 2025. It is now read-only.
This repository was archived by the owner on Jan 14, 2025. It is now read-only.
<Dialog /> is not a controlled component #772
Closed as not planned
Description
Example:
import React, { Component } from 'react'
import { render } from 'react-dom'
import Dialog, {
DialogContent,
} from '@material/react-dialog';
class AlwaysOpenedDialog extends Component {
state = {
open: true
}
render () {
return (
<Dialog
open={this.state.open}
onClose={() => {
// I won't do anything in `onClose` so the dialog is expected to be always opened.
// In a more normally case, I want to close the dialog conditionally
// if (this.validate()) {
// this.setState({open: false})
// } else {
// this.setState(null)
// }
}}
>
Hello World
</Dialog>
)
}
}
render(<AlwaysOpenedDialog />, document.getElementById('root'))
When I click the mask, the dialog still closed.
According to the React docs, just like the native input element in React, <input type="text" value={this.state.value} onChange={this.handleChange} />
, when you try to type something in the input element, this would trigger onChange event, but if you don't change this.state.value
in the onChange event handler, the value of this input element won't changed, just like this input element is being locked.
In my opinion, the correct logic for Dialog component is that, when users try to close the dialog(via mouse click or keyboard), this would trigger onClose event, but finally the dialog is closed or not, is depending on the prop open
, which respect React controlled components pattern.