Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

minlength being ignored #91

Open
christianbundy opened this issue Feb 2, 2020 · 7 comments
Open

minlength being ignored #91

christianbundy opened this issue Feb 2, 2020 · 7 comments

Comments

@christianbundy
Copy link

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
Copy link
Author

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);

@Raynos
Copy link
Collaborator

Raynos commented Feb 3, 2020

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

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

@christianbundy
Copy link
Author

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
Copy link
Author

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
Copy link
Author

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">

@Powersource
Copy link

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

@Powersource
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants