Fix Google Translate zero width space issue

mui · Jan 23, 2021 · baf6b73 · baf6b73
1 parent 528d3e5
commit baf6b73
Show file tree

Hide file tree

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

diff --git a/packages/material-ui/src/OutlinedInput/NotchedOutline.js b/packages/material-ui/src/OutlinedInput/NotchedOutline.js
@@ -96,7 +96,12 @@ const NotchedOutline = React.forwardRef(function NotchedOutline(props, ref) {
         >
           {/* Use the nominal use case of the legend, avoid rendering artefacts. */}
           {/* eslint-disable-next-line react/no-danger */}
-          {label ? <span>{label}</span> : <span dangerouslySetInnerHTML={{ __html: '&#8203;' }} />}
+          {label ? (
+            <span>{label}</span>
+          ) : (
+            // notranslate needed while Google Translate will not fix zero width space issue
+            <span className="notranslate" dangerouslySetInnerHTML={{ __html: '&#8203;' }} />
+          )}
         </legend>
       </fieldset>
     );
@@ -125,8 +130,9 @@ const NotchedOutline = React.forwardRef(function NotchedOutline(props, ref) {
         }}
       >
         {/* Use the nominal use case of the legend, avoid rendering artefacts. */}
+        {/* notranslate needed while Google Translate will not fix zero width space issue */}
         {/* eslint-disable-next-line react/no-danger */}
-        <span dangerouslySetInnerHTML={{ __html: '&#8203;' }} />
+        <span className="notranslate" dangerouslySetInnerHTML={{ __html: '&#8203;' }} />
       </legend>
     </fieldset>
   );

diff --git a/packages/material-ui/src/Select/SelectInput.js b/packages/material-ui/src/Select/SelectInput.js
@@ -390,8 +390,9 @@ 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 dangerouslySetInnerHTML={{ __html: '&#8203;' }} />
+          <span className="notranslate" dangerouslySetInnerHTML={{ __html: '&#8203;' }} />
         ) : (
           display
         )}