React Dialog box closed issue

Asked
Active3 hr before
Viewed126 times

8 Answers

closedreact
90%

One way to achieving this is to factor the logic to open/close the modal out of the dialog component to a "central" location, preferably in the app, but outside the router. This allows the dialog to be opened/closed from a single location by callbacks that can be passed around the app, and not be coupled to any specific route your app is on.,When I tried to open the user registration dialog, I am unable to open the dialog box in the current page, that's why I have created a separate component for the dialog box component. ,NOTE: As your app grows in size/complexity this pattern may become a little unwieldy (if you need to open a dialog by any further descendants) and you'll likely want to switch to using a react context provider/consumer specifically for the dialog, or use a state management system like Redux so you can dispatch simple actions to open/close it.

dialog.js

const AlertDialog = ({ open, onAgree, onClose, onDisagree }) => (
  <Dialog
    open={open}
    onClose={onClose}
    aria-labelledby="alert-dialog-title"
    aria-describedby="alert-dialog-description"
  >
    <DialogTitle id="alert-dialog-title">
      {"Use Google's location service?"}
    </DialogTitle>
    <DialogContent>
      <DialogContentText id="alert-dialog-description">
        Let Google help apps determine location. This means sending anonymous
        location data to Google, even when no apps are running.
      </DialogContentText>
    </DialogContent>
    <DialogActions>
      <Button onClick={onDisagree} color="primary">
        Disagree
      </Button>
      <Button onClick={onAgree} color="primary" autoFocus>
        Agree
      </Button>
    </DialogActions>
  </Dialog>
);
load more v
88%

I think the Dialog component should set its state to {openDialog: false} on 'dialogclose'.,I'm thinking of cancelling the escape key by default, unless the user provide a cancel event.,Currently if a user presses the escape key to close the dialog it wont open again since the openDialog state is still set to true. This can be reproduced using the demo page:

<Dialog open={this.state.openDialog} onCancel={this.handleCloseDialog}>
load more v
72%

You can prevent closing of modal dialog by setting the beforeClose event argument cancel value to true. In the following sample, the dialog is closed when you enter the username value with minimum 4 characters. Otherwise, it will not be closed.

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
import './App.css';

class App extends React.Component<{}, {}> {
  public dialogInstance: DialogComponent;
  public userName: HTMLInputElement;
  public password: HTMLInputElement;
  public buttons: any = [{
    buttonModel: {
        content: 'LOG IN',
        cssClass: 'e-flat',
        isPrimary: true,
    },
    'click': () => {
        this.dialogInstance.hide();
    }
  }];

  public dialogContent(): JSX.Element {
    return (
      <div className="login-form">
          <div className='wrap'>
              <div id="heading"/>
              <div className="e-float-input">
                  <input id="textvalue" type="text" ref = {user => this.userName = user!} required = {true}/>
                  <span className="e-float-line"/>
                  <label className="e-float-text">Username</label>
              </div>
              <div className="e-float-input">
                  <input id="textvalue2" type="password" ref = {pwd => this.password = pwd!} required = {true}/>
                  <span className="e-float-line"/>
                  <label className="e-float-text">Password</label>
              </div>
          </div>
      </div>
    )
  }
  
  public validation = (args: any): void =>{
      if (this.userName.value === "" && this.password.value === "") {
          args.cancel= true;
          alert("Enter the username and password")
      } else if (this.userName.value === "") {
          args.cancel= true;
          alert("Enter the username")
      } else if (this.userName.value === "") {
          args.cancel= true;
          alert("Enter the password")
      } else if (this.userName.value.length < 4) {
          args.cancel= true;
          alert("Username must be minimum 4 characters")
      } else {
          args.cancel= false;
          this.userName.value = "";
          this.password.value = "";
      }
  }
  
  public render() {
    return (
    <div className="App" id='container'>
  
        <DialogComponent id="dlg-button" width='300px' isModal={true} target='#container' header='Sign In' showCloseIcon={false} closeOnEscape = {false}
         beforeClose={this.validation} buttons={this.buttons} ref={dialog => this.dialogInstance = dialog!}>
         <div>{this.dialogContent()}</div>
         </DialogComponent>
    </div>);
  }
}
export default App;
load more v
65%

