outside click on dialog modal does not dismiss it.

[jasan-s]

Problem description

I can click ESC or click the OK(Flat button) and the modal dialog is dismissed however clicking on outside does not trigger onRequestClose. I have set the modal to false according to the docs. What I'm i doing wrong.

Steps to reproduce

  const { handleSubmit, pristine, reset, submitting } = props
  const actions = [
    <FlatButton
        label='Ok'
        primary={true}
        keyboardFocused={true}
        onClick={props.closeModal}/>
  ]
  return (
    <div>
        <RaisedButton label='Duck' onClick= {props.openModal} />

        <div>

            <form onSubmit= {handleSubmit}>
                 <Field name ='duck' component = {(duck) =>
        <Dialog
          title="Dialog With Actions"
          actions={actions}
          modal={false}
          open={props.isOpen}
          onRequestClose={props.closeModal} >
          Only actions can close this dialog.
        </Dialog>}/>
            </form>
        </div>
    </div>
  )

Versions

• Material-UI: latest release
• React: latest release
• Browser: chrome latest release

[stephenkingsley]

I fix it, now pr

[mbrookes]

react-tap-event-plugin?

http://www.material-ui.com/#/get-started/installation

[stephenkingsley]

@jasan-s you must be use react-tap-event-plugin

[nehalbhanushali]

@jasan-s is it working now?

[jasan-s]

@stephenkingsley i'm using lated npm module for this lib. and it doesn't use es6 classes. I ll try to figure out how i can make those changes in that module. @mbrookes I tried using onTouchTap and it works fine for non-touch devices but on touch devices the tap registers twice, so the modal open and closes right away. that is why i stuck to just onCLick

[longmfe]

I did use react-tap-event-plugin, my issue is that I can dismiss the dialog when I set modal to false, but I can NOT dismiss it when set modal to true. It seems like to act as the opposite way according to the doc.

[mbrookes]

I can dismiss the dialog when I set modal to false, but I can NOT dismiss it when set modal to true. It seems like to act as the opposite way according to the doc.

http://www.material-ui.com/#/components/dialog
"A modal dialog can only be closed by selecting one of the actions."

We could argue the toss about whether that's the correct use of the term "modal", but the behaviour you describe matches the documentation.

[aahan96]

I think we can close this issue then

[shadyshanab]

i made a custom solution for this if anyone interested it worked for me without installing any addtional packages
i created a custom fixed div inside the modal with full width and height and give it lower zindex than all the other elements in the modal

<CustomDialog
                onClose={handleClose}
                aria-labelledby={title}
                open={open}
                width={isSmallOrMediumScreen ? "93%" : width}
                TransitionComponent={Transition}
                onClick={onClick}
                ref={ref}
                keepMounted={keepMounted}
                height={height && isSmallOrMediumScreen ? height : 'auto'}
            >
                <div
                    className="fixed top-0 left-0 w-full h-full  z-[1]"
                    onClick={handleClose}
                />
                <DialogTitle id={title} className="z-[2]">
                    <CloseButton aria-label="close" onClick={handleClose}>
                        <FaArrowLeft
                            style={{fontSize: '20px'}}
                        />
                    </CloseButton>
                    <span style={{color: '#F8775D', fontWeight: '700', paddingRight: '10px'}}>{title}</span>
                </DialogTitle>
                <DialogContent dividers className="z-[2]">{children}</DialogContent>
                {firstButton && secondButton && (
                    <DialogActions
                        className="z-[2]"
                    sx={{
                        display: 'flex',
                        gap: '10px',
                        margin: '10px',
                        }}
                    >
                        <Button autoFocus className="z-[2]" onClick={firstButtonAction} color="primary">
                            {firstButton}
                        </Button>
                        <Button autoFocus className="z-[2]" onClick={secondButtonAction} color="primary">
                            {secondButton}
                        </Button>
                    </DialogActions>
                )}
            </CustomDialog>