onClick but the issue is that it's not expending entirely in a single go. As you can see in the video, the element expands, stops, then expands completely. width: '200px' on the <TextFied sx={{ width: '200px' }} /> it works, however, setting relative width doesn't work i.e. <TextField sx={{ width: '80%' }} />