Merge pull request #3720 from preactjs/support-falsy-data

support falsy data attributes
preactjs · Sep 13, 2022 · d7a433e · d7a433e
2 parents a8e4c99 + e159f84
commit d7a433e
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 5 deletions.
diff --git a/compat/test/browser/render.test.js b/compat/test/browser/render.test.js
@@ -475,6 +475,16 @@ describe('compat render', () => {
 		expect(updateSpy).to.not.be.calledOnce;
 	});
 
+	it('should support false aria-* attributes', () => {
+		render(<div aria-checked={false} />, scratch);
+		expect(scratch.firstChild.getAttribute('aria-checked')).to.equal('false');
+	});
+
+	it('should support false data-* attributes', () => {
+		render(<div data-checked={false} />, scratch);
+		expect(scratch.firstChild.getAttribute('data-checked')).to.equal('false');
+	});
+
 	it("should support react-relay's usage of __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED", () => {
 		const Ctx = createContext('foo');
 

diff --git a/src/diff/props.js b/src/diff/props.js
@@ -133,10 +133,7 @@ export function setProperty(dom, name, value, oldValue, isSvg) {
 
 		if (typeof value === 'function') {
 			// never serialize functions as attribute values
-		} else if (
-			value != null &&
-			(value !== false || (name[0] === 'a' && name[1] === 'r'))
-		) {
+		} else if (value != null && (value !== false || name.indexOf('-') != -1)) {
 			dom.setAttribute(name, value);
 		} else {
 			dom.removeAttribute(name);

diff --git a/test/browser/render.test.js b/test/browser/render.test.js
@@ -462,11 +462,21 @@ describe('render()', () => {
 		expect(scratch.childNodes[0]).to.have.property('className', 'bar');
 	});
 
-	it('should support false aria-* attributes', () => {
+	it('should support false string aria-* attributes', () => {
 		render(<div aria-checked="false" />, scratch);
 		expect(scratch.firstChild.getAttribute('aria-checked')).to.equal('false');
 	});
 
+	it('should support false aria-* attributes', () => {
+		render(<div aria-checked={false} />, scratch);
+		expect(scratch.firstChild.getAttribute('aria-checked')).to.equal('false');
+	});
+
+	it('should support false data-* attributes', () => {
+		render(<div data-checked={false} />, scratch);
+		expect(scratch.firstChild.getAttribute('data-checked')).to.equal('false');
+	});
+
 	it('should set checked attribute on custom elements without checked property', () => {
 		render(<o-checkbox checked />, scratch);
 		expect(scratch.innerHTML).to.equal(