Remove [de]registerEventHandler methods from adapters

[patrickrodee]

Our adapters often have registerEventHandler/deregisterEventHandler methods that are used to add and remove event listeners from DOM nodes. Many frameworks (React, Angular, Vue, etc) prefer events to be bound directly on the DOM elements. This has the benefit of not requiring references to the DOM in the component lifecycle and ensuring that the event handlers are appropriately cleaned up on component destruction.

For many of those frameworks, the registerEventHandler/deregisterEventHandler adapter methods become no-ops.

We should remove the registerEventHandler/deregisterEventHandler methods from our adapters and instead expose information about which handlers should be bound to which events. Registering the event handlers will then become the responsibility of those who wrap our components.

Packages that may require updates, as of 5/29/18:

• checkbox
• chips
• dialog
• drawer
• floating-label
• form-field
• grid-list
• icon-button (which replaces icon-toggle)
• line-ripple
• menu
• radio
• ripple
• select
• slider
• snackbar
• top-app-bar (which replaces toolbar)
• tab
• tab-indicator
• text-field and text-field icon

[kfranqueiro]

You say "expose information" which I assume means documentation... but I assume we also need to move any existing registrations out of the foundation and into our vanilla components, right?

[patrickrodee]

That's correct

[kfranqueiro]

Tracking this as one issue for now, but we will undoubtedly want to PR this one package at a time.

IIRC a couple of packages may also dynamically add and remove event handlers (e.g. menu I think?). I'm not sure if we can move registration out of the foundation in those cases?

[aluminick]

Hi, is adapter and foundation the same thing? And can you give me a sample code on integrating MDC with React using adapter/foundation?

[kfranqueiro]

Foundation, adapter, and component are briefly described here: https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md#javascript

We have a codelab that walks through wrapping a component for React: https://codelabs.developers.google.com/codelabs/mdc-112-web/index.html

[moog16]

@abhiomkar I'm going to fix this for top app bar to fix #4527.