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.
All Box events will have proper TypeScript typing.
Here’s a YouTube video version of this post or watch it below:
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.
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:
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:
