When <Text/> has selectable={true}, it can accept keyboard focus.

Our current Typescript type definitions don't declare that <Text/> supports onFocus/onBlur, but I would like it to (for reasons I will explain below).

I tried attaching callbacks to onFocus/onBlur anyway (in case the underlying implementation did support them), but they were never called.

I tried also setting acceptsKeyboardFocus={true}, but that made no difference.

The reason I want to attach onFocus/onBlur handlers to these events is because I was hoping that, by attaching handlers to the component, it would cause these events to bubble up the view hierarchy.

Why would I think that? Well, apparently, on MacOS, if I have this structure:

<View onFocus={() => { log('Nested View Parent Focus'); } }>
    <View
        acceptsKeyboardFocus={true}
        enableFocusRing={true}
        onFocus={() => { log('Nested View Focus'); } }>
    </View>
</View>

Then, when the inner view receives focus, it also triggers onFocus on the outer view. If I remove the handler on the inner view, the outer view's onFocus does not get triggered.

Therefore, since the focused element in our real scenario is , I surmised that attaching an onFocus handler there would similarly cause the event to bubble.

Unfortunately, this does not work:

<View onFocus={() => { log('Nested View Parent Focus'); } }>
    <Text
        selectable={true}
        onFocus={() => { log('Nested Text Focus'); } }>
    </Text>
</View>

Note: this issue is related to Bug #272. Whether and when onFocus/onBlur should bubble is part of ongoing discussions.

Our product bug that led to me opening this bug is: BUG 3719618.