Avoid setting value for progress with nullish value

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';

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