Test add testing for video muted

facebook · Oct 24, 2020 · d5b38d1 · d5b38d1
1 parent be8b1d0
commit d5b38d1
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
@@ -1221,6 +1221,15 @@ describe('ReactDOMComponent', () => {
       }
     });
 
+    it('video muted prop should show as an attribute', () => {
+      const container = document.createElement('div');
+      ReactDOM.render(
+        <video src="http://example.org/video" muted={true} />,
+        container,
+      );
+      expect(container.firstChild.hasAttribute('muted')).toBe(true);
+    });
+
     it('should not duplicate uppercased selfclosing tags', () => {
       class Container extends React.Component {
         render() {

diff --git a/packages/react-dom/src/client/DOMPropertyOperations.js b/packages/react-dom/src/client/DOMPropertyOperations.js
@@ -170,7 +170,15 @@ export function setValueForProperty(
     } else {
       // Contrary to `setAttribute`, object properties are properly
       // `toString`ed by IE8/9.
-      (node: any)[propertyName] = value;
+      // props that needs an attribute to work (mute) needs to wait for the attribute to be rendered first so it won't cause
+      // a change on the property
+      if (propertyMustUseAttribute) {
+        setTimeout(() => {
+          (node: any)[propertyName] = value;
+        }, 0);
+      } else {
+        (node: any)[propertyName] = value;
+      }
     }
     if (!propertyMustUseAttribute) {
       return;