Skip to content

🔥[🐛] Dismissing the attachment bar focuses the input area #3708

Description

@zbarbuto

Issue

When pressing the "X" button to dismiss the attachment bar, the message input automatically focuses

Describe your issue here

Steps to reproduce

Steps to reproduce the behavior:

  1. Open the example app and press the "+" button
  2. Press the "X" button
  3. Message input automatically focuses and the onscreen keyboard appears

iOS:

ScreenRecording_07-06-2026.13-34-54_1.mp4

Android:

Screen.Recording.2026-07-06.at.1.51.16.pm.mov

Expected behavior

Dismissing the attachment bar should not focus the message input

Project Related Information

Customization

Click To Expand

function App() {
  const isDarkMode = useColorScheme() === 'dark';

  return (
    <SafeAreaProvider>
      <GestureHandlerRootView>
        <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
        <ChatWrapper>
          <ChatChannel />
        </ChatWrapper>
      </GestureHandlerRootView>
    </SafeAreaProvider>
  );
}

export const ChatWrapper = ({ children }) => {
  const chatClient = useCreateChatClient({
    apiKey: chatApiKey,
    userData: user,
    tokenOrProvider: chatUserToken,
  });

  if (!chatClient) {
    return (
      <SafeAreaView>
        <Text>Loading chat ...</Text>
      </SafeAreaView>
    );
  }

  return (
    <SafeAreaView>
      <OverlayProvider>
        <Chat client={chatClient}>{children}</Chat>
      </OverlayProvider>
    </SafeAreaView>
  );
};

const ChatChannel = () => {
  const { client } = useChatContext();
  const channel = useRef(client.channel(channelType, channelId));
  return (
    <Channel channel={channel.current}>
      <MessageList />
      <MessageComposer />
    </Channel>
  );
};

export default App;

Offline support

  • I have enabled offline support.
  • The feature I'm having does not occur when offline support is disabled. (stripe out if not applicable)

Environment

Click To Expand

package.json:

{
  "name": "ReactNativeSandbox",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "reanimated": {
    "staticFeatureFlags": {
      "FORCE_REACT_RENDER_FOR_SETTLED_ANIMATIONS": false
    }
  },
  "dependencies": {
    "@react-native-community/netinfo": "12.0.1",
    "@react-native/new-app-screen": "0.85.0",
    "@react-navigation/native": "^7.3.7",
    "@react-navigation/native-stack": "^7.17.9",
    "expo": "~56.0.0",
    "expo-image-manipulator": "~56.0.20",
    "expo-image-picker": "^57.0.2",
    "react": "19.2.3",
    "react-native": "0.85.0",
    "react-native-gesture-handler": "~2.31.1",
    "react-native-orientation-director": "^3.0.2",
    "react-native-reanimated": "4.3.1",
    "react-native-safe-area-context": "~5.7.0",
    "react-native-screens": "^4.25.2",
    "react-native-svg": "15.15.4",
    "react-native-teleport": "^1.1.10",
    "react-native-worklets": "0.8.3",
    "stream-chat-expo": "^9.6.0"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "@babel/runtime": "^7.25.0",
    "@react-native-community/cli": "20.1.0",
    "@react-native-community/cli-platform-android": "20.1.0",
    "@react-native-community/cli-platform-ios": "20.1.0",
    "@react-native/babel-preset": "0.85.0",
    "@react-native/eslint-config": "0.85.0",
    "@react-native/metro-config": "0.85.0",
    "@react-native/typescript-config": "0.85.0",
    "@types/jest": "^29.5.13",
    "@types/react": "^19.2.0",
    "@types/react-test-renderer": "^19.1.0",
    "babel-preset-expo": "~56.0.0",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "19.2.3",
    "typescript": "^5.8.3"
  },
  "engines": {
    "node": ">= 22.11.0"
  }
}

react-native info output:

 OUTPUT GOES HERE
  • Platform that you're experiencing the issue on:
    • iOS
    • Android
    • iOS but have not tested behavior on Android
    • Android but have not tested behavior on iOS
    • Both
  • stream-chat-react-native version you're using that has this issue:
    • e.g. 5.4.3
  • Device/Emulator info:
    • Happens on all devices that I tested
    • Screen recording is from: iPhone 15 Pro Max iOS 26.5 (physical device)
    • Android recording is a Pixel 10 Android API 37 (emulator)

Additional context

Screenshots

Click To Expand


Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions