From 42f4672105a887ea2cf2810f39cf8adfad723ea9 Mon Sep 17 00:00:00 2001
From: mohammadamer <m.amer@live.com>
Date: Tue, 21 Dec 2021 21:58:56 +0200
Subject: [PATCH] Fix post upgrade issue related to event title field gets
 frozen after typing few letters.

---
 .../react-calendar/src/controls/Event/event.tsx   | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/samples/react-calendar/src/controls/Event/event.tsx b/samples/react-calendar/src/controls/Event/event.tsx
index a0dfbee6b..7b47c019d 100644
--- a/samples/react-calendar/src/controls/Event/event.tsx
+++ b/samples/react-calendar/src/controls/Event/event.tsx
@@ -123,6 +123,7 @@ export class Event extends React.Component<IEventProps, IEventState> {
     this.onSelectDateStart = this.onSelectDateStart.bind(this);
     this.onUpdateCoordinates = this.onUpdateCoordinates.bind(this);
     this.onGetErrorMessageTitle = this.onGetErrorMessageTitle.bind(this);
+    this.onChangeEventTitle = this.onChangeEventTitle.bind(this);
     this.getPeoplePickerItems = this.getPeoplePickerItems.bind(this);
     this.hidePanel = this.hidePanel.bind(this);
     this.onDelete = this.onDelete.bind(this);
@@ -410,10 +411,21 @@ export class Event extends React.Component<IEventProps, IEventState> {
     if (value.length === 0) {
       returnMessage = strings.EventTitleErrorMessage;
     } else {
-      this.setState({ eventData: { ...this.state.eventData, title: value }, disableButton: false, errorMessage: '' });
+      this.setState({disableButton: false, errorMessage: '' });
     }
     return returnMessage;
   }
+
+  /**
+   *
+   * @private
+   * @memberof Event
+   */
+  private onChangeEventTitle (event:any) {
+    const eventTitle = event.target.value;
+    this.setState({eventData: {...this.state.eventData, title: eventTitle}});
+  }
+
   /**
    *
    * @private
@@ -923,6 +935,7 @@ export class Event extends React.Component<IEventProps, IEventState> {
                   <TextField
                     label={strings.EventTitleLabel}
                     value={this.state.eventData ? this.state.eventData.title : ''}
+                    onChange={this.onChangeEventTitle}
                     onGetErrorMessage={this.onGetErrorMessageTitle}
                     deferredValidationTime={500}
                     disabled={this.state.userPermissions.hasPermissionAdd || this.state.userPermissions.hasPermissionEdit ? false : true}