AutoCompleteInput cannot update additionalTextInputProps with state

[scaraux]

Describe the bug

We have a design where the text color of the AutoCompleteInput has to be different when the input is focused or not. The issue is that the component seems to be memoized, so updated the additionalTextInputProps does not work as intended.

Dev environment info (please complete/provide the following information):

• Package version (stream-chat-react-native/stream-chat-expo) 4.9.0
• react-native or expo version 0.66.4
• Device/Emulator (android/ios) and OS version : iPhone12 (physical)

To Reproduce Steps to reproduce the behavior:

  const [isFocused, setIsFocused] = useState<boolean>(false);

  const handleFocus = () => {
    setIsFocused(true);
  };

  const handleBlur = () => {
    setIsFocused(false);
  };

  <AutoCompleteInput
      additionalTextInputProps={{
        style: isFocused ? { color: 'green',margin: 0, padding: 0 } : { color: 'blue' },
        onFocus: handleFocus,
        onBlur: handleBlur,
      }}
      numberOfLines={1}
 />

Expected behavior The color of the text input should turn green as soon as the input is focused. And turn blue immediately when focus is lost.

Additional context The color of the text does not change unless you start typing.

Screenshots If applicable, add screenshots to help explain your problem.

[vishalnarkhede]

Hey @scaraux to avoid multiple re-renders, we don't re-render AutocompleteInput component upon changes to additionalTextInputProps prop. I think in this case you should force re-render the component by setting a key prop on AutoComponentInput and update it when isFocused value changes.

Please let me know if that works!

[scaraux]

@vishalnarkhede it almost works but each time i click on the input and update the key after onFocus is called, it closes the keyboard that just opened. i'm able to click again and type after that...

[vanGalilea]

Hey team! Please add your planning poker estimate with ZenHub @khushal87 @madsroskar @vishalnarkhede

[vanGalilea]

We will time box this issue and find an appropriate solution, updates will be followed!

[vanGalilea]

@scaraux is the keyboard issue still occuring?

[vanGalilea]

@scaraux thanks for reaching out. I'll be closing this issue for now. Please don't hesitate to contact us in the future if this issue or any questions arise.