Support for more onKeyPress actions

[ospfranco]

Unlike mobile devices, the keyboard is the main input on desktop, I was trying to create an autocomplete text input, but I've just fallen short, I've tried to attach an onKeyPress to a TextInput, but it has not been updated to handle all keyboard events, in this particular case, I need to listen to the keyboard arrow keys and the enter key.

Will support for this functionality be added at some point or should I just try to plug in the hole myself with some native coding?

[tom-un]

Hi @ospfranco . Regarding fine grain key events within a TextInput we have no plans to deviate from the upstream react-native behavior. For enter key events in a single line TextInput the onSubmit event should fire. For multiline TextInput the onTextChange or onKeyPress should contain \n. For arrow key events the onSelectionChange events should fire. Where react-native-macos is not behaving like iOS does upstream we'd consider it a bug.

If upstream react-native adds low level key event handlers for arrow case and such in a future release, then react-native-macos fork would implement them.

Thanks!

[ospfranco]

ok, good to know, thanks!

[ospfranco]

@tom-un I'm thinking it is worth reconsidering this decision, I'm continuing trying to build an autocomplete box but not having much success.

As you suggested, I'm trying to use onSelectionChange to catch arrow events, however typing on the box also changes the selection on the field, therefore I cannot distinguish when something has been typed or when the arrow key has been pressed:

<KTextInput
  placeholder="Start typing..."
  value={text}
  onChangeText={(t) => {
    console.warn(`text changed`, t)
    setText(t)
  }}
  onSubmitEditing={_onCommit}
  multiline
  numberOfLines={5}
  style={styles.input}
  autoFocus
  onSelectionChange={(event) => {
    console.warn(`selection change`, event.nativeEvent)
    if (autocompleteVisible) {
      console.warn(`should highlight next item`)
    } else {
      console.warn(`setting selection`)
      setInputSelection(event.nativeEvent.selection)
    }
  }}
  selection={inputSelection}
  // onKeyPress={onKeyPress}
/>

The console output for this code, when I try to type something is:

selection change {"target": 23, "selection": {"end": 1, "start": 1}}
setting selection
text changed "ab"

also the fact that the two callbacks fire independently of each other creates a level of asynchronicity that is hard to reason about, like I said, I cannot distinguish a pure selection change from something has been typed in each render cycle

Maybe you have some pointers or an idea of how to accomplish this?