microsoft / react-native-macos

A framework for building native macOS apps with React.
https://microsoft.github.io/react-native-windows/
MIT License
3.39k stars 130 forks source link

[Fabric] TextInput UI is not updated when changing prop `value` or calling `inputRef.current.clear()` / `inputRef.current.setNativeProps({text: ''})` #2066

Open gaeldestrem opened 5 months ago

gaeldestrem commented 5 months ago

Environment

react-native -v: 12.3.2
npm ls react-native-macos: └── react-native-macos@0.73.13
node -v: v18.16.0
npm -v: 9.5.1
yarn --version: 1.22.19
xcodebuild -version: Xcode 15.0 Build version 15A240d

Steps to reproduce the bug

Issue:

When using Fabric and having a component TextInput with the following definition:

export const TestTextInput = () => {
  const ref = useRef<TextInput | null>(null);
  const [value, setValue] = useState('');

  const clearTextInput = useCallback(() => {
    setValue('');
    ref.current?.clear();
    ref.current?.setNativeProps({text: ''});
  }, []);

  return (
    <View style={styles.viewContainer}>
      <TextInput
        ref={ref}
        value={value}
        onChangeText={setValue}
        style={styles.input}
      />
      <Button
        title="clear"
        onPress={clearTextInput}
      />
    </View>
  );
};

Calling the method clearTextInput doesn't clear the UI value.

https://github.com/microsoft/react-native-macos/assets/5053593/741f14b6-b49a-42ef-9b8b-c2c34fcbca1d

Expected Behavior

I would expect the same behavior than when using a TextInput with Chakra:

Reproducible Demo

https://github.com/gaeldestrem/rnrepro

gaeldestrem commented 5 months ago

By debugging the native code, the method RCTTextInputComponentView > _setAttributedString doesn't seem implemented for the macos platform.

Adding these two lines seems to fix the issue. It's probably not the right fix but it might help to investigate :)

Screenshot 2024-02-03 at 18 48 55

Here's is the patch and a record

react-native-macos+0.73.13.patch

https://github.com/microsoft/react-native-macos/assets/5053593/fefe5f3c-4830-4ec0-92af-f6b443139446

Saadnajmi commented 3 months ago

Sorry for not updating sooner. Our Fabric implementation is still experimental, so I expect bugs like this one to be everywhere :). We should be pushing a bunch of Fabric changes soon, and I'll keep this issue in mind! @shwanton fyi