This repository has been archived by the owner on Jan 13, 2025. It is now read-only.
Closed
Description
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.
