Textfield inside Dialog in Safari - carret is hidden

[koshkarik]

If Textfield is inside of Dialog and initial value is set to '' - there will be no cursor in Safari

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

Cursor must be visible in Safari like in other browser

Steps to Reproduce 🕹

Add Textfield with initial value '' in Dialog and open it in Safari

https://codesandbox.io/s/material-demo-exxfo

There will be background: none css in input, if you will uncheck it - everything will work as expected in Safari

Tech	Version
Material-UI	v4.0.2
React	16.9.0
Browser	Safari

[oliviertassinari]

@koshkarik It seems to also be related to the position: relative of the parent elements. Do you have an idea of how we can fix the problem? Do you think that you could open an issue on Safari side? It seems like a problem with their rendering engine.

[koshkarik]

Yep, i will open an issue on Safari side 👌

[koshkarik]

No luck to reproduce the problem with pure html and css in safari - so not enough facts to open issue on Safari side(

[koshkarik]

@oliviertassinari I didn't figure out how to fix this problem in mui( I do understand I can simply overwrite input styles (background) and it will solve the problem for me, but in our project we have a lot of inputs in modals, so this style fix will make a lot of crutches. Do you have any idea how to solve it in mui?

[oliviertassinari]

@koshkarik Copy & pasting the HTML output seems to be enough: https://codepen.io/anon/pen/agmmMR to reproduce. Maybe we can clean the codepen as much as possible to be minimal?

[Alex-cr17]

I have the same bug. But I found temporary solution.
default state for input:
input: focus {
outline: 0;
}
I set it up:
input:focus {
outline: 1;
outline-width: 100000px // Hiding an outline that is drawn around elements, OUTSIDE the borders, to
make the element " not stand out" if it is necessary.
}

[koshkarik]

@oliviertassinari I have finally opened an issue on Safari side with your example https://bugs.webkit.org/show_bug.cgi?id=199188 If it will be needed i will clean up the example from the rest of unnecessary things. I hope they will reply soon about this issue, but there is a big chance that fixing this bug in Safari will take a while and a lot of people will face this problem for that period of time... May be it's possible to make quick fix in material ui, what do you think of it?

[oliviertassinari]

May be it's possible to make quick fix in material ui, what do you think of it?

@koshkarik How? Do you know a fix that can be deployed without breaking people code?

I have finally opened an issue on Safari side with your example https://bugs.webkit.org/show_bug.cgi?id=199188

Thank you!

[koshkarik]

@oliviertassinari actually didn't figure this out yet :(

[oliviertassinari]

I hope that the Safari team will be able to help. Given they have acces to advanced debugging tools, they might be able to explain what's going on and how to fix it.

[koshkarik]

@oliviertassinari how do you think, is it possible do add zIndex: 1 to InputBase somewhere here https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/InputBase/InputBase.js#L32 ? Because it definitely fixes this issue and i believe (have checked it, but don't know for sure) it doesn't break anything.

[oliviertassinari]

Hum. Adding a z-index would move the component into its own stacking context so it might break people visual layout. If we try it, it's also possible that we will have to revert it (based on people bug reports).

cc @mui-org/core-contributors

[koshkarik]

Hello! Any updates on this issue?

[oliviertassinari]

What's new?

[hemanursawarrior]

I see this issue (cursor is missing when value is '', but appears when value != '') in Safari 12.1 on Mojave, but I noticed two things:

1. While it occurs when using Textfield directly from material-ui in a new react app, it does not appear when viewing the official material-ui page: https://material-ui.com/components/text-fields/ So there is something that is causing this to occur from the application/framework side (that possibly Safari is not handling correctly)

2. As for the Safari side, it is in fact fixed in Safari 13 in Catalina.

[KristiyanTs]

@hemanursawarrior the issue is there(on Safari only) if you open the dialog with a form on the /components/dialogs page. I created an issue for this as in dialogs navigating with Tab also does not work ( #17403 )

[sashless]

I have a similar problem on Safari 14 and it is happening for me in fullscreen dialog only. In fullsceen dialog the caret is cut off for MuiSelect and MuiTextField is also cut off. This can be fixed by adding z-index: 1 to MuiTextField-root as suggested in this comment #16105 (comment) or for Select MuiFormControl-root