Material-ui: View won't scroll when tap is on TextField

[ospfranco]

I have created a form using a Card and several TextFields, something akin to:

<div style={{overflow: auto}}>
<Card>
  <TextField/>
  <TextField/>
  <TextField/>
  <TextField/>
  <TextField/>
  <TextField/>
  ...
</Card>
</div>

This works fine on desktop, but on mobile when the first touch is on top of a text field, the container won't scroll, any idea on how to fix this?

EDIT:

I found out that placing position: fixed on the root element caused this

Versions

• Material-UI: 0.16.7
• React: 15.3.2
• Browser: iOS Safari

[oliviertassinari]

Could you provide a reproduction test case? That would help a lot 👷 .
You can use this playground to do so: http://www.webpackbin.com/4yeaqq5_z and some instructions. Thanks!

[linus-amg]

@ospfranco what was your solution to the problem? I'm facing the same issue.
Fun fact: when the TextField type is not 'text' (e.g. if its 'date') then it works.

[ospfranco]

Sorry, I've moved on from this problem a long time ago, but I remember using fixed position scrollable containers caused it, try to wrap the scrollable component in another div inside the fixed position div, maybe that will help.

[oliviertassinari]

We have been porting the component on the v1-beta branch. We reimplemented it from the ground-up. While we haven't tested it, I think that the issue is most likely fixed on that branch. Hence, I'm closing it.
Still, we will accept PR fixes until v1-beta takes over the master branch.

[BenRichter]

For anyone still running into that issue with 0.20.~, I couldn't find a fix via CSS. There is no obvious difference between the unscrollable TextField with type="text" and the Scrollable with another type.
My workaround now is to use a the multiline Textarea. Add:

 multiLine={true}
 rowsMax={1}

[cbeltrangomez84]

I'm using material-ui vr 3.7.1 and the issue is still alive, @BenRichter Thanks a lot for your solution, it saved my day

[oliviertassinari]

@cbeltrangomez84 Any idea why this workaround solves the problem?

[cbeltrangomez84]

@oliviertassinari but I think I will need to do some aditional research since this workaround doesn't allow to fix password fields, it shows the text the user enter on it and type="password" doesn't work.

[cbeltrangomez84]

Hi, I still have this bug on release 3.9, @oliviertassinari could you check and reopen the issue?