[React 19] SVG with dangerouslySetInnerHTML content does not trigger first click

[zdravkov]

Summary

Hi all,

Here is the scenario that we found out while testing with both the latest rc and the beta that works correctly with React 18.
We have an SVG element that does not trigger its first click if it is focusable (or positioned inside a focusable element) that changes some state on focus.

Steps to reproduce:
Open the Stackblitz example and open its console
Click 1 time on the triangle svg element
Expected:
'svg click' message is logged
Current:
no message is logged

(On the second and all next clicks the message is shown as expected - only the first click is not triggered)
Here are the stackblitz examples where the issue can be observed:
rc: https://stackblitz.com/edit/react-vsxt51-w3ktmp?file=app%2Fapp.tsx - not working
beta: https://stackblitz.com/edit/react-vsxt51-ssqptj?file=app%2Fapp.tsx - not working
And here is how it is working in React 18:
React 18: https://stackblitz.com/edit/react-vsxt51-xsg1yu?file=app%2Fapp.tsx - working

Code:

const App = () => {
  const [focused, setFocused] = React.useState(false);
  const handleFocus = () => {
    setFocused(true);
  };

  return (
    <svg
      onFocus={handleFocus}
      tabIndex={1}
      onClick={() => {
        console.log('svg click');
      }}
      viewBox="0 0 512 512"
      dangerouslySetInnerHTML={{
        __html: '<path d="M256 352 128 160h256z" />',
      }}
    ></svg>
  );
};

[rinika-web]

Hi,

I noticed this issue and I'd like to contribute to help resolve it. I have experience working with React, SVG elements, and event handling, and I believe I can assist in identifying the root cause or proposing a solution.

This will be my first time contributing to open source, so I’d appreciate any guidance on the next steps or specific areas of the codebase I should focus on. I’ll start by reproducing the issue locally and analysing the behaviour across different React versions.

Looking forward to contributing

[nareshmurty]

Hi,
I noticed this issue, const [focused, setFocused] = React.useState(true); // I made the value changes from false to true.
Now it is working

import * as React from 'react';

const App = () => {
const [focused, setFocused] = React.useState(true);
const handleFocus = () => {
setFocused(true);
};

return (
<svg
onFocus={handleFocus}
tabIndex={1}
onClick={() => {
console.log('svg click');
}}
viewBox="0 0 512 512"
dangerouslySetInnerHTML={{
__html: '',
}}
>
);
};

export default App;

[zdravkov]

@nareshmurty - Indeed, this is part of the bug scenario - the issue is observed when any change of the state is attempted in the onFocus event - it should be possible to change the state in this event and currently it is not.

[nareshmurty]

@zdravkov - I got a solution related to the above scenario but I don't know whether it is the best way or not.

• Using the setTimeout(), may be we can delay the state update, here it is working fine during state change

import * as React from 'react';

const App = () => {
const [focused, setFocused] = React.useState(false);
const handleFocus = () => {
setTimeout(() => {
setFocused(true);
console.log(focused);
}, 500);
};

return (
<svg
onFocus={handleFocus}
tabIndex={1}
onClick={() => {
console.log('svg click');
}}
viewBox="0 0 512 512"
dangerouslySetInnerHTML={{
__html: '',
}}
>
);
};

export default App;

[zdravkov]

@nareshmurty thank you for your efforts! The suggested approach rather seems like a workaround than a solution to me. A solution here would be fixing the bug in the new React 19 codebase.