[TextField] Remove usage of dangerouslySetInnerHTML (#30776)

mui · Jan 26, 2022 · 8cf69de · 8cf69de
1 parent 5cde5d3
commit 8cf69de
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 8 deletions.
diff --git a/packages/mui-material/src/FormHelperText/FormHelperText.js b/packages/mui-material/src/FormHelperText/FormHelperText.js
@@ -111,8 +111,7 @@ const FormHelperText = React.forwardRef(function FormHelperText(inProps, ref) {
     >
       {children === ' ' ? (
         // notranslate needed while Google Translate will not fix zero-width space issue
-        // eslint-disable-next-line react/no-danger
-        <span className="notranslate" dangerouslySetInnerHTML={{ __html: '&#8203;' }} />
+        <span className="notranslate">&#8203;</span>
       ) : (
         children
       )}

diff --git a/packages/mui-material/src/InputAdornment/InputAdornment.js b/packages/mui-material/src/InputAdornment/InputAdornment.js
@@ -127,8 +127,7 @@ const InputAdornment = React.forwardRef(function InputAdornment(inProps, ref) {
             {/* To have the correct vertical alignment baseline */}
             {position === 'start' ? (
               /* notranslate needed while Google Translate will not fix zero-width space issue */
-              /* eslint-disable-next-line react/no-danger */
-              <span className="notranslate" dangerouslySetInnerHTML={{ __html: '&#8203;' }} />
+              <span className="notranslate">&#8203;</span>
             ) : null}
             {children}
           </React.Fragment>

diff --git a/packages/mui-material/src/OutlinedInput/NotchedOutline.js b/packages/mui-material/src/OutlinedInput/NotchedOutline.js
@@ -76,8 +76,7 @@ export default function NotchedOutline(props) {
           <span>{label}</span>
         ) : (
           // notranslate needed while Google Translate will not fix zero-width space issue
-          // eslint-disable-next-line react/no-danger
-          <span className="notranslate" dangerouslySetInnerHTML={{ __html: '&#8203;' }} />
+          <span className="notranslate">&#8203;</span>
         )}
       </NotchedOutlineLegend>
     </NotchedOutlineRoot>

diff --git a/packages/mui-material/src/Select/SelectInput.js b/packages/mui-material/src/Select/SelectInput.js
@@ -499,8 +499,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
         {/* So the vertical align positioning algorithm kicks in. */}
         {isEmpty(display) ? (
           // notranslate needed while Google Translate will not fix zero-width space issue
-          // eslint-disable-next-line react/no-danger
-          <span className="notranslate" dangerouslySetInnerHTML={{ __html: '&#8203;' }} />
+          <span className="notranslate">&#8203;</span>
         ) : (
           display
         )}