Ensure preact/compat is not converting onchange to oninput for input type="range" in IE11

[gcraftyg]

When using preact/compat, an input of type="range" converts an onchange to oninput except in IE11. This mimics react's implementation as oninput will not fire on an <input type="range" /> in IE11.

I came across a situation where I was not seeing the onChange prop firing in IE11. Looking at it closer, preact/compat detects IE11 by checking typeof Symbol != 'undefined'. This works well as long as Symbol is not being polyfilled, for instance in a NextJS app with preact.

This PR is adding an additional check to verify that Symbol is native to the browser and not polyfilled, allowing for <input type="range" /> to behave as expected.

[coveralls]

Coverage increased (+0.8%) to 100.0% when pulling 2a09279 on gcraftyg:compat-input-range-ie11-check into 3898945 on preactjs:master.

[marvinhagemeister]

Good catch, this is great! Let's add a quick unit test to make sure we don't regress on this in the future. Our suite runs tests in all browsers including IE11 automatically, so a test where we test if a value was changed should do the job 👍

[gcraftyg]

Thanks for taking a look at this @marvinhagemeister.

To clarify on the test coverage, we could amend the existing test:

preact/compat/test/browser/events.test.js

Lines 73 to 85 in 9aa7d38

	it('should normalize onChange for range, except in IE11', () => {
	// NOTE: we don't normalize `onchange` for range inputs in IE11.
	const eventType = /Trident\//.test(navigator.userAgent)
	? 'change'
	: 'input';
	render(<input type="range" onChange={() => null} />, scratch);
	expect(proto.addEventListener).to.have.been.calledOnce;
	expect(proto.addEventListener).to.have.been.calledWithExactly(
	eventType,
	sinon.match.func,
	false
	);
	});

or add a new test, to include a Symbol polyfill when it is ran in IE11. That would replicate the problematic scenario we're guarding against. But I'm not sure if that's the same as what you were suggesting.

I'm happy to add the test, just looking for clarification. Thanks!

[marvinhagemeister]

@gcraftyg yup, that sounds perfect. Either way, amending or adding a new test is fine, as long as we have something that checks for it in the CI 👍

[gcraftyg]

I pushed up a test that guards against the regression. In order to polyfill Symbol for the test, I converted the input type check into a function call. It was originally a variable assignment, but that was being assigned before the tests were run.

My preference would be to keep it as a variable, but I'm not aware of a way to inject a polyfill for a specific test before the module is imported.

[marvinhagemeister]

Sweet, the test is perfect! Thank you so much for your PR 🙌

[JoviDeCroock]

Awesome, thank you so much!