Add MultilineTextInput drag/drop support

[christophpurrer]

Please select one of the following

• I am removing an existing difference between facebook/react-native and microsoft/react-native-macos 👍
• I am cherry-picking a change from Facebook's react-native into microsoft/react-native-macos 👍
• I am making a fix / change for the macOS implementation of react-native
• I am making a change required for Microsoft usage of react-native

Summary

This allows MultilineTextInput to also accept and respond to the same drag and drop props as View (and as SingleLineTextInput) which is discussed here #842

Changelog

[macOS] [Added] - Add MultilineTextInput drag/drop support

Test Plan

Using this customized example from https://github.com/microsoft/react-native-macos/blob/main/packages/rn-tester/js/examples/Touchable/TouchableExample.js#L523-L538

          <TouchableOpacity
            style={styles.wrapper}
            testID="touchable_feedback_mouse_events_button"
            accessibilityLabel="touchable feedback mouse events"
            onPressIn={e => this._appendEvent('MouseIn', e.nativeEvent)}
            onPressOut={e => this._appendEvent('MouseOut', e.nativeEvent)}
            draggedTypes={'fileUrl'}
            onDragEnter={e =>
              this._appendEvent('TouchableOpacityEnter', e.nativeEvent)
            }
            onDragLeave={e =>
              this._appendEvent('TouchableOpacityLeave', e.nativeEvent)
            }
            onDrop={e => this._appendEvent('TouchableOpacityDrop', e.nativeEvent)}
            >
            <Text style={styles.button}>Click Me</Text>
          </TouchableOpacity>
          <TextInput
            multiline={false}
            draggedTypes={'fileUrl'}
            onDragEnter={e =>
              this._appendEvent('SinglelineEnter', e.nativeEvent)
            }
            onDragLeave={e =>
              this._appendEvent('SinglelineLeave', e.nativeEvent)
            }
            onDrop={e => this._appendEvent('SinglelineDrop', e.nativeEvent)}            
            style={{height: 40, width: 500, marginTop: 20}}
            placeholder="SINGLE LINE"
          />
          <TextInput
            multiline={true}
            draggedTypes={'fileUrl'}
            onDragEnter={e =>
              this._appendEvent('MultilineEnter', e.nativeEvent)
            }
            onDragLeave={e =>
              this._appendEvent('MultilineLeave', e.nativeEvent)
            }
            onDrop={e => this._appendEvent('MultilineDrop', e.nativeEvent)}               
            style={{height: 40, width: 500, marginTop: 20}}
            placeholder="MULTI LINE"
          />

Before

b.mov

After

a.mov

[Saadnajmi]

(I should really add those props to Pressable one day...)

[Saadnajmi]

Could you actually add that test page to RN-Tester? And if you don't specify onDragEnter/Leave as callbacks, what happens? Do you get the previous behavior of just getting the file URL?

[christophpurrer]

I have added an example for the TextInput.example on macOS

The behavior is the same before (only the example w/o the native changes)

before.mov

and after my native code changes

after.mov

JFYI: Drag/Drop partially works for SingleLineTextInputs only even w/o my changes as it piggy bags on the RCTView handler ...

[Saadnajmi]

I guess this one has conflicts now?

[christophpurrer]

rebased ...

[Saadnajmi]

I'm seeing some strange behavior when a SingleLine TextInput has keyboard focus. If I drag a file over. then both Enter and Leave are called in quick succession. Would you happen to know why?

Screen.Recording.2022-09-07.at.11.48.55.PM.mov

[christophpurrer]

I'm seeing some strange behavior when a SingleLine TextInput has keyboard focus. If I drag a file over. then both Enter and Leave are called in quick succession. Would you happen to know why?

Screen.Recording.2022-09-07.at.11.48.55.PM.mov

I don't.
This is actually an existing issue and not changed with this PR.
Just try out the example w/o the native changes here.

SingleLineTextFields on macOS are just different (immature?) compared to MultilineTextFields, because one is based on NSTextField and the other on NSTextView