Composer Ref API Documentation

Overview

The Composer component now supports a ref that exposes a focusSendBoxInput() method, allowing parent applications to programmatically focus the send box input field.

Usage Examples

TypeScript

import { useRef } from 'react';
import { Components, ComposerRef } from 'botframework-webchat-component';

const { Composer } = Components;

function MyApp() {
  const composerRef = useRef<ComposerRef>(null);

  const handleFocusSendBox = async () => {
    await composerRef.current?.focusSendBoxInput();
  };

  return (
    <div>
      <button onClick={handleFocusSendBox}>Focus Send Box</button>
      <Composer
        ref={composerRef}
        directLine={directLine}
        // ... other props
      />
    </div>
  );
}

JavaScript

import { useRef } from 'react';
import { Components } from 'botframework-webchat-component';

const { Composer } = Components;

function MyApp() {
  const composerRef = useRef(null);

  const handleFocusSendBox = async () => {
    await composerRef.current?.focusSendBoxInput();
  };

  return (
    <div>
      <button onClick={handleFocusSendBox}>Focus Send Box</button>
      <Composer
        ref={composerRef}
        directLine={directLine}
        // ... other props
      />
    </div>
  );
}

API Reference

ComposerRef

The ref object exposed by the Composer component.

Methods

• focusSendBoxInput(): Promise<void>
  • Programmatically focuses the send box input field
  • Activates the virtual keyboard on devices that have one
  • Returns a Promise that resolves when the focus operation completes

Implementation Details

• The ref API uses the existing useFocus('sendBox') hook internally
• Focusing the send box will activate virtual keyboards on mobile devices
• The method returns a Promise for async completion handling
• The implementation is minimal and leverages existing focus infrastructure
• Works with both the component package and full bundle package through ref forwarding