diff --git a/components/edit_channel_header_modal/edit_channel_header_modal.jsx b/components/edit_channel_header_modal/edit_channel_header_modal.jsx
index 47ba429df485..1956dbd173ba 100644
--- a/components/edit_channel_header_modal/edit_channel_header_modal.jsx
+++ b/components/edit_channel_header_modal/edit_channel_header_modal.jsx
@@ -79,6 +79,7 @@ class EditChannelHeaderModal extends React.PureComponent {
             header: props.channel.header,
             saving: false,
         };
+        this.editChannelHeaderTextboxRef = React.createRef();
     }
 
     handleModalKeyDown = (e) => {
@@ -120,14 +121,14 @@ class EditChannelHeaderModal extends React.PureComponent {
     }
 
     focusTextbox = () => {
-        if (this.refs.editChannelHeaderTextbox) {
-            this.refs.editChannelHeaderTextbox.focus();
+        if (this.editChannelHeaderTextboxRef.current) {
+            this.editChannelHeaderTextboxRef.current.focus();
         }
     }
 
     blurTextbox = () => {
-        if (this.refs.editChannelHeaderTextbox) {
-            this.refs.editChannelHeaderTextbox.blur();
+        if (this.editChannelHeaderTextboxRef.current) {
+            this.editChannelHeaderTextboxRef.current.blur();
         }
     }
 
@@ -242,7 +243,7 @@ class EditChannelHeaderModal extends React.PureComponent {
                                 handlePostError={this.handlePostError}
                                 channelId={this.props.channel.id}
                                 id='edit_textbox'
-                                ref='editChannelHeaderTextbox'
+                                ref={this.editChannelHeaderTextboxRef}
                                 characterLimit={1024}
                                 preview={this.props.shouldShowPreview}
                             />