{"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":[{"id":122764862,"url":"https://api.github.com/repos/callemall/material-ui/labels/Bug","name":"Bug","color":"e11d21","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":5,"created_at":"2016-04-20T09:50:06Z","updated_at":"2016-11-12T18:26:21Z","closed_at":null,"body":"<!-- \n\nSorry to hear you're having trouble! If you have a question, please ask in \n[StackOverflow or gitter](http://tr.im/77pVj)\n\nIf you are having an issue with click events, please re-read the \n[README](http://tr.im/410Fg) (you did read the README, right?).\n\nQuestions, or issues that don't provide sufficient information, may be closed without comment. \n(We're sure you'd rather we work on improving Material-UI than chasing ghost issues!)\n\nIf you think you have found a _new_ issue that hasn't already been reported, please complete the template below.\n\n-->\n## Problem Description\n\nHello!\n\nSo, I found the following issue: on mobile phone, when I fill a TextField inside a Dialog, I have a weird behavior appearing:\n- The Dialog opens up with a TextField, everything looks good;\n- When I click on the TextField, the keyboard opens up normally and the Dialog is resized as intended.\n- Then, when I close the keyboard, the Dialog is not re positioned correctly, it is positioned as follows:\n\n![screenshot_2016-04-20-11-35-05](https://cloud.githubusercontent.com/assets/8453072/14670370/2a49f75e-06ed-11e6-9a0d-a81966f0d838.png)\n\nThe code for the Dialog is the following:\n\n``` javascript\nimport React from 'react'\nimport Component from 'react/lib/ReactComponent'\nimport PureRenderMixin from 'react-addons-pure-render-mixin'\nimport Moment from 'moment'\nimport { Map, fromJS } from 'immutable'\nimport Dialog from 'material-ui/Dialog'\nimport FlatButton from 'material-ui/FlatButton'\nimport RaisedButton from 'material-ui/RaisedButton'\nimport FloatingActionButton from 'material-ui/FloatingActionButton'\nimport ContentAdd from 'material-ui/svg-icons/content/add'\nimport TextField from 'material-ui/TextField'\nimport SelectField from 'material-ui/SelectField'\nimport MenuItem from 'material-ui/MenuItem'\nimport DatePicker from 'material-ui/DatePicker/DatePicker'\nimport TimePicker from 'material-ui/TimePicker/TimePicker'\nimport AutoComplete from 'material-ui/AutoComplete'\nimport Divider from 'material-ui/Divider'\nimport * as Colors from 'material-ui/styles/colors'\n\nimport { categories, minDate, maxDate } from './Event'\n\nconst createStyle = {\n    position: 'fixed'\n  ,right: 16\n  ,bottom: 16\n  ,zIndex: 100\n}\n\nconst dialogStyle = {\n  width: '90%'\n  ,minWidth: '320px'\n  ,maxWidth: '1080px'\n}\n\nexport default class CreateEvent extends Component {\n  constructor(props) {\n    super(props)\n    this.shouldComponentUpdate = PureRenderMixin\n        .shouldComponentUpdate.bind(this)\n    this.state = {\n      open: false\n            ,owner: this.props.owner\n            ,name: this.props.name\n            ,startDay: this.props.startTime\n            ,startTime: this.props.startTime\n            ,endDay: this.props.endTime\n            ,endTime: this.props.endTime\n            ,description: this.props.description\n            ,location: this.props.location\n            ,category: this.props.category\n            ,nameError: null\n            ,startDayError: null\n            ,startTimeError: null\n            ,endDayError: null\n            ,endTimeError: null\n            ,descriptionError: null\n            ,locationError: null\n            ,categoryError: null\n\n  }}\n\n  componentWillReceiveProps(newProps) {\n      if (newProps.owner !== this.state.owner) {\n        this.setState({ owner: newProps.owner });\n      }\n    }\n\n    handleOpen() {\n    this.setState({ open: true })\n  }\n\n  handleOk() {\n    const fields = fromJS({\n        name: 'name' \n        ,startDay: 'starting day'\n        ,startTime: 'starting time'\n        ,endDay: 'ending day'\n        ,endTime: 'ending time'\n        ,description: 'description'\n        ,location: 'location'\n        ,category: 'category'\n    })\n    const valid = fields.keySeq().reduce((valid, field) => {\n        if (!this.state[field] || this.state[field] === '') {\n            this.setState({\n                [field + 'Error']: 'The event ' + fields.get(field) + \n                    ' cannot be empty'\n            })\n            return false\n        }\n        return valid\n    }, true)\n    if (valid) {\n        const event = fromJS({\n            name: this.state.name\n            ,startTime: Moment(\n                Moment(this.state.startDay).format('YYYY-MM-DD ') +\n                Moment(this.state.startTime).format('HH:mm:ss')\n                ,'YYYY-MM-DD HH:mm:ss'\n            )\n            ,endTime: Moment(\n                Moment(this.state.endDay).format('YYYY-MM-DD ') +\n                Moment(this.state.endTime).format('HH:mm:ss')\n                ,'YYYY-MM-DD HH:mm:ss'\n            )\n            ,owner: this.state.owner\n            ,description: this.state.description\n            ,location: this.state.location\n            ,category: this.state.category.get('name')\n        })\n        if (event.get('endTime') > event.get('startTime')) {\n            (this.props.create) ?\n                this.props.postEvent(event) :\n                this.props.updateEvent(event, this.props.eventId)\n            this.setState({open: false})\n        } else {\n            this.setState({\n                endDayError: 'The ending day should be after the starting day'\n                ,endTimeError: 'The ending time should be after the starting time'\n            })\n        }\n    }\n  }\n\n  handleCancel() {\n    this.setState({open: false})\n  }\n\n  handleNameChange(event) {\n    this.setState({\n        nameError: null\n        ,name: event.target.value\n    })\n  }\n\n  handleLocationChange(text) {\n    this.setState({\n        locationError: null\n        ,location: text\n    })\n  }\n\n  handleCategoryChange(event, index, value) {\n    this.setState({\n        categoryError: null\n        ,category: value\n    })\n  }\n\n  handleStartDayChange(event, time) {\n    this.setState({\n        startDayError: null\n        ,startDay: time\n    })\n  }\n\n  handleStartTimeChange(event, time) {\n    this.setState({\n        startTimeError: null\n        ,startTime: time\n    })\n  }\n\n  handleEndDayChange(event, time) {\n    this.setState({\n        endDayError: null\n        ,endDay: time\n    })\n  }\n\n  handleEndTimeChange(event, time) {\n    this.setState({\n        endTimeError: null\n        ,endTime: time\n    })\n  }\n\n  handleDescriptionChange(event) {\n    this.setState({\n        descriptionError: null\n        ,description: event.target.value\n    })\n  }\n\n  render() {\n    const actions = [\n      <FlatButton\n        label=\"Ok\"\n        primary={true}\n        onTouchTap={::this.handleOk}\n      />\n      ,<FlatButton\n        label=\"Cancel\"\n        secondary={true}\n        onTouchTap={::this.handleCancel}\n      />\n    ]\n\n    return (\n      <div>\n                {(this.props.create) ? (\n                    <FloatingActionButton \n                        style={createStyle} \n                        backgroundColor={Colors.deepOrange700}\n                        onTouchTap={::this.handleOpen}\n                    >\n                <ContentAdd />\n                </FloatingActionButton>\n            ) : (\n                <RaisedButton \n                    label=\"Edit\" \n                    fullWidth={true}\n                    primary={true}\n                        onTouchTap={::this.handleOpen}\n                />\n            )}\n        <Dialog\n          title={\n            (\n                (this.props.create) ? \n                \"Create a new\" : \n                \"Edit \" + ((this.props.isOwner) ?  \"your\" : \"this\")\n            ) + \n            \" awesome event!\"\n          }\n          titleStyle={(this.state.category) ?\n            {backgroundColor: this.state.category.get('bgColor') || 'white'} :\n            null}\n          actions={actions}\n          modal={false}\n          open={this.state.open}\n          onRequestClose={::this.handleCancel}\n          contentStyle={dialogStyle}\n          autoScrollBodyContent={true}\n        >\n            <TextField\n                hintText='Event title'\n                value={this.state.name}\n                errorText={this.state.nameError}\n                fullWidth={true}\n                onChange={::this.handleNameChange}\n                disabled={!this.props.isOwner && !this.props.create}\n            />\n            <div className='container-fluid'>\n                <div className='col-sm-6 col-xs-12'>\n                    <AutoComplete \n                        hintText=\"Location\"\n                        errorText={this.state.locationError}\n                        dataSource={[]}\n                        onUpdateInput={::this.handleLocationChange}\n                        searchText={this.state.location}\n                        fullWidth={true}\n                    />\n                </div>\n                <div className='col-sm-6 col-xs-12'>\n                    <SelectField\n                        floatingLabelText=\"Category\"\n                        errorText={this.state.categoryError}\n                        onChange={::this.handleCategoryChange}\n                        value={this.state.category}\n                        disabled={!this.props.isOwner && !this.props.create}\n                        fullWidth={true}\n                        labelStyle={(this.state.category) ?\n                                    {color: this.state.category.get('color') || 'white'} :\n                                    null}\n                    >\n                        {categories.map((category, index) => (\n                            <MenuItem\n                                key={index}\n                                style={{color: category.get('color')}}\n                                value={category}\n                                primaryText={category.get('name')}\n                            />\n                        ))}\n                    </SelectField>\n                </div>\n            </div>\n            <div className='col-sm-7 col-xs-12'>\n                <DatePicker \n                  minDate={minDate}\n                  maxDate={maxDate}\n                  defaultDate={minDate}\n                  disableYearSelection={true}\n                    hintText=\"Start day\"\n                    errorText={this.state.startDayError} \n                    fullWidth={true} \n                    onChange={::this.handleStartDayChange}\n                    value={this.state.startDay}\n                />\n            </div>\n            <div className='col-sm-5 col-xs-offset-2 col-xs-10'>\n                <TimePicker \n                    format='24hr'\n                    hintText=\"Start time\"\n                    errorText={this.state.startTimeError}\n                    fullWidth={true}\n                    onChange={::this.handleStartTimeChange}\n                    value={this.state.startTime}\n                />\n            </div>\n            <div className='col-sm-7 col-xs-12'>\n                <DatePicker\n                  minDate={minDate}\n                  maxDate={maxDate}\n                  defaultDate={maxDate}\n                  disableYearSelection={true}\n                  hintText=\"End day\"\n                    errorText={this.state.endDayError}\n                  fullWidth={true}\n                    onChange={::this.handleEndDayChange}\n                    value={this.state.endDay}\n                />\n            </div>\n            <div className='col-sm-5 col-xs-offset-2 col-xs-10'>\n                <TimePicker \n                    format='24hr'\n                    hintText=\"End time\"\n                    errorText={this.state.endTimeError}\n                    fullWidth={true}\n                    onChange={::this.handleEndTimeChange}\n                    value={this.state.endTime}\n                />\n            </div>\n            <TextField\n                hintText='Description'\n                errorText={this.state.descriptionError}\n                fullWidth={true}\n                multiLine={true}\n                        onChange={::this.handleDescriptionChange}\n                    value={this.state.description}\n                    disabled={!this.props.isOwner && !this.props.create}\n            />\n        </Dialog>\n      </div>\n    )\n  }\n}\n```\n## Versions\n\n<!-- Versions affected. (Please test with Material-UI HEAD.) -->\n- Material-UI: 0.15.0-beta.1\n- React: 15.0.1\n- Browser: Chrome on Android (OnePlus Two)\n\n<!--\n\nFor feature requests, please delete the template above, \nand include a link to the relevant section of Material Design spec, \nor a screenshot showing your proposed feature, \nand enough information to understand your suggestion.\n\n-->\n"},"comment":{"url":"https://api.github.com/repos/callemall/material-ui/issues/comments/260139424","html_url":"https://github.com/callemall/material-ui/issues/4045#issuecomment-260139424","issue_url":"https://api.github.com/repos/callemall/material-ui/issues/4045","id":260139424,"user":{"login":"darkowic","id":11510581,"avatar_url":"https://avatars.githubusercontent.com/u/11510581?v=3","gravatar_id":"","url":"https://api.github.com/users/darkowic","html_url":"https://github.com/darkowic","followers_url":"https://api.github.com/users/darkowic/followers","following_url":"https://api.github.com/users/darkowic/following{/other_user}","gists_url":"https://api.github.com/users/darkowic/gists{/gist_id}","starred_url":"https://api.github.com/users/darkowic/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/darkowic/subscriptions","organizations_url":"https://api.github.com/users/darkowic/orgs","repos_url":"https://api.github.com/users/darkowic/repos","events_url":"https://api.github.com/users/darkowic/events{/privacy}","received_events_url":"https://api.github.com/users/darkowic/received_events","type":"User","site_admin":false},"created_at":"2016-11-12T18:26:21Z","updated_at":"2016-11-12T18:26:21Z","body":"We've had huge problems with this and generally responsiveness of Dialog. Especially when opening keyboard on mobile devices. We are writing application that is responsive and should works on every device.\r\nSecond problem is that the gap between top screen and the top of dialog. It stays same for small devices.\r\n![screenshot_2016-11-12_20-14-23](https://cloud.githubusercontent.com/assets/11510581/20239966/2367a4d2-a90d-11e6-9f5f-9c4d5b85a9bb.png)\r\nFor example in angular implementation it is smaller when the window height is smaller.\r\n![screenshot_2016-11-12_20-17-30](https://cloud.githubusercontent.com/assets/11510581/20239971/3fcd1d00-a90d-11e6-83a4-f78ac972caff.png)\r\n\r\nAs a workaround we did some css tricks and we maximize it for small devices and it works well for mobile devices.\r\n![screenshot_2016-11-12_20-23-14](https://cloud.githubusercontent.com/assets/11510581/20239987/a188f08c-a90d-11e6-893a-11d86ce6cbdd.png)\r\n\r\nI expected similar behavior from mui's Dialog. It should occupy almost 100% of visible place on small devices to works well. \r\n\r\n"}}
{"actor":{"display_login":"darkowic"}}