hyperscript icon indicating copy to clipboard operation
hyperscript copied to clipboard

minlength being ignored

Open christianbundy opened this issue 5 years ago • 7 comments

Anyone know why this might be happening?

const h = require("hyperscript");

const el = h("input", { type: "text", minlength: 42, maxlength: 420 });
console.log(el.outerHTML);
<input type="text" maxlength="420">

christianbundy avatar Feb 02 '20 20:02 christianbundy

Just want to confirm that this doesn't seem to be caused by the underlying HTML-Element library:

const document = require("html-element").document;

const el = document.createElement("input");
el.setAttribute("type", "text");
el.setAttribute("minlength", 42);
el.setAttribute("maxlength", 420);
console.log(el.outerHTML);

christianbundy avatar Feb 02 '20 20:02 christianbundy

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

The hyperscript library sets DOM properties, not HTML attributes, try minLength and maxLength

Raynos avatar Feb 03 '20 10:02 Raynos

Wow, that's fantastic. I don't think that I realized the difference. I'm a bit surprised that maxlength worked, but I'll try this instead. Thanks a bunch.

christianbundy avatar Feb 03 '20 15:02 christianbundy

Sorry, I'm getting the same result with minLength. Are you getting different behavior between minlength and minLength? It's the same for me.

christianbundy avatar Feb 03 '20 16:02 christianbundy

Looks like a bug in the HTML-Element library -- I'll report upstream.

const document = require("html-element").document;

const el = document.createElement("input");

el.type = "text"
el.minlength = 42
el.minLength = 43
el.maxlength = 420
el.maxLength = 421

console.log(el.outerHTML);
<input type="text" maxlength="420" maxLength="421">

But running this in a browser yields:

<input type="text" minlength="43" maxlength="421">

christianbundy avatar Feb 03 '20 16:02 christianbundy

That PR got merged and they've released a new version of the package so this issue is probably solved now?

Powersource avatar May 03 '20 18:05 Powersource

A quick test and the issue seems to still be there for me even when using latest html-element, but someone should take a closer look

Powersource avatar May 03 '20 18:05 Powersource