Merge pull request #388 from preactjs/spellcheck

fix: wrong spellcheck attribute value
preactjs · Aug 15, 2024 · 1754f99 · 1754f99
2 parents b40944a + 4621fa3
commit 1754f99
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 1 deletion.
diff --git a/.changeset/young-avocados-float.md b/.changeset/young-avocados-float.md
@@ -0,0 +1,5 @@
+---
+'preact-render-to-string': patch
+---
+
+Fix `spellCheck={false}` not rendering as `spellcheck="false"`
diff --git a/src/index.js b/src/index.js
@@ -635,6 +635,9 @@ function _renderToString(
 					}
 				} else if (HTML_LOWER_CASE.test(name)) {
 					name = name.toLowerCase();
+					if (name === 'spellcheck') {
+						v = '' + v;
+					}
 				}
 			}
 		}

diff --git a/src/lib/util.js b/src/lib/util.js
@@ -2,7 +2,7 @@ export const VOID_ELEMENTS = /^(?:area|base|br|col|embed|hr|img|input|link|meta|
 export const UNSAFE_NAME = /[\s\n\\/='"\0<>]/;
 export const NAMESPACE_REPLACE_REGEX = /^(xlink|xmlns|xml)([A-Z])/;
 export const HTML_LOWER_CASE = /^accessK|^auto[A-Z]|^cell|^ch|^col|cont|cross|dateT|encT|form[A-Z]|frame|hrefL|inputM|maxL|minL|noV|playsI|popoverT|readO|rowS|spellC|src[A-Z]|tabI|useM|item[A-Z]/;
-export const SVG_CAMEL_CASE = /^ac|^ali|arabic|basel|cap|clipPath$|clipRule$|color|dominant|enable|fill|flood|font|glyph[^R]|horiz|image|letter|lighting|marker[^WUH]|overline|panose|pointe|paint|rendering|shape|stop|strikethrough|stroke|text[^L]|transform|underline|unicode|units|^v[^i]|^w|^xH/;
+export const SVG_CAMEL_CASE = /^ac|^ali|arabic|basel|cap|clipPath$|clipRule$|color|dominant|enable|fill|flood|font|glyph[^R]|horiz|image|letter|lighting|marker[^WUH]|overline|panose|pointe|paint|rendering|shape|stop|strikethrough|stroke|spel|text[^L]|transform|underline|unicode|units|^v[^i]|^w|^xH/;
 
 // DOM properties that should NOT have "px" added when numeric
 const ENCODED_ENTITIES = /["&<]/;

diff --git a/test/render.test.jsx b/test/render.test.jsx
@@ -154,6 +154,14 @@ describe('render', () => {
 			expect(rendered).to.equal(`<div data-checked="false"></div>`);
 		});
 
+		it('should support spellCheck', () => {
+			let rendered = render(<div spellCheck={false} />);
+			expect(rendered).to.equal(`<div spellcheck="false"></div>`);
+
+			rendered = render(<div spellCheck />);
+			expect(rendered).to.equal(`<div spellcheck="true"></div>`);
+		});
+
 		describe('attribute name sanitization', () => {
 			it('should omit attributes with invalid names', () => {
 				let rendered = render(