Select polyfill alt

[developit]

Alternative solution. There are a few properties that exist on <select> elements but not other inputs. This isn't ideal from a performance perspective, but the check only runs on onInput handlers, so the impact should be minimal. Alternatively, we could plumb vnode through prop diffing functions and check vnode.type.

Properties audit:

const select = document.createElement('select');
const others = ['input', 'textarea', 'div', 'option', 'optgroup'].map(x=>document.createElement(x));
others.push(document.createTextNode(''));
for (let i in select) {
  if (!others.some(o => i in o)) {
    console.log(`select.${i} = ${select[i]}.`);
  }
}

/*
// results:
select.options = [object HTMLOptionsCollection]
select.selectedOptions = [object HTMLCollection]
select.selectedIndex = -1.
select.item = function item() { [native code] }
select.namedItem = function namedItem() { [native code] }
select.add = function add() { [native code] }
*/

[github-actions]

Size Change: +73 B (0%)

Total Size: 38.6 kB

Filename	Size	Change
dist/preact.js	3.74 kB	+15 B (0%)
dist/preact.min.js	3.74 kB	+15 B (0%)
dist/preact.module.js	3.76 kB	+15 B (0%)
dist/preact.umd.js	3.82 kB	+28 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
compat/dist/compat.js	3 kB	0 B
compat/dist/compat.module.js	3.03 kB	0 B
compat/dist/compat.umd.js	3.05 kB	0 B
debug/dist/debug.js	3.08 kB	0 B
debug/dist/debug.module.js	3.07 kB	0 B
debug/dist/debug.umd.js	3.15 kB	0 B
devtools/dist/devtools.js	175 B	0 B
devtools/dist/devtools.module.js	185 B	0 B
devtools/dist/devtools.umd.js	252 B	0 B
hooks/dist/hooks.js	1.05 kB	0 B
hooks/dist/hooks.module.js	1.08 kB	0 B
hooks/dist/hooks.umd.js	1.13 kB	0 B
test-utils/dist/testUtils.js	390 B	0 B
test-utils/dist/testUtils.module.js	392 B	0 B
test-utils/dist/testUtils.umd.js	469 B	0 B

_{compressed-size-action}

[coveralls]

Coverage decreased (-0.8%) to 98.958% when pulling 73198f9 on select-polyfill-alt into d0215a1 on select-polyfill.

[cristianbote]

I like it 😃

[cristianbote]

🤔 are props defined in here? Couldn't find them. Maybe I'm missing something.

[marvinhagemeister]

I think we need to differentiate vnode.type and the input type which is usually in props.type here. As far as I can tell both are needed to pass this check. So we'd need to pass props through the arguments.

[sventschui]

Suggested change

	type === 'input' && /rad|check/.test(props.type)
	type === 'input' && /rad|check/.test(type)

I guess @cristianbote is right here :)

[cristianbote]

I was thinking this is what @developit wanted but, since the first condition checks that type is strictly equal to 'input' the next condition will never be true, isn't it? Cause that'll end-up with /rad|check/.test('input') which is not true.

[ForsakenHarmony]

the type in scope right now is the vnode type (html tag / component)

we need props.type which is the type of the input

<input type="radio">
 -----       -----
 |           |
 |           props.type
 vnode.type

[cristianbote]

Oh, that means that value should be there instead.

[ForsakenHarmony]

if you're talking about the value in scope, no
that's the event listener function

[cristianbote]

You are right, I've added a solution below.

[cristianbote]

Suggested change

	if (name === 'input' && (
	type === 'select' ||
	type === 'input' && /rad|check/.test(props.type)
	if ((name === 'input' || /rad|check/.test(name)) &&
	(type === 'select' || type === 'input')

This one makes the tests to pass for radio and checkboxes as well. Is this what you had in mind @developit? 😄