Change:
I am having an issue with text based inputs in React 0.14.3 and React DOM 0.14.3. When the event is fired for an input, the input will be deselected. Here is what this looks like in the UI: ! Here is an example of my components. There is a top-level component, which describes the fields on the form. This component also holds the state of the form and is the only component that extends . For each field in the form, there is a child component—which each has a and child. The form also has one component, which, when clicked, will fire an function with the state of the form. With the exception of , these components are all stateless functional components. The components are controlled. They get their value from the top level form component. The state is properly updated in this top level after the event is fired—as you would expect things to typically work with a controlled form. This state is then passed down via props to the input. I've been trying to figure out what could possibly be the cause of this weird deselection issue, but haven't made any progress... any ideas? Thanks.
This causes it: On every render the is a different random value. When the key is different, then React will not reuse the old component. So you lose focus because the input got replaced.
Ah, right, that would make sense. Bad mistake! Thanks.
as a key is definitely a bad idea
Haha, yes. I have long sense moved away from this solution.

Discussion:
<ins> <h1><a href="/react{{ page.url }}">{{ page.title }}</a></h1> <p class="meta">{{ page.date | date_to_string }} by {{ page.author }}</p> <div id="post"> {% if content != '' %} {{ content }} {% else %} {{ page.content }} {% endif %} </div> </ins>

<ins> <div class="nav-docs"> <div class="nav-docs-section"> <h3>Recent posts</h3> <ul> {% for post in site.posts %} <li><a href="/react{{ post.url }}"{% if page.title == post.title %} class="active"{% endif %}>{{ post.title }}</a></li> {% endfor %} </ul> </div> </div> </ins>

<ins> --- layout: default sectionid: blog --- <section class="content wrap documentationContent"> {% include nav_blog.html %} <div class="inner-content"> {% for page in site.posts %} {% include blog_post.html %} {% endfor %} </div> </section> </ins>

<li><a href="/react/docs/getting-started.html"{% if page.sectionid == 'docs' %} class="active"{% endif %}>docs</a></li> <li><a href="/react/support.html"{% if page.id == 'support' %} class="active"{% endif %}>support</a></li> <li><a href="/react/downloads.html"{% if page.id == 'downloads' %} class="active"{% endif %}>download</a></li> <ins> <li><a href="/react/blog.html"{% if page.sectionid == 'blog' %} class="active"{% endif %}>blog</a></li> </ins> <li><a href="http://github.com/facebook/react">github</a> </ul> <!-- <iframe src="http://ghbtns.com/github&#45;btn.html?user=facebook&#38;repo=react.js&#38;type=fork"allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> -->

--- layout: default <ins> sectionid: blog </ins> --- <del> <section class="content wrap"> <h2>{{ page.title }}</h2> <p class="meta">{{ page.date | date_to_string }}</p> <div id="post"> {{ content }} </del> <ins> <section class="content wrap documentationContent"> {% include nav_blog.html %} <div class="inner-content"> {% include blog_post.html %} </ins> </div> </section>

<ins> --- title: JSFiddle Integration layout: post author: Vjeux --- [JSFiddle](http://jsfiddle.net) just announced support for React. This is an exciting news as it makes collaboration on snippets of code a lot easier. You can play around this **[base React JSFiddle](http://jsfiddle.net/vjeux/kb3gN/)**, fork it and share it! A [fiddle without JSX](http://jsfiddle.net/vjeux/VkebS/) is also available . <blockquote class="twitter-tweet" align="center"><p>React (by Facebook) is now available on JSFiddle. <a href="http://t.co/wNQf9JPv5u" title="http://facebook.github.io/react/">facebook.github.io/react/</a></p>&mdash; JSFiddle (@jsfiddle) <a href="https://twitter.com/jsfiddle/status/341114115781177344">June 2, 2013</a></blockquote> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> </ins>