Search code examples
htmlcssreactjsmaterial-uiz-index

Material UI Drawer component adding unwanted shadow when not focused

I'm having some issues using the Material UI Drawer component. When I try to display it in my webpage it tries to force the focus to the inner div and adds a shadow or border to the component if you're focused anywhere else.

Does anyone know what's causing this shadow to appear and how to disable it? Example screenshot below - you'll see a blue edge at the bottom (this is the same all the way round if I resize the element)

As soon as you click on content inside the Drawer e.g. a List element the shadow goes away. I assume it must be something to do with the component being modal?

<Drawer PaperProps={{ className: classes.floatingMenu }} anchor='top' open onClose={() => {}}>
    <div className={classes.dummy}>
    </div>
</Drawer>

Note: The floatingMenu class only adds a margin at the top of 55px (i.e. the height of the AppBar - nothing else).

enter image description here

Solution

  • I was able to fix the issue in a little more simplistic manner after reading the doc's a bit more. On the Modal page it states:

    Notice that you can disable the outline (often blue or gold) with the outline: 0 CSS property.

    Based on this I didn't touch the component or inner components from my question but instead I simply added one extra CSS class outline: 0 to floatingMenu (which is already passed to the PaperProps):

    floatingMenu: {
    marginTop: '55px',
    outline: 0
}

    This resolved the problem and I no longer see the blue shadow border.