marcsolanadal/index.html

## index.html
<html>
  <head>
    <title>dropdown-with-events</title>
    <link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
  </head>
  <body>
    <div id="root"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/redux-thunk/2.2.0/redux-thunk.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.min.js"></script>
    <script src="https://unpkg.com/react@15.5.4/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15.5.4/dist/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.3/react-redux.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/3.0.4/ReactRouter.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/redux-form/6.6.3/redux-form.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/node-uuid/1.4.8/uuid.min.js"></script>

    <script type="text/babel" src="main.js"></script>

  </body>
</html>

## main.js
const { Component } = React
const { createStore, applyMiddleware, combineReducers, compose } = Redux
const { Provider, connect } = ReactRedux
const { Router, Route, browserHistory, IndexRoute, Link } = ReactRouter
const { Field, reduxForm } = ReduxForm
const formReducer = ReduxForm.reducer

class App extends Component {
  render() {
    return (
      <div className='container'>
        <SearchField visible />
        <Button>Click Me!</Button>
      </div>
    )
  }
}

class SearchField extends Component {
  constructor(props) {
    super(props)
    this.state = {
      focused: false
    }
    this.handleFocus = this.handleFocus.bind(this)
    this.handleBlur = this.handleBlur.bind(this)
  }
  handleFocus() {
    this.props.visible = true
    console.log(this.props.visible)
    //this.setState({ focused: true })
  }
  handleBlur() {
    if (!this.props.skipBlur) {
      this.setState({ focused: false })
      console.log('onblur')
    }
  }
  render() {
    const fieldClass = (this.state.focused) ? 'input__opened' : 'input__closed'
    return (
      <input
        className={fieldClass}
        type='text'
        onBlur={this.handleBlur}
        onFocus={this.handleFocus}
      />
    )
  }
}

class Button extends Component {
  render() {
    return (
      <div className='button'>{this.props.children}</div>
    )
  }
}

/*
class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      focused: false,
      avoidBlur: false
    }
    this.handleClick = this.handleClick.bind(this)
    this.handleBlur = this.handleBlur.bind(this)
    this.handleFocus = this.handleFocus.bind(this)
  }

  handleClick(e) {
    if (this.state.focused) {
      this.setState({ focused: false, avoidBlur: true })
      console.log('close and submit')
    } else {
      this.setState({ focused: true, avoidBlur: true })
      setTimeout(() => { this.textInput.focus() }, 0)
    }
  }

  handleBlur() {
    if (!this.state.avoidBlur) {
      this.setState({ focused: false })
      console.log('onblur')
    }
  }

  handleFocus() {
    this.setState({ focused: true, avoidBlur: false })
    console.log('onfocus')
  }

  render() {
    const inputClass = (this.state.focused) ? 'input__opened' : 'input__closed'
    return (
      <div className='container'>
        <input className={inputClass}
          ref={(input) => { this.textInput = input; }}
          onFocus={this.handleFocus}
          onBlur={this.handleBlur}
          value={inputClass}
        />
        <div className='button' onMouseDown={(e) => this.handleClick(e)}>
          Click Me!
        </div>
      </div>
    )
  }
}
*/

ReactDOM.render(
  <App />,
  document.getElementById('root')
)

## styles.css
.container {
  display: flex;
}

.input__opened {
  background-color: white;
}
.input__closed {
  background-color: lightgray;
}

.button {
  background-color: lime;
}
	<html>
	<head>
	<title>dropdown-with-events</title>
	<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
	</head>
	<body>
	<div id="root"></div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/redux-thunk/2.2.0/redux-thunk.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.min.js"></script>
	<script src="https://unpkg.com/react@15.5.4/dist/react.js"></script>
	<script src="https://unpkg.com/react-dom@15.5.4/dist/react-dom.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.3/react-redux.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/3.0.4/ReactRouter.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/redux-form/6.6.3/redux-form.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/node-uuid/1.4.8/uuid.min.js"></script>

	<script type="text/babel" src="main.js"></script>

	</body>
	</html>
	const { Component } = React
	const { createStore, applyMiddleware, combineReducers, compose } = Redux
	const { Provider, connect } = ReactRedux
	const { Router, Route, browserHistory, IndexRoute, Link } = ReactRouter
	const { Field, reduxForm } = ReduxForm
	const formReducer = ReduxForm.reducer

	class App extends Component {
	render() {
	return (
	<div className='container'>
	<SearchField visible />
	<Button>Click Me!</Button>
	</div>
	)
	}
	}

	class SearchField extends Component {
	constructor(props) {
	super(props)
	this.state = {
	focused: false
	}
	this.handleFocus = this.handleFocus.bind(this)
	this.handleBlur = this.handleBlur.bind(this)
	}
	handleFocus() {
	this.props.visible = true
	console.log(this.props.visible)
	//this.setState({ focused: true })
	}
	handleBlur() {
	if (!this.props.skipBlur) {
	this.setState({ focused: false })
	console.log('onblur')
	}
	}
	render() {
	const fieldClass = (this.state.focused) ? 'input__opened' : 'input__closed'
	return (
	<input
	className={fieldClass}
	type='text'
	onBlur={this.handleBlur}
	onFocus={this.handleFocus}
	/>
	)
	}
	}

	class Button extends Component {
	render() {
	return (
	<div className='button'>{this.props.children}</div>
	)
	}
	}

	/*
	class App extends Component {
	constructor(props) {
	super(props)
	this.state = {
	focused: false,
	avoidBlur: false
	}
	this.handleClick = this.handleClick.bind(this)
	this.handleBlur = this.handleBlur.bind(this)
	this.handleFocus = this.handleFocus.bind(this)
	}

	handleClick(e) {
	if (this.state.focused) {
	this.setState({ focused: false, avoidBlur: true })
	console.log('close and submit')
	} else {
	this.setState({ focused: true, avoidBlur: true })
	setTimeout(() => { this.textInput.focus() }, 0)
	}
	}

	handleBlur() {
	if (!this.state.avoidBlur) {
	this.setState({ focused: false })
	console.log('onblur')
	}
	}

	handleFocus() {
	this.setState({ focused: true, avoidBlur: false })
	console.log('onfocus')
	}

	render() {
	const inputClass = (this.state.focused) ? 'input__opened' : 'input__closed'
	return (
	<div className='container'>
	<input className={inputClass}
	ref={(input) => { this.textInput = input; }}
	onFocus={this.handleFocus}
	onBlur={this.handleBlur}
	value={inputClass}
	/>
	<div className='button' onMouseDown={(e) => this.handleClick(e)}>
	Click Me!
	</div>
	</div>
	)
	}
	}
	*/

	ReactDOM.render(
	<App />,
	document.getElementById('root')
	)
	.container {
	display: flex;
	}

	.input__opened {
	background-color: white;
	}
	.input__closed {
	background-color: lightgray;
	}

	.button {
	background-color: lime;
	}