The dialog has a close button added to aide usability.,A Dialog is a type of modal window that appears in front of app content to provide critical information or ask for a decision. Dialogs disable all app functionality when they appear, and remain on screen until confirmed, dismissed, or a required action has been taken.,scroll=paper the content of the dialog scrolls within the paper element.

<Typography variant="subtitle1">Selected: {selectedValue}</Typography>
<br />
<Button variant="outlined" color="primary" onClick={handleClickOpen}>
  Open simple dialog
</Button>
<SimpleDialog selectedValue={selectedValue} open={open} onClose={handleClose} />
load more v
75%

Accessible modal dialog component for React.JS,Need feedback to push a new version of react-modal forward. See issue #881.,There are several demos hosted on CodePen which demonstrate various features of react-modal:

To install, you can use npm or yarn:

$ npm install--save react - modal
$ yarn add react - modal
import React from 'react';
import ReactDOM from 'react-dom';
import Modal from 'react-modal';

const customStyles = {
  content: {
    top: '50%',
    left: '50%',
    right: 'auto',
    bottom: 'auto',
    marginRight: '-50%',
    transform: 'translate(-50%, -50%)',
  },
};

// Make sure to bind modal to your appElement (https://reactcommunity.org/react-modal/accessibility/)
Modal.setAppElement('#yourAppElement');

function App() {
  let subtitle;
  const [modalIsOpen, setIsOpen] = React.useState(false);

  function openModal() {
    setIsOpen(true);
  }

  function afterOpenModal() {
    // references are now sync'd and can be accessed.
    subtitle.style.color = '#f00';
  }

  function closeModal() {
    setIsOpen(false);
  }

  return (
    <div>
      <button onClick={openModal}>Open Modal</button>
      <Modal
        isOpen={modalIsOpen}
        onAfterOpen={afterOpenModal}
        onRequestClose={closeModal}
        style={customStyles}
        contentLabel="Example Modal"
      >
        <h2 ref={(_subtitle) => (subtitle = _subtitle)}>Hello</h2>
        <button onClick={closeModal}>close</button>
        <div>I am a modal</div>
        <form>
          <input />
          <button>tab navigation</button>
          <button>stays</button>
          <button>inside</button>
          <button>the modal</button>
        </form>
      </Modal>
    </div>
  );
}

ReactDOM.render(<App />, appElement);
load more v
40%

Should be a DialogContent component.,Same as Dialog allowPinchZoom.,Same as Dialog initialFocusRef.

function Example(props) {  const [showDialog, setShowDialog] = React.useState(false);  const open = () => setShowDialog(true);  const close = () => setShowDialog(false);
  return (    <div>      <button onClick={open}>Open Dialog</button>
      <Dialog isOpen={showDialog} onDismiss={close}>        <button className="close-button" onClick={close}>          <VisuallyHidden>Close</VisuallyHidden>          <span aria-hidden>×</span>        </button>        <p>Hello there. I am a dialog</p>      </Dialog>    </div>  );}
load more v
22%

The following text is shared between this article, DOM:window.prompt and DOM:window.alert Dialog boxes are modal windows — they prevent the user from accessing the rest of the program's interface until the dialog box is closed. For this reason, you should not overuse any function that creates a dialog box (or modal window). Regardless, there are good reasons to avoid using dialog boxes for confirmation.,window.confirm() instructs the browser to display a dialog with an optional message, and to wait until the user either confirms or cancels the dialog.,Under some conditions — for example, when the user switches tabs — the browser may not actually display a dialog, or may not wait for the user to confirm or cancel the dialog.

result = window.confirm(message);
load more v
60%

The following example demonstrates the Dialog in action.,The KendoReact Dialog component is part of the KendoReact library of React UI components. It is distributed through NPM under the kendo-react-dialogs package.,The KendoReact Dialog communicates specific information and prompts users to take specific actions by interacting with a modal dialog.

Pretag
 Pretag team - issue, fix, solve, resolve

Other "closed-react" queries related to "React Dialog box closed issue"