-
Notifications
You must be signed in to change notification settings - Fork 780
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
Boolean attributes #629
Boolean attributes #629
Conversation
Codecov Report
@@ Coverage Diff @@
## master #629 +/- ##
=====================================
Coverage 100% 100%
=====================================
Files 1 1
Lines 166 166
Branches 52 52
=====================================
Hits 166 166
Continue to review full report at Codecov.
|
How is this different to #592? |
#592 behavior: // before
<input spellcheck="false" data-x="false" /> // => <input spellcheck="true" data-x="false" />
<input spellcheck={false} data-x={false} /> // => <input spellcheck="false" />
// after
<input spellcheck="false" data-x="false" /> // => <input spellcheck="true" data-x="false" />
<input spellcheck={false} data-x={false} /> // => <input spellcheck="false" data-x="false" />
// SSR
<input spellcheck="false" data-x="false" /> // => <input spellcheck="false" data-x="false" />
<input spellcheck={false} data-x={false} /> // => <input /> so, this PR is about reserved DOM attributes while #592 is about custom DOM attributes. |
src/index.js
Outdated
@@ -153,7 +153,7 @@ export function app(state, actions, view, container) { | |||
typeof value === "function" || | |||
(name in element && name !== "list" && !isSVG) | |||
) { | |||
element[name] = value == null ? "" : value | |||
element[name] = value == null || value === "false" ? "" : value |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
or we can use regex here: /^false$/i.test(value)
it will be more robust (users can use False
, FALSE
etc) but slower
<input spellcheck="false" /> // => <input spellcheck="false" />
<input spellcheck="False" /> // => <input spellcheck="true" />
<input spellcheck="FALSE" /> // => <input spellcheck="true" />
// vs regexp
<input spellcheck="false" /> // => <input spellcheck="false" />
<input spellcheck="False" /> // => <input spellcheck="false" />
<input spellcheck="FALSE" /> // => <input spellcheck="false" />
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
HTML spec allow different cases ?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, HTML case insensitive
Unrelated but related. Adding it here before I forget. preactjs/preact#983 |
@frenzzy But why not use |
Because <input data-example={false} /> // renders <input /> Also <input data-example="false" /> // renders <input data-example="false" /> The problem only in bunch of DOM attributes such as After this change |
ee94ef1
to
975f203
Compare
@frenzzy Why does "false" work for some attributes and not for others? I am trying to leave this information documented here for our record. |
Because of the way how we modify attributes (props vs attributes): const el = document.createElement('input')
el.spellcheck = false // => <input spellcheck="false" />
el.spellcheck = 'false' // => <input spellcheck="true" /> !!! Noooo...
el.setAttribute('spellcheck', false) // => <input spellcheck="false" />
el.setAttribute('spellcheck', 'false') // => <input spellcheck="false" />
el.setAttribute('data-custom', false) // => <input data-custom="false" />
el.setAttribute('data-custom', 'false') // => <input data-custom="false" /> see also #634 |
a02b0d9
to
0b88944
Compare
Looks like hyperapp has problems with all kind of boolean attribute values // jsx => html
<div translate="yes" /> // => <div translate="yes"></div>
<div translate="no" /> // => <div translate="yes"></div> <= No! Probably related: facebook/react#10589 |
I think we should make only |
b8fef98
to
b8d26a2
Compare
de86cf8
to
ef44361
Compare
Demos:
|
ef44361
to
c0f3013
Compare
|
bda9768
to
11c99a0
Compare
Let's wait after 2.0. Then let's figure out what to do. |
src/index.js
Outdated
} else if ( | ||
name in element && | ||
name !== "list" && | ||
!(typeof value === "string" && typeof element[name] === "boolean") && |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@frenzzy What about only typeof value === "string"
?
So, removing typeof element[name] === "boolean"
.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nevermind :D
11c99a0
to
23778ee
Compare
Thanks, @frenzzy! 1.2.8 🎉 |
Fixes #628
With this change we may rich consistent behavior between client and server rendering for reserved DOM attributes such as
spellcheck
ordraggable
, see:before
after
SSR