{"action":"created","issue":{"url":"https://api.github.com/repos/callemall/material-ui/issues/4045","repository_url":"https://api.github.com/repos/callemall/material-ui","labels_url":"https://api.github.com/repos/callemall/material-ui/issues/4045/labels{/name}","comments_url":"https://api.github.com/repos/callemall/material-ui/issues/4045/comments","events_url":"https://api.github.com/repos/callemall/material-ui/issues/4045/events","html_url":"https://github.com/callemall/material-ui/issues/4045","id":149718435,"number":4045,"title":"[Dialog] Bad repositioning when closing keyboard after editing a TextField on mobile","user":{"login":"skasch","id":8453072,"avatar_url":"https://avatars.githubusercontent.com/u/8453072?v=3","gravatar_id":"","url":"https://api.github.com/users/skasch","html_url":"https://github.com/skasch","followers_url":"https://api.github.com/users/skasch/followers","following_url":"https://api.github.com/users/skasch/following{/other_user}","gists_url":"https://api.github.com/users/skasch/gists{/gist_id}","starred_url":"https://api.github.com/users/skasch/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/skasch/subscriptions","organizations_url":"https://api.github.com/users/skasch/orgs","repos_url":"https://api.github.com/users/skasch/repos","events_url":"https://api.github.com/users/skasch/events{/privacy}","received_events_url":"https://api.github.com/users/skasch/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/callemall/material-ui/labels/Bug","name":"Bug","color":"e11d21"}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2016-04-20T09:50:06Z","updated_at":"2016-08-19T18:50:34Z","closed_at":null,"body":"<!-- \r\n\r\nSorry to hear you're having trouble! If you have a question, please ask in \r\n[StackOverflow or gitter](http://tr.im/77pVj)\r\n\r\nIf you are having an issue with click events, please re-read the \r\n[README](http://tr.im/410Fg) (you did read the README, right?).\r\n\r\nQuestions, or issues that don't provide sufficient information, may be closed without comment. \r\n(We're sure you'd rather we work on improving Material-UI than chasing ghost issues!)\r\n\r\nIf you think you have found a _new_ issue that hasn't already been reported, please complete the template below.\r\n\r\n-->\r\n\r\nProblem Description\r\n-------------------\r\nHello!\r\n\r\nSo, I found the following issue: on mobile phone, when I fill a TextField inside a Dialog, I have a weird behavior appearing:\r\n* The Dialog opens up with a TextField, everything looks good;\r\n* When I click on the TextField, the keyboard opens up normally and the Dialog is resized as intended.\r\n* Then, when I close the keyboard, the Dialog is not re positioned correctly, it is positioned as follows:\r\n\r\n![screenshot_2016-04-20-11-35-05](https://cloud.githubusercontent.com/assets/8453072/14670370/2a49f75e-06ed-11e6-9a0d-a81966f0d838.png)\r\n\r\nThe code for the Dialog is the following:\r\n\r\n```javascript\r\nimport React from 'react'\r\nimport Component from 'react/lib/ReactComponent'\r\nimport PureRenderMixin from 'react-addons-pure-render-mixin'\r\nimport Moment from 'moment'\r\nimport { Map, fromJS } from 'immutable'\r\nimport Dialog from 'material-ui/Dialog'\r\nimport FlatButton from 'material-ui/FlatButton'\r\nimport RaisedButton from 'material-ui/RaisedButton'\r\nimport FloatingActionButton from 'material-ui/FloatingActionButton'\r\nimport ContentAdd from 'material-ui/svg-icons/content/add'\r\nimport TextField from 'material-ui/TextField'\r\nimport SelectField from 'material-ui/SelectField'\r\nimport MenuItem from 'material-ui/MenuItem'\r\nimport DatePicker from 'material-ui/DatePicker/DatePicker'\r\nimport TimePicker from 'material-ui/TimePicker/TimePicker'\r\nimport AutoComplete from 'material-ui/AutoComplete'\r\nimport Divider from 'material-ui/Divider'\r\nimport * as Colors from 'material-ui/styles/colors'\r\n\r\nimport { categories, minDate, maxDate } from './Event'\r\n\r\nconst createStyle = {\r\n\tposition: 'fixed'\r\n  ,right: 16\r\n  ,bottom: 16\r\n  ,zIndex: 100\r\n}\r\n\r\nconst dialogStyle = {\r\n  width: '90%'\r\n  ,minWidth: '320px'\r\n  ,maxWidth: '1080px'\r\n}\r\n\r\nexport default class CreateEvent extends Component {\r\n  constructor(props) {\r\n    super(props)\r\n    this.shouldComponentUpdate = PureRenderMixin\r\n    \t.shouldComponentUpdate.bind(this)\r\n    this.state = {\r\n      open: false\r\n\t\t\t,owner: this.props.owner\r\n\t\t\t,name: this.props.name\r\n\t\t\t,startDay: this.props.startTime\r\n\t\t\t,startTime: this.props.startTime\r\n\t\t\t,endDay: this.props.endTime\r\n\t\t\t,endTime: this.props.endTime\r\n\t\t\t,description: this.props.description\r\n\t\t\t,location: this.props.location\r\n\t\t\t,category: this.props.category\r\n\t\t\t,nameError: null\r\n\t\t\t,startDayError: null\r\n\t\t\t,startTimeError: null\r\n\t\t\t,endDayError: null\r\n\t\t\t,endTimeError: null\r\n\t\t\t,descriptionError: null\r\n\t\t\t,locationError: null\r\n\t\t\t,categoryError: null\r\n    \r\n  }}\r\n\r\n  componentWillReceiveProps(newProps) {\r\n\t  if (newProps.owner !== this.state.owner) {\r\n\t    this.setState({ owner: newProps.owner });\r\n\t  }\r\n\t}\r\n\t\r\n\thandleOpen() {\r\n    this.setState({ open: true })\r\n  }\r\n\r\n  handleOk() {\r\n  \tconst fields = fromJS({\r\n  \t\tname: 'name' \r\n  \t\t,startDay: 'starting day'\r\n  \t\t,startTime: 'starting time'\r\n  \t\t,endDay: 'ending day'\r\n  \t\t,endTime: 'ending time'\r\n  \t\t,description: 'description'\r\n  \t\t,location: 'location'\r\n  \t\t,category: 'category'\r\n  \t})\r\n  \tconst valid = fields.keySeq().reduce((valid, field) => {\r\n\t  \tif (!this.state[field] || this.state[field] === '') {\r\n\t  \t\tthis.setState({\r\n\t  \t\t\t[field + 'Error']: 'The event ' + fields.get(field) + \r\n\t  \t\t\t\t' cannot be empty'\r\n\t  \t\t})\r\n\t  \t\treturn false\r\n\t  \t}\r\n\t  \treturn valid\r\n  \t}, true)\r\n  \tif (valid) {\r\n  \t\tconst event = fromJS({\r\n  \t\t\tname: this.state.name\r\n  \t\t\t,startTime: Moment(\r\n  \t\t\t\tMoment(this.state.startDay).format('YYYY-MM-DD ') +\r\n  \t\t\t\tMoment(this.state.startTime).format('HH:mm:ss')\r\n  \t\t\t\t,'YYYY-MM-DD HH:mm:ss'\r\n  \t\t\t)\r\n  \t\t\t,endTime: Moment(\r\n  \t\t\t\tMoment(this.state.endDay).format('YYYY-MM-DD ') +\r\n  \t\t\t\tMoment(this.state.endTime).format('HH:mm:ss')\r\n  \t\t\t\t,'YYYY-MM-DD HH:mm:ss'\r\n  \t\t\t)\r\n  \t\t\t,owner: this.state.owner\r\n  \t\t\t,description: this.state.description\r\n  \t\t\t,location: this.state.location\r\n  \t\t\t,category: this.state.category.get('name')\r\n  \t\t})\r\n  \t\tif (event.get('endTime') > event.get('startTime')) {\r\n  \t\t\t(this.props.create) ?\r\n\t  \t\t\tthis.props.postEvent(event) :\r\n\t  \t\t\tthis.props.updateEvent(event, this.props.eventId)\r\n\t  \t\tthis.setState({open: false})\r\n  \t\t} else {\r\n  \t\t\tthis.setState({\r\n  \t\t\t\tendDayError: 'The ending day should be after the starting day'\r\n  \t\t\t\t,endTimeError: 'The ending time should be after the starting time'\r\n  \t\t\t})\r\n  \t\t}\r\n  \t}\r\n  }\r\n\r\n  handleCancel() {\r\n    this.setState({open: false})\r\n  }\r\n\r\n  handleNameChange(event) {\r\n    this.setState({\r\n    \tnameError: null\r\n    \t,name: event.target.value\r\n    })\r\n  }\r\n\r\n  handleLocationChange(text) {\r\n    this.setState({\r\n    \tlocationError: null\r\n    \t,location: text\r\n    })\r\n  }\r\n\r\n  handleCategoryChange(event, index, value) {\r\n  \tthis.setState({\r\n  \t\tcategoryError: null\r\n  \t\t,category: value\r\n  \t})\r\n  }\r\n\r\n  handleStartDayChange(event, time) {\r\n    this.setState({\r\n    \tstartDayError: null\r\n    \t,startDay: time\r\n    })\r\n  }\r\n\r\n  handleStartTimeChange(event, time) {\r\n    this.setState({\r\n    \tstartTimeError: null\r\n    \t,startTime: time\r\n    })\r\n  }\r\n\r\n  handleEndDayChange(event, time) {\r\n    this.setState({\r\n    \tendDayError: null\r\n    \t,endDay: time\r\n    })\r\n  }\r\n\r\n  handleEndTimeChange(event, time) {\r\n    this.setState({\r\n    \tendTimeError: null\r\n    \t,endTime: time\r\n    })\r\n  }\r\n\r\n  handleDescriptionChange(event) {\r\n    this.setState({\r\n    \tdescriptionError: null\r\n    \t,description: event.target.value\r\n    })\r\n  }\r\n\r\n  render() {\r\n    const actions = [\r\n      <FlatButton\r\n        label=\"Ok\"\r\n        primary={true}\r\n        onTouchTap={::this.handleOk}\r\n      />\r\n      ,<FlatButton\r\n        label=\"Cancel\"\r\n        secondary={true}\r\n        onTouchTap={::this.handleCancel}\r\n      />\r\n    ]\r\n\r\n    return (\r\n      <div>\r\n\t\t\t\t{(this.props.create) ? (\r\n\t\t\t\t\t<FloatingActionButton \r\n\t\t\t\t\t\tstyle={createStyle} \r\n\t\t\t\t\t\tbackgroundColor={Colors.deepOrange700}\r\n\t\t\t\t\t\tonTouchTap={::this.handleOpen}\r\n\t\t\t\t\t>\r\n\t\t      \t<ContentAdd />\r\n\t\t    \t</FloatingActionButton>\r\n\t\t    ) : (\r\n\t\t    \t<RaisedButton \r\n\t\t    \t\tlabel=\"Edit\" \r\n\t\t    \t\tfullWidth={true}\r\n\t\t    \t\tprimary={true}\r\n\t\t\t\t\t\tonTouchTap={::this.handleOpen}\r\n\t\t    \t/>\r\n\t\t    )}\r\n        <Dialog\r\n          title={\r\n          \t(\r\n          \t\t(this.props.create) ? \r\n          \t\t\"Create a new\" : \r\n          \t\t\"Edit \" + ((this.props.isOwner) ?  \"your\" : \"this\")\r\n          \t) + \r\n          \t\" awesome event!\"\r\n          }\r\n          titleStyle={(this.state.category) ?\r\n          \t{backgroundColor: this.state.category.get('bgColor') || 'white'} :\r\n          \tnull}\r\n          actions={actions}\r\n          modal={false}\r\n          open={this.state.open}\r\n          onRequestClose={::this.handleCancel}\r\n          contentStyle={dialogStyle}\r\n          autoScrollBodyContent={true}\r\n        >\r\n        \t<TextField\r\n        \t\thintText='Event title'\r\n        \t\tvalue={this.state.name}\r\n        \t\terrorText={this.state.nameError}\r\n        \t\tfullWidth={true}\r\n        \t\tonChange={::this.handleNameChange}\r\n        \t\tdisabled={!this.props.isOwner && !this.props.create}\r\n        \t/>\r\n        \t<div className='container-fluid'>\r\n\t        \t<div className='col-sm-6 col-xs-12'>\r\n\t\t      \t\t<AutoComplete \r\n\t\t      \t\t\thintText=\"Location\"\r\n\t\t        \t\terrorText={this.state.locationError}\r\n\t\t\t\t        dataSource={[]}\r\n\t\t        \t\tonUpdateInput={::this.handleLocationChange}\r\n\t\t        \t\tsearchText={this.state.location}\r\n\t\t        \t\tfullWidth={true}\r\n\t\t      \t\t/>\r\n\t\t      \t</div>\r\n\t\t      \t<div className='col-sm-6 col-xs-12'>\r\n\t\t      \t\t<SelectField\r\n\t\t      \t\t\tfloatingLabelText=\"Category\"\r\n\t\t      \t\t\terrorText={this.state.categoryError}\r\n\t\t      \t\t\tonChange={::this.handleCategoryChange}\r\n\t\t      \t\t\tvalue={this.state.category}\r\n\t\t      \t\t\tdisabled={!this.props.isOwner && !this.props.create}\r\n\t\t        \t\tfullWidth={true}\r\n\t\t        \t\tlabelStyle={(this.state.category) ?\r\n\t\t\t\t\t\t          \t{color: this.state.category.get('color') || 'white'} :\r\n\t\t\t\t\t\t          \tnull}\r\n\t\t      \t\t>\r\n\t\t      \t\t\t{categories.map((category, index) => (\r\n\t\t      \t\t\t\t<MenuItem\r\n\t\t      \t\t\t\t\tkey={index}\r\n\t\t      \t\t\t\t\tstyle={{color: category.get('color')}}\r\n\t\t      \t\t\t\t\tvalue={category}\r\n\t\t      \t\t\t\t\tprimaryText={category.get('name')}\r\n\t\t      \t\t\t\t/>\r\n\t\t      \t\t\t))}\r\n\t\t      \t\t</SelectField>\r\n\t      \t\t</div>\r\n      \t\t</div>\r\n        \t<div className='col-sm-7 col-xs-12'>\r\n        \t\t<DatePicker \r\n\t\t          minDate={minDate}\r\n\t\t          maxDate={maxDate}\r\n\t\t          defaultDate={minDate}\r\n\t\t          disableYearSelection={true}\r\n        \t\t\thintText=\"Start day\"\r\n      \t\t\t\terrorText={this.state.startDayError} \r\n        \t\t\tfullWidth={true} \r\n      \t\t\t\tonChange={::this.handleStartDayChange}\r\n      \t\t\t\tvalue={this.state.startDay}\r\n        \t\t/>\r\n        \t</div>\r\n        \t<div className='col-sm-5 col-xs-offset-2 col-xs-10'>\r\n        \t\t<TimePicker \r\n        \t\t\tformat='24hr'\r\n        \t\t\thintText=\"Start time\"\r\n      \t\t\t\terrorText={this.state.startTimeError}\r\n        \t\t\tfullWidth={true}\r\n      \t\t\t\tonChange={::this.handleStartTimeChange}\r\n      \t\t\t\tvalue={this.state.startTime}\r\n        \t\t/>\r\n        \t</div>\r\n        \t<div className='col-sm-7 col-xs-12'>\r\n        \t\t<DatePicker\r\n\t\t          minDate={minDate}\r\n\t\t          maxDate={maxDate}\r\n\t\t          defaultDate={maxDate}\r\n\t\t          disableYearSelection={true}\r\n\t\t          hintText=\"End day\"\r\n      \t\t\t\terrorText={this.state.endDayError}\r\n\t\t          fullWidth={true}\r\n      \t\t\t\tonChange={::this.handleEndDayChange}\r\n      \t\t\t\tvalue={this.state.endDay}\r\n\t\t        />\r\n        \t</div>\r\n        \t<div className='col-sm-5 col-xs-offset-2 col-xs-10'>\r\n        \t\t<TimePicker \r\n        \t\t\tformat='24hr'\r\n        \t\t\thintText=\"End time\"\r\n      \t\t\t\terrorText={this.state.endTimeError}\r\n        \t\t\tfullWidth={true}\r\n      \t\t\t\tonChange={::this.handleEndTimeChange}\r\n      \t\t\t\tvalue={this.state.endTime}\r\n        \t\t/>\r\n        \t</div>\r\n        \t<TextField\r\n        \t\thintText='Description'\r\n        \t\terrorText={this.state.descriptionError}\r\n        \t\tfullWidth={true}\r\n        \t\tmultiLine={true}\r\n        \t\t\t\tonChange={::this.handleDescriptionChange}\r\n    \t\t\t\tvalue={this.state.description}\r\n    \t\t\t\tdisabled={!this.props.isOwner && !this.props.create}\r\n        \t/>\r\n        </Dialog>\r\n      </div>\r\n    )\r\n  }\r\n}\r\n```\r\n\r\nVersions\r\n--------\r\n<!-- Versions affected. (Please test with Material-UI HEAD.) -->\r\n\r\n- Material-UI: 0.15.0-beta.1\r\n- React: 15.0.1\r\n- Browser: Chrome on Android (OnePlus Two)\r\n\r\n<!--\r\n\r\nFor feature requests, please delete the template above, \r\nand include a link to the relevant section of Material Design spec, \r\nor a screenshot showing your proposed feature, \r\nand enough information to understand your suggestion.\r\n\r\n-->"},"comment":{"url":"https://api.github.com/repos/callemall/material-ui/issues/comments/241103353","html_url":"https://github.com/callemall/material-ui/issues/4045#issuecomment-241103353","issue_url":"https://api.github.com/repos/callemall/material-ui/issues/4045","id":241103353,"user":{"login":"ethan-deng","id":11064831,"avatar_url":"https://avatars.githubusercontent.com/u/11064831?v=3","gravatar_id":"","url":"https://api.github.com/users/ethan-deng","html_url":"https://github.com/ethan-deng","followers_url":"https://api.github.com/users/ethan-deng/followers","following_url":"https://api.github.com/users/ethan-deng/following{/other_user}","gists_url":"https://api.github.com/users/ethan-deng/gists{/gist_id}","starred_url":"https://api.github.com/users/ethan-deng/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ethan-deng/subscriptions","organizations_url":"https://api.github.com/users/ethan-deng/orgs","repos_url":"https://api.github.com/users/ethan-deng/repos","events_url":"https://api.github.com/users/ethan-deng/events{/privacy}","received_events_url":"https://api.github.com/users/ethan-deng/received_events","type":"User","site_admin":false},"created_at":"2016-08-19T18:50:34Z","updated_at":"2016-08-19T18:50:34Z","body":"There is still issue with using Dialog and TextField on Chrome on iPad when the onscreen keyboards opens.\r\n\r\nFirst, the Safari on Ipad works much better. When tap on a TextField of a dialog, the keyboards shows up and the dialog doesn't resize or re-position with the following code. This is much better user experience. When the keyboard hides, there no re-positioning or resizing either.\r\n\r\nWith Chrome on iPad (not repro on Windows), when keyboard shows up after using start editing a TextField, the dialog will be resized. When the keyboard hides, the dialog will be repositioned to lower part of the screen.\r\n\r\nEven worse when I use more complex control on the dialog such as RichText editing control, the dialog will be resized and repositioned out the screen.\r\n\r\n```\r\n<Dialog\r\n          title={dialogTitle}\r\n          actions={actions}\r\n          modal={false}\r\n          open={this.props.showDialog}\r\n          onRequestClose={this.handleClose}\r\n          bodyStyle={{overflow: 'auto', position: 'relative'}}\r\n          repositionOnUpdate={{false}}\r\n          autoScrollBodyContent={{true}}\r\n          autoDetectWindowHeight={{false}}\r\n        >\r\n          <div>{self.state.error}</div>\r\n          {controls}\r\n        </Dialog>\r\n```"}}
{"actor":{"display_login":"ethan-deng"}}