React: Audio <source> src attribute updates are not recognized

[danbovey]

Do you want to request a feature or report a bug?

bug

Searched other issues but couldn't find anything discussing using <source> tags within <audio> tags. I think it's more of a browser problem than a React problem as it updates the DOM fine but I thought there should be a discussion on solutions/next steps.

What is the current behavior?

Source src example: https://jsfiddle.net/danbovey/km5c3zmq/
Audio src example: https://jsfiddle.net/danbovey/v40cbwpx/

The browser is not recognising any changes React makes to the src prop of <source>, if you change the src prop directly on the <audio> tag the browser re-renders/resets the audio tag as expected.

What is the expected behavior?

The source example should match the behaviour of the audio example. Happens in all browsers.

[aweary]

Thanks for the report @danbovey! This appears to expected behavior. This example shows that setting src on a source element does not update update it's parent media element. This is consistent in Firefox and Chrome.

We can look into ways around this. For now, you can use a key on the audio elements to force React to create new DOM elements, which seems to provide the behavior you're looking for https://jsfiddle.net/74oqdtd8/

[danbovey]

Cool, like I said, I thought it was a browser issue but I don't know much about submitting bugs/feature request to browser vendors - hopefully there's an existing conversation for this, which means this can be closed as it's not React's problem.

[aweary]

Yeah, I'll close this since it's apparently expected and there's an easy workaround.