We Keep Coding

Prevent Chakra UI Slide transition from locking up UI

I am using Chakra UI to create a React component where I have open state.
const [isOpen, setIsOpen] = useState(false);
<Box>
<Button onClick={() => setIsOpen(!isOpen)}>
{isOpen ? "CLOSE" : "OPEN"}
</Button>
<Text>{isOpen ? "I am open" : "I am closed"}</Text>
<Slide
direction="right"
in={isOpen}
unmountOnExit
>
<Box
height="100vh"
width="200px"
backgroundColor="orange"
position="absolute"
right="0"
></Box>
</Slide>
</Box>
When I click the button, a drawer should open up from the right side. That is happening just fine. When the drawer is open, clicking the button should close the drawer by setting isOpen to false. This is the part that is not working as expected. When I click the close button, nothing happens. It seems as if the UI is locking up as soon as the drawer opens. It won't register any more user interactions after that. How can I resolve this issue? You can find link to the codesandbox here.

CHange URL after a modal is closed

I am trying to change my URL after a modal is clicked.
I had added an extra onClick to the button which called the modal, this was to a function - in that function I added some console logging. I could see the logging, but the URL didn't change.
The (original) button code is:
<button className='buttonCheck' onClick={checkAnswer}>CHECK MY ANSWER</button> <CheckAnswerModal showModal={showCongratsModal} onClose={() => setShowCongratsModal(false)} videoMessage={showCongratsURL} content={showWindowContent} size='med'/>
And the modal
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
function CheckAnswerModal({showModal = false, onClose = () =>{}, videoMessage, content, size}) {
return (
<Modal
size={size}
show={showModal}
onHide={onClose}
backdrop="static"
keyboard={false}
>
<Modal.Body>
{videoMessage ? <video src={videoMessage} controls autoPlay> </video>: <div><center>{content}</center></div>}
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={onClose}>
Close
</Button>
</Modal.Footer>
</Modal>
)
}
export default CheckAnswerModal
Originally, I had added a new function to the calling page:
function GoHome() {
console.log("redirecting")
<Redirect to='/' />
}
and added this to the button onClick, I could see the logging, but no URL changing. I've done a bit of looking about and I am pretty sure this is not working as the modal is on screen. To get around this, in the GoHome() I even added a conditional (if the showModal is false, then do the logging)
I've seen some posts which talked about unmounting the component (now - this is something new to me, especially as I don't call any mount component explicitly.)
Am I missing something fundamental with redirect? Or can someone point me at what I am doing wrong (the redirect feels a little "hacky" just now, I need to redo a whole component I think, but this would work for now)

You have to install react-router-dom if you have not installed yet.
Then import it.
import {useNavigate} from react-router-dom
then call it inside a function like:
const navigate = useNavigate()
then in your onClose() function use navigate like:
navigate("/")
sorry for my English

Rather than trying to be smart, I simply declared history at the start and then in my onClose added history.push and it worked.

React Native Modal background doesn't work properly

Im using react-native-modal
This was my modal
import Modal from 'react-native-modal';
..
....
..
<Modal
visible={modalVisible} //this one was the issue (should be isVisible)
animationType={'slide'}
swipeDirection="down"
transparent={true}
onRequestClose={() => closeModal()}
onSwipeComplete={() => closeModal()}
style={{justifyContent: 'flex-end', margin: 0}}
>
</Modal>
So as you can see, my idea was to open it half way and slide it down to close
My problem was that it was acting weird, the modal wasn't updating properly, sometimes the modal opened way less than it was supposed to

After reading the documentation and common problems:
The solution was to change the visible prop to isVisible
isVisible={modalVisible}

React.js dialog component disappears yet remains in DOM

I'm using a Dialog component from Material-UI which, for the most part, is working correctly. However, if I click away from the Dialog, the Dialog will disappear (as expected) but sometimes, it remains in the DOM with its opacity set to 0, and I can't click anything else since the Dialog is in the way. This is a small sample of my code:
const [openDialog, setOpenDialog] = React.useState(false);
React.useEffect(() => {
// Get data for ReactTable
}, []);
return(
<div>
// Other components
<Button color="white" onClick={() => setOpenDialog(true)}>
Open Dialog
</Button>
// Other components
<Dialog open={openDialog} maxWidth="md" onClose={() => setOpenDialog(false)}>
// ReactTable and close button
</Dialog>
</div>
)
This bug doesn't always occur which makes it tricky to debug. I've only been using React for about a month, but I'm wondering if it's a state problem, or maybe some sort of race condition. Any suggestions?
Edit: This also occurs when a DropzoneDialog appears, to upload a file.

This also works:
<Dialog className={openDialog ? "" : classes.displayNone} open={openDialog} maxWidth="md" onClose={() => setOpenDialog(false)}>
// ReactTable and close button
</Dialog>
where in the styles file you have:
displayNone: {
display: "none"
}

In case anyone else has this same issue, I found the answer:
Elsewhere in the app, useEffect() was stuck in a loop and running extremely frequently which slowed the app down, causing this problem.

How to close swipeabledrawer within different class

I'm a little bit confused with the SwipeableDrawer explanation on the Material-ui website. Basically I have a Component 'Sidebar' which opens a SwipeableDrawer if a user clicks on button on the appbar, or a user swipes to open up the sidebar.
In the appbar there's a button you can press which gets passed to the parent component.
// Topbar.js
<IconButton color="inherit" onClick={onSidebarOpen}>
<MenuIcon/>
</IconButton>
// Main.js
<Topbar onSidebarOpen={this.handleSidebarOpen}/>
The handelSidebarOpen method sets a state of whether the sidebar is open or closed. So now the problem is that I'm not entirely sure how to tell the Sidebar properly to open or close the drawer if a user swipes the drawer open.
I used this approach
<Sidebar
open={this.state.openSidebar}
onClose={this.handleSidebarClose}
/>
And then in the Sidebar class I do this
// Inside render method
const {open, onClose} = this.props;
return (
<SwipeableDrawer
open={open}
onOpen={event => this.showDrawer(event)}
onClose={onClose}
disableBackdropTransition={!iOS}
disableDiscovery={iOS}
>
{console.log(onClose)}
{this.fullList()}
</SwipeableDrawer>
);
Please feel free to ask me for clarification if you don't understand the problem. I've made a little demo to show the problem.
https://codesandbox.io/embed/dazzling-galileo-mc3oz?fontsize=14&hidenavigation=1&theme=dark
Try to swipe the sidebar open and watch what happens. Thanks in advance.

Just pass handleSidebarOpen method in Sidebar at your Main.js file.
<Sidebar
open={this.state.openSidebar}
onOpen={this.handleSidebarOpen}
onClose={this.handleSidebarClose}
/>
Get that function in your Sidebar.js and use it on onOpen attribute of SwipeableDrawer. Like below,
const { open, onOpen, onClose } = this.props;
return (
<SwipeableDrawer
open={open}
onOpen={onOpen}
onClose={onClose}
disableBackdropTransition={!iOS}
disableDiscovery={iOS}
>
{console.log(onClose)}
{this.fullList()}
</SwipeableDrawer>
);
I have also created sandbox for you;
https://codesandbox.io/s/react-gki1u?fontsize=14&hidenavigation=1&theme=dark