From c7b6ea395126cb271bade693865dfd7bc1c0a52e Mon Sep 17 00:00:00 2001
From: Jovi De Croock <decroockjovi@gmail.com>
Date: Thu, 12 Sep 2024 18:52:04 +0200
Subject: [PATCH] Avoid setting value for progress with nullish value

---
 src/diff/index.js           |  6 ++++--
 test/browser/render.test.js | 12 ++++++++++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/diff/index.js b/src/diff/index.js
index 40f17aea14..630e5d330e 100644
--- a/src/diff/index.js
+++ b/src/diff/index.js
@@ -538,14 +538,16 @@ function diffElementNodes(
 				// despite the attribute not being present. When the attribute
 				// is missing the progress bar is treated as indeterminate.
 				// To fix that we'll always update it when it is 0 for progress elements
-				(inputValue !== dom[i] ||
-					(nodeType === 'progress' && !inputValue) ||
+				((inputValue !== dom[i] && nodeType !== 'progress') ||
+					(nodeType === 'progress' && inputValue === 0) ||
 					// This is only for IE 11 to fix <select> value not being updated.
 					// To avoid a stale select value we need to set the option.value
 					// again, which triggers IE11 to re-evaluate the select value
 					(nodeType === 'option' && inputValue !== oldProps[i]))
 			) {
 				setProperty(dom, i, inputValue, oldProps[i], namespace);
+			} else if (nodeType === 'progress' && inputValue == null) {
+				dom.removeAttribute('value');
 			}
 
 			i = 'checked';
diff --git a/test/browser/render.test.js b/test/browser/render.test.js
index 0c16f227a1..a7c967c966 100644
--- a/test/browser/render.test.js
+++ b/test/browser/render.test.js
@@ -919,6 +919,18 @@ describe('render()', () => {
 		expect(scratch.firstChild.getAttribute('value')).to.equal('0');
 	});
 
+	// #4487
+	it('should not set value for undefined/null on a progress element', () => {
+		render(<progress value={undefined} />, scratch);
+		expect(scratch.firstChild.getAttribute('value')).to.equal(null);
+		render(<progress value={null} />, scratch);
+		expect(scratch.firstChild.getAttribute('value')).to.equal(null);
+		render(<progress value={0} />, scratch);
+		expect(scratch.firstChild.getAttribute('value')).to.equal('0');
+		render(<progress value={null} />, scratch);
+		expect(scratch.firstChild.getAttribute('value')).to.equal(null);
+	});
+
 	it('should always diff `checked` and `value` properties against the DOM', () => {
 		// See https://github.com/preactjs/preact/issues/1324