avoid constantly updating UsernameInput props (does nothing)

resources/js/chat/create-announcement.tsx

@@ -17,6 +17,12 @@ type Props = Record<string, never>;
 
 @observer
 export default class CreateAnnouncement extends React.Component<Props> {
+  private usernameInputInitialProps: typeof this.model.propsForUsernameInput = {
+    // dummy value so the field isn't nullablel runInAction in contructor doesn't count as initialized.
+    initialUsers: [],
+    initialValue: '',
+  };
+
   @computed
   private get canSend() {
     return core.dataStore.chatState.isReady && !core.dataStore.chatState.isAddingChannel && this.model.isValid;
@@ -34,6 +40,7 @@ export default class CreateAnnouncement extends React.Component<Props> {
 
     runInAction(() => {
       this.model.initialize();
+      this.usernameInputInitialProps = this.model.propsForUsernameInput;
     });
   }
 
@@ -85,7 +92,7 @@ export default class CreateAnnouncement extends React.Component<Props> {
                 onBlur={this.handleBlur}
                 onValidUsersChanged={this.handleValidUsersChanged}
                 onValueChanged={this.handleUsernameInputValueChanged}
-                {...this.model.propsForUsernameInput}
+                {...this.usernameInputInitialProps}
               />
             </div>
           </InputContainer>

resources/js/components/username-input.tsx

@@ -42,12 +42,14 @@ export default class UsernameInput extends React.PureComponent<Props> {
   @observable private readonly validUsers = new Map<number, UserJson>();
   private xhr?: ReturnType<typeof apiLookup>;
 
-
   constructor(props: Props) {
     super(props);
 
     makeObservable(this);
 
+    // Does not accept input value updates outside of construction.
+    // The component manages its own state so it can handle user and text
+    // conversion without bouncing values back and forth.
     if (this.props.initialUsers != null) {
       for (const user of this.props.initialUsers) {
         this.validUsers.set(user.id, user);