[Material UI] Dialog 컴포넌트 화살표 키 (PgUp, PgDn) Internal scroll 추가하는 방법

Intro

안녕하세요. 이번 시간에는 MUI Dialog Component 에서 화살표 키 (PgUp, PgDn) Internal scroll 을 추가하는 방법에 대해 알아보겠습니다.

 

Mui Dialog Component

<React.Fragment>
  <Button variant="outlined" onClick={handleClickOpen}>
    Open full-screen dialog
  </Button>
  <Dialog
    fullScreen
    open={open}
    onClose={handleClose}
    TransitionComponent={Transition}
  >
    <AppBar sx={{ position: 'relative' }}>
      <Toolbar>
        <IconButton
          edge="start"
          color="inherit"
          onClick={handleClose}
          aria-label="close"
        >
          <CloseIcon />
        </IconButton>
        <Typography sx={{ ml: 2, flex: 1 }} variant="h6" component="div">
          Sound
        </Typography>
        <Button autoFocus color="inherit" onClick={handleClose}>
          save
        </Button>
      </Toolbar>
    </AppBar>
    <List>
      <ListItemButton>
        <ListItemText primary="Phone ringtone" secondary="Titania" />
      </ListItemButton>
      <Divider />
      <ListItemButton>
        <ListItemText
          primary="Default notification ringtone"
          secondary="Tethys"
        />
      </ListItemButton>
    </List>
  </Dialog>
</React.Fragment>

 

MUI Full Dialog 예시는 다음과 같습니다. 위 코드 활용 시에 기본적으로 화살표 방향키 스크롤이 작동하지 않습니다. PgUp, PgDn 버튼도 마찬가지고요. 

 

How to solve problem

<Dialog open={open} aria-labelledby="dialog-title">
  <DialogTitle id="dialog-title">Modal title</DialogTitle>
  <DialogContent dividers tabIndex={0}>
    <div className={classes.DialogContent}>
    </div>
  </DialogContent>
</Dialog>

 

DialoContent 태그에 tabIndex={0} 속성을 추가하면 화살키 표를 통해 up & down 스크롤을 실행시킬 수 있습니다. PgUp, PgDn 버튼도 잘 작동하고요. 

 

Conclusion

Mui Full Dialog 를 이용하면서 스크롤이 생긴 화면에 대해 화살표키가 먹지 않아 답답했는데, 해당 속성을 적용하니 바로 작동되어 편하게 이용할 수 있었습니다 :) 

---

 

https://mui.com/material-ui/react-dialog/

https://github.com/mui/material-ui/issues/24953