I am using the ant d Drawer component as a pop up modal. I wanted to disable the mask as I didnt want the dark mask it applies to the left hand side, however this seems to prevent the component from mantaining its mask closable parameter which allows you to close the modal by clicking on the left side of the screen (mask)
A possible solution would be to mantain the mask param as true but change the css styling so its completely transparent but I am not sure how to do this?
Any other solutions are welcomed
Thanks in advance
<div>
<Drawer
className="add-days-modal"
placement="right"
closable={false}
onClose={props.handleCancel}
visible={props.addDayModalVisible}
key="right"
width="500px"
maskClosable={true}
mask={false}
>
{props.content}
</Drawer>
</div>
Without the mask there is nothing for the user to click on which would trigger the close event.
What you can try doing instead to achieve what you are after is set the opacity on the mask to 0, this will mean that it is invisible to the user but they can still click on it which will close the Drawer.
The other option which is much more complex is to add an event handler to the screen click. Then when the user clicks anywhere away from the draw you set the state of the Drawer to closed.
My advice is go with option 1
Related
I also want to when I click on the background and there are other pressable things/buttons on this background, they are not being pressed unless the state is back to when it is un-blurred (basically: only the blurred background can be pressed when the screen is blurred). If you need an example look at twitter mobile: when you click on the post (+) button, it blurs the background but when clicked back it un-blurs it. (Must work for IOS and Android).
I think you need this..
In CSS create 2 classes - First one with the blur and second one without.
In React create 2 functions - 1 onclick for the blur-button and 1 onclick for the close button. These functions should change the class of body.
$('.button').click(function(){
$('body').addClass('blur'); });
Currently I'm trying to overlay a button on another button in Material UI:
https://codesandbox.io/s/responsivedrawer-demo-material-ui-forked-inc7xz?file=/demo.js
I'd like if pressing the X would only print B, rather than printing A and B. I know nesting buttons is not the correct way to do it, but I'd like to overlay the button with the exact look and ripple behavior I'm currently seeing with the nesting. I like how it looks so well aligned on the right, clicking the X doesn't ripple the effect to the entire ListButton the ListButtons takes up the entire drawer width without any extra work, and clicking the ListButton ripples under the X.
I'd really appreciate it if someone has the time to help. Thanks so much!
The solution would be to stopPropagation inside the onClick function since this is where the click event happens.
onClick={(e) => {
e.stopPropagation();
console.log("B");
}}
I was having an accessibility issue when using Material-UI with React. Specifically when placing a Menu on a Drawer. Essentially the normal behaviour of a Menu is to highlight the top MenuItem. This behaviour is different if that menu is placed on a Material UI Drawer.
I have recreated the problem here using just the example Material-UI Menu and Drawer:
https://codesandbox.io/s/material-ui-menu-and-drawer-accessibility-issues-xjj3h?file=/src/App.js
The following images show the difference between the two menus when opened. I am using the chromevox extension while testing:
A normal menu when using chromevox to show accessability:
A menu when it is placed on a material UI drawer:
Would anyone be able to point out if this is an error in my code or if perhaps there are any workarounds? Was going to raise this as a new github issue but felt it was worth asking the question here first. :)
By default, the drawer enforces (so long as it is open) that focus stays within itself. So when the menu opens and grabs focus, the drawer notices that it lost focus and it grabs it back.
There are two options for fixing this:
You can turn off this drawer behavior by specifying the disableEnforceFocus prop (example here).
You can specify the disablePortal prop on the menu (example here). This will cause the menu to be a descendant of the drawer in the DOM (by default the menu uses portals and is added as a child of the <body> element), so the drawer will not try to "take back" the focus, because when focus is in the menu it will still be within the drawer.
I would recommend option 2 since the drawer's focus enforcement is generally a good thing from an accessibility standpoint.
I have a menu which I is opening on mouse click of a tab
...
<Tab
label={page.title}
title={page.description}
onMouseDown={this.pageMenuOpen}
/>
...
<Menu
id="simple-menu"
anchorReference="anchorPosition"
anchorPosition={{top: this.state.pageMenu.y, left: this.state.pageMenu.x}}
open={this.state.pageMenu.open}
onClose={this.pageMenuClose}
>
This works as expected, the pageMenuOpen function is changing the state of the pageMenu.open to true and the menu opens, also the pageMenuClose is changing it to false and that works as well.
The Menu onClose function runs on ESC and on mouse left clicking away from the menu.
Is there an option to make it run the function on right clicking away as well? Or override when onClose shall be run? I have noticed the same is happening on the Dialog as well.
No you can't override onClose trigger event, but you can get a look at the other events in here https://material-ui.com/api/menu/
I would like to try to create a popup using ons.screen.presentPage() with a transparent background, however once the transition is complete there is a black mask that appears behind the page. Could you please indicate the purpose of this black mask or the best way to create a popup dialog / selector?
The black mask is used to achieve the fade out effect of the exiting page.
What you can do, is to use DOM api to hide it.
ex.
// the controller of the entering page
function Page2Controller($scope){
setTimeout(function(){
$('.onsen_screen-black-mask').hide();
}, 0);
}