TextInput border showing on Android but not in web browser

[gianluca-nitti]

I'm trying to use styles to add borders around components, and I'm testing on Android and web browser (mainly Chrome). When using the TextInput component, the border is correctly rendered on Android but not in browser. Also, if I recall correctly, this was working correctly before updating ReactXP from 0.42.0_rc.9 to 0.42.0_rc.21.

Here is an example code snippet of a render() method to reproduce the issue:

public render() {
    const s = RX.Styles.createViewStyle({borderColor: "red", borderWidth: 1, borderStyle: "solid"});
    return (
      <RX.View>
      <RX.Text style={s}>text</RX.Text>
      <RX.TextInput style={s} value="textInput"/>
    </RX.View>
    );
}

This is the result on Android (border working both for Text and TextInput):

and this on a web browser (border correctly shown for Text, but not for TextInput):

I tried to inspect the page a bit and I found that the generated input tag has the border style attribute set to none but I can't figure out why.

If I manually manipulate the inline CSS in the generated HTML using the browser's dev tools, for example by changing border: none to border: solid I can get a border, but I found no way to make ReactXP generate the correct style.

[erictraut]

Yes, this appears to be a bug in ReactXP's web implementation of TextInput (src/web/TextInput.tsx). Should be a pretty easy fix. I'll try to get to it in the next few days, or you can fix it and submit a PR if you'd like.

[erictraut]

The fix is checked into the master branch. It will be available through npm the next time reactxp is published (typically about once a week). If you need the fix sooner, you can build reactxp yourself and copy the dist directory to your app's node_modules/reactxp directory.

[gianluca-nitti]

Thank you for the fix (and sorry for the late reply). I'll include the new version it in my application as soon as it'a available on npm.

[erictraut]

I published a new version (0.42.0-rc.22) that contains the fix.