Issue 1:
This appears to have been introduced in a new Chrome version, but I can't find any reference to where.

Affected/Tested Browsers (OS X):

Chrome 51.0.2704.106 (64-bit)

Opera 39.0.2256.15

Unaffected Browsers:

Safari 9.1

Firefox 49

Backspacing in an input element with value or defaultValue set causes some very odd behavior. Once a decimal point is gone, it can't easily be re-added.

Example:

In this example, I simply backspaced twice. On the second backspace, when I expect 3. to be showing, the input instead reads 3 and the cursor has moved to the beginning. The next two jumps are my attempts to add another decimal point.

Fiddle: https://jsfiddle.net/kmqz6kw8/

Tested with React 15.2.

Notes: This only occurs when value or defaultValue is set. If neither is set, the input behaves properly. We are currently working around this issue by (unfortunately) setting the input value on componentDidMount via a ref.

Issue 2:
I've been trying to accomplish something that, if only I could figure out a way to do it, would be a killer paradigm for elegant, reusable view components.

I've gotten in the habit of rendering my views like this:

const MyView = props => <View {...props}>
<Header>
<Title>
...
</Title>
</Header>
<Body>
...
</Body>
<Footer>
...
</Footer>
</View>;

<View>, <Header>, etc. are magic components that actually render a component injected via context. This means that, for instance, in one fell swoop, I can reskin any view as a bootstrap modal or panel, etc.:

class Modal extends Component {
static childContextTypes: {
HeaderSkin: PropTypes.any,
TitleSkin: PropTypes.any,
...
};
getChildContext() {
return {
HeaderSkin: ModalHeaderSkin, // (adds 'modal-header' class)
TitleSkin: ModalTitleSkin, // (adds 'modal-title' class)
...
};
}
...
}

class Panel extends Component {
...
}

const modalView = <Modal>
<MyView/>
</Modal>;

const panelView = <Panel>
<MyView/>
</Panel>;

This is awesome, and I highly recommend it. There's just one pesky little thing I can't do in all cases: animate Header, Body, and Title transitions individually when switching between views.

I created a Drilldown component that provides a special HeaderSkin and BodySkin to animate transitions from the Header and Body of one view to those of another. It crossfades the header and pans the body horizontally, like typical drilldowns. The transitions work when the two views are of the same React Component type, but not when they are different -- because React can't keep the same Component instance mounted.

I'm wondering if there could be a well-designed system for rendering components like my Header, Body, etc. through some kind of wormhole into a placeholder controlled by an ancestor component. With that capability, it would then be possible to drop view components of any type into my Drilldown and animate the transitions between their subcomponents.

I remember trying to create such a wormhole once when I was less experienced with React. But it quickly became hacky and I never got it working completely. It basically revolved around passing elements to some callback in this.context inside render() methods, and the callback would then put the rendered element in the desired location in the ancestor. I seem to remember there being a problem with things like refs though, and also needing to use setTimeout to delay the rendering of the wormholed component (since render() triggering other rendering is not kosher).

Has anyone tried to do similar things? Thoughts?