[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event

[gertcuykens]

chrome example: https://output.jsbin.com/fotedog

https://jsbin.com/fotedog/edit?html,output

probably related to #629

Not sure how to fix it

[acdvorak]

Thanks for bringing this to our attention!

We'll need to update the component's default adapter implementation to pass {passive: true} as the third parameter to addEventListener() in supported browsers:

material-components-web/packages/mdc-textfield/component.ts

Lines 381 to 390 in ad5743a

	private getInputAdapterMethods_(): MDCTextFieldInputAdapter {
	// tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
	return {
	getNativeInput: () => this.input_,
	isFocused: () => document.activeElement === this.input_,
	registerInputInteractionHandler: (evtType, handler) => this.input_.addEventListener(evtType, handler),
	deregisterInputInteractionHandler: (evtType, handler) => this.input_.removeEventListener(evtType, handler),
	};
	// tslint:enable:object-literal-sort-keys
	}

It looks like a number of components listen to touchstart events: ripple, select, slider, textfield, and tab-bar-scroller. So we might want to extract the applyPassive() function from ripple util and move it to mdc-dom:

material-components-web/packages/mdc-ripple/util.ts

Lines 91 to 109 in 2025c8b

	export function applyPassive(globalObj: Window = window, forceRefresh = false):
	boolean | EventListenerOptions {
	if (supportsPassive_ === undefined || forceRefresh) {
	let isSupported = false;
	try {
	globalObj.document.addEventListener('test', () => undefined, {
	get passive() {
	isSupported = true;
	return isSupported;
	},
	});
	} catch (e) {
	} // tslint:disable-line:no-empty cannot throw error due to tests. tslint also disables console.log.
	supportsPassive_ = isSupported;
	}
	return supportsPassive_ ? {passive: true} as EventListenerOptions : false;
	}

[moog16]

I'm no longer seeing this issue in our screenshot tests, unit tests, or in the jsbin provided. Is this something we should still fix?

[gertcuykens]

When you refresh the page it still happens, why you need to refresh I don't know.

[abhiomkar]

I'm able to reproduce this, the log level should be set to verbose.

[moog16]

I see this with verbose as well.