CODEWITHSUNDEEP
javascriptreactjsonclickdialogmaterial-ui
Jonghyeon Lee
Jonghyeon Lee

Reputation: 187

React JS material-ui itemlist dialog is not closing

I am making todolist with material ui and react. I have a problem. I tried to make click event that opens a dialog with detail informations when listitem is clicked. However when i try to close the dialog, the dialog doesn't close. Here is the code i wrote for the test.

import React from 'react';
import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemAvatar from '@material-ui/core/ListItemAvatar';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import ListItemText from '@material-ui/core/ListItemText';
import Avatar from '@material-ui/core/Avatar';
import IconButton from '@material-ui/core/IconButton';
import Checkbox from '@material-ui/core/Checkbox';
import DeleteIcon from '@material-ui/icons/Delete';
import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
import ConfirmationNumberIcon from '@material-ui/icons/ConfirmationNumber';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogContentText from '@material-ui/core/DialogContentText';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import { QuestItem } from '../common/interfaces';

interface IProps {
  quest: QuestItem | null
}


export default function QuestEntry({ quest } : IProps) {
  const [checked, setChecked] = React.useState(quest?.checked);
  const [questopen, setQuestOpen] = React.useState(false);
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setChecked(event.target.checked);
  };
  const handleClickOpen = () => {
    setQuestOpen(true);
  };

  const handleClose = () => {
    console.log("click");
    setQuestOpen(false);
  };

  return (
    <ListItem button onClick={handleClickOpen}>
      <ListItemAvatar>
        <Avatar>
          <KeyboardArrowDownIcon />
        </Avatar>
      </ListItemAvatar>
      <ListItemText
        primary={quest?.title}
      />
      <ListItemSecondaryAction>
        <Checkbox
          edge="end"
          checked={checked}
          onChange={handleChange}
        />
        {checked && (
        <IconButton edge="end" aria-label="delete">
          <ConfirmationNumberIcon />
        </IconButton>
        )}
        {!checked && (
        <IconButton edge="end" aria-label="delete">
          <DeleteIcon />
        </IconButton>
        )}
      </ListItemSecondaryAction>
      <Dialog open={questopen} onClose={handleClose} aria-labelledby="form-dialog-title">
        <DialogTitle id="form-dialog-title">Quest Info</DialogTitle>
        {/* <DialogContent>
        </DialogContent> */}
        <DialogActions>
          <Button onClick={handleClose} color="primary">
            Close
          </Button>
        </DialogActions>
      </Dialog>
    </ListItem>
  );
}

I think there is connection between mouse focus on dialog. But I can't find any solution from googling please help me!!

Upvotes: 1

Views: 401

Answers (1)

Sahil Paudel
Sahil Paudel

Reputation: 598

Your handleClickOpen is triggered whenever your click on any item on the page dialog box.

You have added onClick={handleClickOpen} to ListItem instead of Avatar.

Just change that it will work as expected 

<ListItem button> //from here
  <ListItemAvatar> 
    <Avatar onClick={handleClickOpen}> // to here
      <KeyboardArrowDownIcon />
    </Avatar>
  </ListItemAvatar>
  <ListItemText primary={"hello"} />
 ......rest of the code

Upvotes: 1

Related Questions