MDCTopAppBar buttons ripple effect broken since 12.0.0

hacklschorsch commented 1 year ago

Bug report

I use AutoInit and a bit of static HTML for a small mobile web app. auto-initialising a MDCTopAppBar with MDC 11.0.0 gives working ripple effects for the buttons, from 12.0.0 they don't ripple anymore.

Steps to reproduce

Here's a minimal HTML file. Change version numbers of CDN-included CSS between 11.0.0 and 12.0.0 - ripples in the MDCTopAppBar work up until version 11 and don't from version 12.

<html>

<head>
    <link rel="stylesheet" href="https://unpkg.com/material-components-web@11.0.0/dist/material-components-web.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

<body>
    <header class="mdc-top-app-bar" data-mdc-auto-init="MDCTopAppBar">
        <div class="mdc-top-app-bar__row">
            <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
                <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button"
                    aria-label="Open navigation menu">menu</button>
                <span class="mdc-top-app-bar__title">Page title</span>
            </section>
            <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
                <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button"
                    aria-label="Favorite">favorite</button>
                <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button"
                    aria-label="Search">search</button>
                <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button"
                    aria-label="Options">more_vert</button>
            </section>
        </div>
    </header>
    <main class="mdc-top-app-bar--fixed-adjust">
        <label class="mdc-text-field mdc-text-field--filled" data-mdc-auto-init="MDCTextField">
            <span class="mdc-text-field__ripple"></span>
            <input class="mdc-text-field__input" type="text" aria-labelledby="label">
            <span id="label" class="mdc-floating-label">auto-init working at all?</span>
            <span class="mdc-line-ripple"></span>
        </label>
    </main>
    <script src="https://unpkg.com/material-components-web@11.0.0/dist/material-components-web.js"></script>
    <script type="text/javascript">
        window.mdc.autoInit();
    </script>
</body>

</html>

Actual behavior

No ripples for the buttons in the Top app bar.

Expected behavior

Ripply goodness.

Screenshots

vs.

hacklschorsch commented 1 year ago

Might stem from 33c9a737af75f30f434565e98ada51b335495f0a

mindaugasvcs commented 3 months ago

Still not fixed :/

material-components / material-components-web