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

Created on 7 Aug 2020  ·  4Comments  ·  Source: mui-org/material-ui

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̲.

bug 🐛 TextField good first issue

Most helpful comment

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: https://github.com/mui-org/material-ui/pull/10346

image

Included ที่นั่น to show there's no regression of https://github.com/mui-org/material-ui/pull/20363

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

All 4 comments

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).

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: https://github.com/mui-org/material-ui/pull/10346

image

Included ที่นั่น to show there's no regression of https://github.com/mui-org/material-ui/pull/20363

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

What about we close as "won't fix", optimizing for the needs of the many? It can reproduce the same issue with a native input on Chrome.

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

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ryanflorence picture ryanflorence  ·  3Comments

ghost picture ghost  ·  3Comments

zabojad picture zabojad  ·  3Comments

ericraffin picture ericraffin  ·  3Comments

revskill10 picture revskill10  ·  3Comments