Comments (7)
Are you using a proper transpiler? if you pass a new array each time the input gets trashed and re-created, but I am not planning to fix manual ES6+ attempts, as that's not what's in production.
hyperHTML.wire()`<input type="number" id="delay" value=${0} />`
Once transpiled properly, and last time I've checked, everything works fine.
from hyperhtml.
This is sample where i try once render numeric input and add to body. In this sample i use transpiled earlier code
https://jsfiddle.net/26rmkd7u/3/
As you can see, bug is reproduced
from hyperhtml.
OK, the type
apparently messes up IE11, which drops the intended value.
This is officially a mess.
from hyperhtml.
So, here the thing: if I fix this, I'll cause 1 years of regressions to every other attribute that works in both Edge and IE9, IE10, and IE11.
Solution
Use an intent:
hyperHTML.define(
'data-value',
function (node, value) {
node.value = value;
return value;
}
);
You define that once, and you can style any of your inputs as such:
hyperHTML.wire()(['<input id="delay" type="number" data-value="','">'], 0)
Please note this is needed only if you use type
attribute, it's not needed in any other case.
Alternatively, you can use data-type
instead, and keep the value
simple:
hyperHTML.define(
'data-type',
function (node, value) {
node.type = value;
return value;
}
);
hyperHTML.wire()(['<input id="delay" data-type="', "number", '" value="','">'], 0)
This allows you to not care about all other inputs that don't need a type.
Before transpilation, that'd look like:
hyperHTML.wire()`<input data-type="${'number'}" value=${0}>`
The Issue
If you go to a blank page with any other browser, and you type the following, you'll see the expected result:
var template = document.createElement('template');
template.innerHTML = '<input type="number" value="_dt: -0.123456%">';
console.log(template.content.childNodes[0].attributes[1].value);
// _dt: -0.123456%
If you do the same in IE11, you cannot use the native template
tag, because it doesn't exist, so you need to write this:
var template = document.createElement('template');
template.innerHTML = '<input type="number" value="_dt: -0.123456%">';
console.log(template.childNodes[0].attributes[1].value);
// "" <==== empty bloody string
In few words, IE11 makes it impossible to understand where is the interpolation when it comes to input fields with a type, because it does ahead-of-time validation, and there's honestly, and literally, nothing I can do.
Thanks gosh hyperHTML has intents to define data-value
, which would work out of the box, now I have to write this in the documentation/README and also inform lighterhtml users that IE11 won't work with typed attributes.
I'll never explain enough how much I hate that browser.
Unless some solution comes up, which is not just by dropping _dt:
prefix from the unique ID, as there is a reason that's in like that, I don't think I can fix this.
from hyperhtml.
Alternative
With lighterhtml you wouldn't have this issue as long as you use .value=${...}
instead of value=${...}
(note the dot upfront)
lighterhtml.render(
document.body,
lighterhtml.html(['<input id="delay" type="number" .value="','">'], 0)
);
The .
direct property is not part of hyperHTML, but I wonder, at this point, if it should be.
I'll think about it, at least there are workaround for both libraries.
from hyperhtml.
@kerim-ar I've just published hyperHTML v2.32.0
which includes the same feature lighterhtml offers when it comes to attributes: the .attribute=${value}
feature.
This means that you can now do the same in hyperHTML:
hyperHTML.wire()`<input type="number" .value=${0}>`
And that would work out of the box 👋
from hyperhtml.
Thank you
from hyperhtml.
Related Issues (20)
- Booleans render as strings. In conditional rendering this can be unexpected. HOT 3
- crash in domdiff HOT 6
- Form can not have element with id of 'remove' HOT 6
- offsetWidth and offseHeight return 0 HOT 2
- What am I doing wrong? HOT 2
- Can we use hyperhtml without bundler or any other tooling HOT 4
- Boolean readonly attribute HOT 4
- Weak relation in wire method is not working HOT 4
- "original.cloneNode is not a function" using hyperhtml with basichtml HOT 2
- Only last element renders when reusing HOT 6
- Why so many projects? HOT 4
- Inline styles renders empty HOT 5
- Commuunity? HOT 9
- Is re-executing the render function locally a good practice? HOT 4
- 2.34.x is a breaking change, should be 3.0.x HOT 23
- README, dedicated forum and collective HOT 6
- Reuse Nodes also removed from new place HOT 7
- Time to drop legacy support for IE? HOT 3
- replace istanbul HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hyperhtml.