TextField doesn't support diacritic "combining low line" (U+0331) below characters with a tail (g,j,p,q,y).

[imnasnainaec]

Current Behavior 😯

When typing or pasting g̲, j̲, p̲, q̲, or y̲, that is g/j/p/q/y with diacritic "combining low line" (U+0331), into a TextField, the underline is not visible.

Expected Behavior 🤔

The combining low line should be visible even below characters with a tail: g̲ j̲ p̲ q̲ y̲

Steps to Reproduce 🕹

Copy g̲ j̲ p̲ q̲ y̲ and paste into a demo TextField at https://material-ui.com/components/text-fields/.

Context 🔦

I am a programmer on an application used with endangered, indigenous, and minority languages, including Wakashan languages, which use g̲.

[imnasnainaec]

The issue also exists with U+0328 Combining Ogonek and U+0323 Combining Dot Below diacritics, such as y̨ (used in Elfdalian), g̣ (used in Ojibwe), and j̣ and ŋ̣ (used for Inari Sami).

[joshwooding]

Seems like not resetting the line-height fixes this, note: the native input has the same issue. It seems the lowest line-height the combining low line is visible at is 22px.

--- a/packages/material-ui/src/InputBase/InputBase.js
+++ b/packages/material-ui/src/InputBase/InputBase.js
@@ -40,7 +40,6 @@ export const styles = (theme) => {
       // Mimics the default input display property used by browsers for an input.
       ...theme.typography.body1,
       color: theme.palette.text.primary,
-      lineHeight: '1.1876em', // Reset (19px), match the native input line-height
       boxSizing: 'border-box', // Prevent padding issue with fullWidth.
       position: 'relative',
       cursor: 'text',

Resetting was added here: #10346

Included ที่นั่น to show there's no regression of #20363

The reset was done when we didn't depend on theme.typography.body1 seems like it's safe to remove now.

[joshwooding]

@imnasnainaec Did you want to make the change? It would be a great first contribution :)