Touchable: press when 'href' has different results for touch/mouse-or-keyboard interaction

[dcalhoun]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
Tapping a TouchableWithoutFeedback (or any Touchable type) that possesses both accessibilityRole="link" and a valid href does not open the href within the browser on touch devices. It does open when clicked using a mouse.

If the current behavior is a bug, please provide the steps to reproduce and
if a minimal demo of the problem via Glitch or similar.

1. Open Glitch this test case on a touch device (e.g. iPhone)
2. Tap the red block containing the text "Button Link".

What is the expected behavior?
The URL assigned to the href opens within the browser.

Environment (include versions). Did this work in previous versions?

• OS: iOS 11
• Device: iPhone 7
• Browser: Safari
• React Native for Web (version): 0.5.1
• React (version): 16.2.0

[dcalhoun]

I've noticed that if you tap the edge of the Touchable, the browser will open the URL. Also, if you force-press, the browser will "pop" the URL open.

[necolas]

It looks like cancelling the native event on responder release only prevents the browser opening the link on touch devices. I'm not sure why yet.

The link feature was kind of hacked in while I was working at Twitter and needed some escape-hatches for the legacy components that I wanted to move to Touchable, but it didn't happen. Maybe it was a mistake to overload the touchables with link functionality, especially since href is not supported on native and all responses to touchable interactions should be going through the event handlers. (You can trigger an external link open within the onPress callback using Linking, and internal push-state needs to go through the JS layer too. So rendering to a link is mainly for accessibility.)

I'll have to think about this. Thanks

[dcalhoun]

Thanks for the info. I did attempt to utilize the Linking API. I was able to successfully open a URL, but it always opened in a new tab. Is it possible to use the Linking API to open a URL in the same tab/window?

class Button extends Component {
  constructor(props) {
    super(props);
    this._handlePress = this._handlePress.bind(this);
  }

  _handlePress() {
    const { href } = this.props;
    Linking.canOpenURL(href).then(() => Linking.openURL(href));
  }

  render() {
    const { children, ...rest } = this.props;
    return (
      <TouchableOpacity onPress={this._handlePress} {...rest}>
        <View>
          <Text>{children}</Text>
        </View>
      </TouchableOpacity>
    );
  }
}

[necolas]

No, but if you're relying on a JS router or push state library that is the thing to use

[dcalhoun]

Alright, that's unfortunate. 😞 For my particular use case, I am not using a JS router or push state. I need to link to a separate property on a different sub-domain.

[necolas]

Then just use window.location

[leggomuhgreggo]

Seems to behave differently on chrome vs firefox/safari

[necolas]

The inconsistency should be fixed by efb1a53