The Ultimate Guide to MUI Box onClick (With TypeScript)

The MUI Box is a utility component for controlling the layout of child components. It has a few handy styling shortcuts such as m (a shortcut for margin) and p (padding). It renders as a div.

The Box can use all the HTML attributes that a div can use. In this post we’ll explore click listeners, focus listeners, and blur listeners. I’ll also show how bubbling works when a child button is clicked inside a Box.

MUI Clickable Box
MUI Clickable Box

All Box events will have proper TypeScript typing.

Here’s a YouTube video version of this post or watch it below:

How to Quickly Align Buttons in the...
How to Quickly Align Buttons in the MUI Box Component (v5)

MUI Box onClick

We can quickly add a click handler to the Material-UI Box with onClick={(event)=>{}}, where event is the event object. Here is a snapshot of some of the fields. There is lots of useful info, such as x and y position, and click target info.

MUI Box onClick event object fields
MUI Box onClick event object fields

I like to create a const handler for events. The handler needs proper TypeScript typing for the click event object. Here is the event type: event: React.MouseEvent<HTMLDivElement, MouseEvent>

If you are struggling to figure out the TypeScript type, hover over the onClick attribute. VS Code will suggest the proper type:

MUI Box onClick With TypeScript
MUI Box onClick With TypeScript

In this example, I wrapped a Label and a Button in a Box. Anywhere that the Box is clicked will trigger a click event. However, the Button is also clickable. When the Button is clicked, it handles a click event and then the event bubbles up to the Box, which also handles the click event. Both event handlers get independently called.

Here is the full code:

import Box from "@mui/material/Box";
import Divider from "@mui/material/Divider";
import Button from "@mui/material/Button";
import FormLabel from "@mui/material/FormLabel";

const handleBoxClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
  console.log('Box click');
  console.log(event);
}


export default function ClickableBox() {
  return (
    <Box sx={{padding: 2, border: '1px solid', borderColor: 'primary.main', borderRadius: 2}} onClick={handleBoxClick}>
      <FormLabel>Just a Label</FormLabel>
      <Divider sx={{borderBottomWidth: '4px', margin: 1}}/>
      <Button
        variant="contained"
        onClick={()=>console.log('Button click')}
      >
        Just a Button
      </Button>
    </Box>
  );
}

MUI Box onFocus

We can easily add a focus event handler. The TypeScript typing is a little bit different: event: React.FocusEvent<HTMLDivElement>.

Focus fires when the Box is tabbed into.

const handleFocus = (event: React.FocusEvent<HTMLDivElement>) => {
  console.log('focus');
}

//JSX
<Box onBlur={handleFocus}/>

The focus event also fires when you come back to a web page that had an element in focus, and it gets refocused.

MUI Box onBlur

The onBlur event fires when a focused element is tabbed away from or clicked away from. Interestingly, the TypeScript typing is the same for focus and blur.

const handleBlur = (event: React.FocusEvent<HTMLDivElement>) => {
  console.log('blur');
}

//JSX
<Box onBlur={handleBlur}/>

Related Links

These posts contain additional useful info:

MUI Box API

Share this post:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.