React + OnsenUI - Making the form smaller and scrollable when the keyboard pops up. Bonus points because friggin onsenui' Input has no onFocus prop.

action-sheet.css

.keyboard-on section.form {
  height: 200px;
  overflow-y: scroll;
  padding-top:  20px;
}

DataField.js

import React from 'react'
import ReactDOM from 'react-dom'
import { Input } from 'react-onsenui'

export default class DataField extends React.Component {

  componentDidMount() {
    this.focusHandler = this.mainInputFocusEventHandler.bind(this)

    if (this.mainInput) {
      const inputNode = ReactDOM.findDOMNode(this.mainInput)
      inputNode.addEventListener('focus', this.focusHandler)
    }
  }

  mainInputFocusEventHandler() {
    this.props.onFocus('dataField')
  }

  render() {
    return (
      <div>
        <div className="input-block">
          <Input
            ref={input => {
              this.mainInput = input
            }}
          />
        </div>
      </div>
    )
  }
}

SendDetails.js

import React from 'react'
import { Modal } from 'react-onsenui'
import PriorityField from './PriorityField'
import RangeField from './RangeField'
import DataField from './DataField'

export default class SendDetails extends React.Component {
  
  componentDidMount() {
    this.keyboardEventHandler = this.formScroller.bind(this)
    if (this.formSection) {
      window
        .addEventListener('native.keyboardshow', this.keyboardEventHandler)
    }
  }

  componentWillUnmount() {
    window
      .removeEventListener('native.keyboardshow', this.keyboardEventHandler)
  }

  formScroller() {
    if (this.focused === 'dataField') {
      this.formSection.scrollTop = 60
    } else { // priorityField chosen
      this.formSection.scrollTop = 0
    }
  }

  dataFieldFocused(targetValue) {
    console.log(JSON.stringify(targetValue))
    this.focused = 'dataField'
  }

  priorityFieldFocused(targetValue) {
    console.log(JSON.stringify(targetValue))
    this.focused = 'priorityField'
  }

  render() {
    return (
      <section>
        <Modal>
          <div className="action-sheet__body">
            <section
              className="form"
              ref={section => {
                this.formSection = section
              }}
            >
              <div className="form__item">
                  <PriorityField
                    onFocus={this.priorityFieldFocused.bind(this)}
                  />
              </div>
              <div className="form__item">
                <DataField
                  onFocus={this.dataFieldFocused.bind(this)}
                />
              </div>
            </section>
          </div>
        </Modal>
      </section>
    )
  }
}