Two Drawers - onClose not firing on touch event
See original GitHub issueI’m new to this package so forgive me if I don’t have it setup properly. I’m trying to create a left and right drawer, which I have nested as suggested in an older issue.
It appears through some debugging that a dragged touch to close either panel below does not fire the onClose handler. I have a custom nav bar with a left and right button; those buttons call the open/close methods as shown below and the button press method does cause the appropriate drawer to fire it’s onClose handler. In fact, it looks like it’s firing onOpen of the other drawer.
Any suggestions?
toggleLeftDrawer: function() {
(this.state.leftDrawerOpen) ? this.refs.leftDrawer.close() : this.refs.leftDrawer.open();
},
toggleRightDrawer: function() {
(this.state.rightDrawerOpen) ? this.refs.rightDrawer.close() : this.refs.rightDrawer.open();
}
<Drawer
ref='leftDrawer'
type='static'
side='left'
content={<Text>Left Panel</Text>}
openDrawerOffset={100}
onOpen={this.openLeftDrawer}
onClose={this.closeDrawer}
styles={{main: {shadowColor: '#000000', shadowOpacity: 0.4, shadowRadius: 3}}}
tweenHandler={Drawer.tweenPresets.parallax}
>
<Drawer
ref='rightDrawer'
type='static'
side='right'
content={<Text>Right Panel</Text>}
openDrawerOffset={100}
onOpen={this.openRightDrawer}
onClose={this.closeDrawer}
styles={{main: {shadowColor: '#000000', shadowOpacity: 0.4, shadowRadius: 3}}}
tweenHandler={Drawer.tweenPresets.parallax}
>
<View>
...
</View>
</Drawer>
</Drawer>
Issue Analytics
- State:
- Created 8 years ago
- Comments:10 (6 by maintainers)
Top Results From Across the Web
Close Persistent MUI Drawer on clicking outside
Persistent Drawer ... Use ClickAwayListener to know when the user clicks outside the Drawer . You also need to set mouseEvent="onMouseDown" , ...
Read more >Touch events - Web APIs - MDN Web Docs - Mozilla
When a touchstart event occurs, indicating that a new touch on the surface has occurred, the handleStart() function below is called.
Read more >Autocomplete API - Material UI - MUI
Name Type Default
options * array
renderInput * func
autoComplete bool false
Read more >Drawer - Ant Design
A Drawer is a panel that is typically overlaid on top of a page and slides in from the side. It contains a...
Read more >How touch events are delivered in Android - Suragch - Medium
If some ViewGroup wants to handle the touch event right away (and not give anyone else down the line a chance at it)...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I got it working modifying the openLeftDrawer function to this.
Note: I am setting negotiatePan to true in my case.
Closing, feel free to reopen if needed