IconButton close css on header dialog misaligned with its icon

[ahmadshiddiqn]

Describe the bug The CSS of close IconButton (hover and focus state) is misaligned with the icon on the header dialog full screen when the dialog is default opened. But when clicked or browser size changed, it fixed by itself.

To Reproduce Steps to reproduce the behavior:

1. Use Full Dialog example code
2. Change open variable to true instead of false (line 39)
3. See error

Expected behavior Same as the example when the dialog is opened through button click

Screenshots (The close button is also autofocused without any action or hardcoded)

Desktop (please complete the following information):

• OS: Windows 10 Pro 64-bit (Version 20H2, Build Ver: 19042.1415)
• Browser: Edge (Version 96.0.1054.62 (Official build) (64-bit))

[jdgamble555]

This is same problem in all browsers: Chromium, Mozilla, etc.

Any workarounds?

I was able to get the X button aligned upon regular view, but not when the media query is active (small resolutions):

<IconButton style="position: absolute; top: 0; right: 0;" action="close" class="material-icons">close</IconButton>

J

[bcazur]

@jdgamble555 - found a weird workaround: setting ripple={false} seems to work for the misaligned positioning of the ripple on hover. But it does still get focus when opening the modal dialog.

<IconButton ripple={false} action="close" class="material-icons">close</IconButton>

@hperrin - any suggestions or ETA? This bug has been opened since Jan (8 months already). Thanks!