React-native-web: TouchableHighlight is not updating CSS correctly

[blairio]

Starting in v0.0.62 TouchableHighlights sometimes get styles set on directly on the element and never get removed.

See CodePen: https://codepen.io/anon/pen/jyOLxV?editors=1111

What is the expected behaviour?
Clicking a button should turn it white text and border on a blue background.
The rest of the buttons should be Black text and border on a white background

Instead
Clicking on the second button turns it white text and border on a blue background, but the other buttons are now black text on a blue background and white border. The Border should be black and the background should be white. The Text element styles update ok, but the TouchableHighlight is not updating it's style. It seems to get styles set directly on the element instead of classes when first clicked but they don't get removed on later renders.

Steps to reproduce

1. Click on a button
2. Click on another button
3. Click on the third button

Environment (include versions)

OS: OS X El Capitan
Browser: Chrome Version 55.0.2883.95
React Native for Web (version): 0.0.65
React (version): 15.4.1

[necolas]

Thanks for reporting; I actually remember this same issue the last time RNW used CSS behind the scenes to render the UI. I tracked down the root cause and should have a fix up shortly.

[necolas]

This is a bit trickier than I first thought.

From what I can tell, React doesn't seem to clear out style props that you set via direct manipulation. setNativeProps adds styles directly to the DOM elements without using React (this is an optimization to avoid triggering React re-renders of the child content). But when React does a normal update after you move the selected state to another button, it doesn't wipe out those unwanted style props.

[necolas]

Should be fixed in 0.0.67