Focus group description input when editing it

stylesheets/_modules.scss

@@ -2614,21 +2614,19 @@ button.module-conversation-details__action-button {
 
 .module-conversation-details {
   &-header {
-    &__root,
-    &__root--editable {
+    &__root {
       align-items: center;
-      background: none;
-      border: none;
-      color: inherit;
       display: flex;
       flex-direction: column;
-      margin: 0;
-      outline: inherit;
-      padding: 0 0 24px 0;
+      margin: 0 0 24px 0;
       text-align: center;
       width: 100%;
     }
 
+    &__root--editable {
+      @include button-reset();
+    }
+
     &__root--editable {
       cursor: pointer;
     }

ts/components/conversation/conversation-details/ConversationDetails.tsx

@@ -36,7 +36,8 @@ import { getCustomColorStyle } from '../../../util/getCustomColorStyle';
 
 enum ModalState {
   NothingOpen,
-  EditingGroupAttributes,
+  EditingGroupDescription,
+  EditingGroupTitle,
   AddingGroupMembers,
   CustomDisappearingTimeout,
 }
@@ -142,10 +143,12 @@ export const ConversationDetails: React.ComponentType<Props> = ({
     case ModalState.NothingOpen:
       modalNode = undefined;
       break;
-    case ModalState.EditingGroupAttributes:
+    case ModalState.EditingGroupDescription:
+    case ModalState.EditingGroupTitle:
       modalNode = (
         <EditConversationAttributesModal
           avatarPath={conversation.avatarPath}
+          focusDescription={modalState === ModalState.EditingGroupDescription}
           groupDescription={conversation.groupDescription}
           i18n={i18n}
           makeRequest={async (
@@ -269,8 +272,12 @@ export const ConversationDetails: React.ComponentType<Props> = ({
         conversation={conversation}
         i18n={i18n}
         memberships={memberships}
-        startEditing={() => {
-          setModalState(ModalState.EditingGroupAttributes);
+        startEditing={(isGroupTitle: boolean) => {
+          setModalState(
+            isGroupTitle
+              ? ModalState.EditingGroupTitle
+              : ModalState.EditingGroupDescription
+          );
         }}
       />
 

ts/components/conversation/conversation-details/ConversationDetailsHeader.tsx

@@ -16,7 +16,7 @@ export type Props = {
   conversation: ConversationType;
   i18n: LocalizerType;
   memberships: Array<GroupV2Membership>;
-  startEditing: () => void;
+  startEditing: (isGroupTitle: boolean) => void;
 };
 
 const bem = bemGenerator('module-conversation-details-header');
@@ -58,24 +58,36 @@ export const ConversationDetailsHeader: React.ComponentType<Props> = ({
         <div className={bem('title')}>
           <Emojify text={conversation.title} />
         </div>
-        <div className={bem('subtitle')}>{subtitle}</div>
       </div>
     </>
   );
 
   if (canEdit) {
     return (
-      <button
-        type="button"
-        onClick={ev => {
-          ev.preventDefault();
-          ev.stopPropagation();
-          startEditing();
-        }}
-        className={bem('root', 'editable')}
-      >
-        {contents}
-      </button>
+      <div className={bem('root')}>
+        <button
+          type="button"
+          onClick={ev => {
+            ev.preventDefault();
+            ev.stopPropagation();
+            startEditing(true);
+          }}
+          className={bem('root', 'editable')}
+        >
+          {contents}
+        </button>
+        <button
+          type="button"
+          onClick={ev => {
+            ev.preventDefault();
+            ev.stopPropagation();
+            startEditing(false);
+          }}
+          className={bem('root', 'editable')}
+        >
+          <div className={bem('subtitle')}>{subtitle}</div>
+        </button>
+      </div>
     );
   }
 

ts/components/conversation/conversation-details/EditConversationAttributesModal.tsx

@@ -25,6 +25,7 @@ const TEMPORARY_AVATAR_VALUE = new ArrayBuffer(0);
 
 type PropsType = {
   avatarPath?: string;
+  focusDescription?: boolean;
   groupDescription?: string;
   i18n: LocalizerType;
   makeRequest: (
@@ -39,8 +40,15 @@ type PropsType = {
   title: string;
 };
 
+function focusRef(el: HTMLElement | null) {
+  if (el) {
+    el.focus();
+  }
+}
+
 export const EditConversationAttributesModal: FunctionComponent<PropsType> = ({
   avatarPath: externalAvatarPath,
+  focusDescription = false,
   groupDescription: externalGroupDescription = '',
   i18n,
   makeRequest,
@@ -156,6 +164,7 @@ export const EditConversationAttributesModal: FunctionComponent<PropsType> = ({
           disabled={isRequestActive}
           i18n={i18n}
           onChangeValue={setRawTitle}
+          ref={!focusDescription ? focusRef : undefined}
           value={rawTitle}
         />
 
@@ -163,6 +172,7 @@ export const EditConversationAttributesModal: FunctionComponent<PropsType> = ({
           disabled={isRequestActive}
           i18n={i18n}
           onChangeValue={setRawGroupDescription}
+          ref={focusDescription ? focusRef : undefined}
           value={rawGroupDescription}
         />