I have a page with a modal window. In development mode, it opens. But when I upload my React App to vercel, then the screen just darkens there, and the modal window does not appear, but all the window controls work. Who faced the same problem?
const { isOpen, onOpen, onClose } = useDisclosure()
return (
<>
<Button onClick={onOpen}>Open Modal</Button>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Modal Title</ModalHeader>
<ModalCloseButton />
<ModalBody>
<Lorem count={2} />
</ModalBody>
<ModalFooter>
<Button colorScheme="blue" mr={3} onClick={onClose}>
Close
</Button>
<Button variant="ghost">Secondary Action</Button>
</ModalFooter>
</ModalContent>
</Modal>
</>
)
I was able to fix this by upgrading the "framer-motion": version -> "framer-motion": "^4.1.16".
Related
I am trying to use chakra ui modal in my app. but this modal is not showing , when I directly pass true to to isOpen .its showing .but when i pass isOpen Disclosure it is not working. when I check the react dev tools. the value of isOpen is changed to true on the button click. but the popup is not coming
import {
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalFooter,
ModalBody,
ModalCloseButton,
Button,
useDisclosure,
} from '#chakra-ui/react'
function Home() {
const {isOpen,onOpen,onClose} = useDisclosure()
return (
<>
<Button onClick={onOpen}>Open Modal</Button>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Modal Title</ModalHeader>
<ModalCloseButton />
<ModalBody>
{/* <Lorem count={2} /> */}
</ModalBody>
<ModalFooter>
<Button colorScheme='blue' mr={3} onClick={onClose}>
Close
</Button>
<Button variant='ghost'>Secondary Action</Button>
</ModalFooter>
</ModalContent>
</Modal>
</>
)
}
export default Home
I have this modal function
function ReplyModal({ author, title }: { author: string; title: string }) {
return (
<>
<Button onClick={onOpen}>Responder</Button>
<Modal blockScrollOnMount={false} isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Respondendo a tarefa de {author}</ModalHeader>
<ModalCloseButton />
<ModalBody>{myForm}</ModalBody>
<ModalFooter>
<Button
colorScheme="blue"
mr={3}
onClick={() => onReply(title, author)}
>
Enviar
</Button>
<Button variant="ghost" onClick={onClose}>
Cancelar
</Button>
</ModalFooter>
</ModalContent>
</Modal>
</>
);
}
The modal body is this component:
const myForm = (
<div>
<p>Mensagem</p>
<textarea
placeholder="Digite sua mensagem"
value={reply}
onChange={(e) => setReply(e.currentTarget.value)}
></textarea>
<p>Selecionar arquivo</p>
<input id="replyFile" type="file"></input>
</div>
);
When i type on that textarea the modal closes instantly. I saw on a github thread that i should take out of the function the const { isOpen, onOpen, onClose } = useDisclosure();. I did it but still closes everytime i start typing. Actually, when i took it out of the function, when i type something it closes and open again.
What am i doing wrong here?
I am using ANTD React UI library.
<Modal
width="1100px"
centered
footer={null}
title={
<div className="d-flex align-items-center">
<div className="flex-grow-1">Record Profiles</div>
<div className="mr-4">
<Button
htmlType="submit"
type="primary"
onClick={() =>{this.SaveData(this.form.getFieldValue())}}
icon={<SaveOutlined />}
className="save_btn"
loading={this.state.saving}>
</Button>
<Button
onClick={() => { this.props.onCancel() }}
htmlType="button"
type="primary"
className="cancel_btn ml-2"
icon={<CloseCircleOutlined />}>
</Button>
</div>
</div>
}
visible={true}
closable={false}
okText="Yes"
cancelText="No"
maskClosable={false}
>
<Form
autoComplete="off"
layout="horizontal"
ref={(r) => this.form = r}
initialValues={this.props.record}
onFinish={this.SaveData}
>
.
.
.
</Form>
</Modal>
I want to call the save and close buttons on top of the side of the title. It is displaying correctly, but due to outside form functionalities don't work because the form values don't get outside. Is there any method to get the values outside or form submit?
<Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
<ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
<ModalBody>
ABC
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={this.toggle}>Do Something</Button>{' '}
<Button color="secondary" onClick={this.toggle}>Cancel</Button>
</ModalFooter>
</Modal>
How to close modal on pressing escape button on keyboard?
I think your code don't need to change. I think you are missed in others.
try this code. it's the same as your code.
const {
Button,
Modal,
ModalHeader,
ModalBody,
ModalFooter
} = Reactstrap;
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
modal: false
};
}
toggle = () => {
this.setState(prevState => ({
modal: !prevState.modal
}));
}
render() {
return (
<div>
<Button color="primary" onClick={this.toggle}>Click here</Button>
{/*from here*/}
<Modal isOpen={this.state.modal} toggle={this.toggle}>
<ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
<ModalBody>ABC</ModalBody>
<ModalFooter>
<Button color="primary" onClick={this.toggle}>
Do Something
</Button>
<Button color="secondary" onClick={this.toggle}>
Cancel
</Button>
</ModalFooter>
</Modal>
{/*to here*/}
</div>
);
}
}
ReactDOM.render(<Demo />, document.getElementById("app"));
<link href="https://npmcdn.com/bootstrap#4.0.0-alpha.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://npmcdn.com/react#15/dist/react-with-addons.min.js"></script>
<script src="https://npmcdn.com/react-dom#15/dist/react-dom.min.js"></script>
<script src="https://npmcdn.com/reactstrap#2/dist/reactstrap.min.js"></script>
<div id="app"></div>
I'm trying to use material-ui checkbox inside dialog but onChange function seems not working. Please refer the following info for my code:
<Dialog open={showAssetListDialog}>
<DialogTitle id="responsive-dialog-title">
<h3 className="formHeader">Asset List</h3>
<hr />
</DialogTitle>
<DialogContent>
<Typography>
{ availableAssets && Object.keys(assetList).map((key, index) => (
<p>
<Checkbox
const asset_id = {assetList[index].value}
checked = {assetList[index].asset_id}
color = "primary"
onChange = {props.handleCheckboxChange('asset_id')}
onCheck = {props.handleCheckboxChange}
>
</Checkbox>
{assetList[index].label}
</p>
))}
</Typography>
</DialogContent>
<DialogActions>
<Button
color="success"
className="btnSave"
onClick={props.handleAssetListClose}
>
Done
</Button>
</DialogActions>
</Dialog>