fix: Fix group name change, focus edit icon (#15197)

* fix: Fix group name change, focus edit icon * aria fixes * CR Fixes
wireapp · May 17, 2023 · 6c72e21 · 6c72e21
1 parent fc499fa
commit 6c72e21
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 12 deletions.
diff --git a/...ar/ConversationDetails/components/ConversationDetailsHeader/ConversationDetailsHeader.tsx b/...ar/ConversationDetails/components/ConversationDetailsHeader/ConversationDetailsHeader.tsx
@@ -53,6 +53,7 @@ const ConversationDetailsHeader: FC<ConversationDetailsHeaderProps> = ({
   isTeam = false,
 }) => {
   const textAreaRef = useRef<HTMLTextAreaElement | null>(null);
+  const isEditGroupNameTouched = useRef(false);
 
   const [isEditingName, setIsEditingName] = useState<boolean>(false);
   const [groupName, setGroupName] = useState(displayName);
@@ -73,16 +74,16 @@ const ConversationDetailsHeader: FC<ConversationDetailsHeaderProps> = ({
     if (isEnterKey(event)) {
       event.preventDefault();
       const {value: currentValue} = event.currentTarget;
-
       const currentConversationName = displayName.trim();
       const newConversationName = removeLineBreaks(currentValue.trim());
-
       const isNameChanged = newConversationName !== currentConversationName;
 
       if (isNameChanged) {
         updateConversationName(newConversationName);
         setGroupName(newConversationName);
         setIsEditingName(false);
+
+        isEditGroupNameTouched.current = false;
       }
     }
   };
@@ -95,13 +96,17 @@ const ConversationDetailsHeader: FC<ConversationDetailsHeaderProps> = ({
         textAreaRef.current.style.height = `${scrollHeight}px`;
       }
 
-      setTimeout(() => {
-        const currentValue = textAreaRef.current?.value;
-        const caretPosition = currentValue?.length || 0;
+      if (!isEditGroupNameTouched.current) {
+        setTimeout(() => {
+          const currentValue = textAreaRef.current?.value;
+          const caretPosition = currentValue?.length || 0;
 
-        textAreaRef.current?.setSelectionRange(caretPosition, caretPosition);
-        textAreaRef.current?.focus();
-      }, 0);
+          textAreaRef.current?.setSelectionRange(caretPosition, caretPosition);
+          textAreaRef.current?.focus();
+
+          isEditGroupNameTouched.current = true;
+        }, 0);
+      }
     }
   }, [isEditingName, groupName]);
 
@@ -112,15 +117,21 @@ const ConversationDetailsHeader: FC<ConversationDetailsHeaderProps> = ({
           {!isEditingName ? (
             <div
               className="conversation-details__name"
-              title={t('tooltipConversationDetailsRename')}
               data-uie-name="status-name"
               {...(canRenameGroup && {
                 onClick: clickToEditGroupName,
               })}
             >
               {displayName && <span className="conversation-details__name">{displayName}</span>}
 
-              {canRenameGroup && <Icon.Edit className="conversation-details__name__edit-icon" />}
+              {canRenameGroup && (
+                <button
+                  className="conversation-details__name__edit-icon"
+                  aria-label={t('tooltipConversationDetailsRename')}
+                >
+                  <Icon.Edit />
+                </button>
+              )}
             </div>
           ) : (
             <textarea

diff --git a/src/style/panel/conversation-details.less b/src/style/panel/conversation-details.less
@@ -70,11 +70,19 @@
     }
 
     &__edit-icon {
-      flex-grow: 1;
-      margin-left: 11px;
+      display: flex;
+      align-items: center;
+      padding: 4px;
+      border: none;
+      margin-left: 7px;
+      background: transparent;
       opacity: 0;
       transition: opacity @animation-timing-faster @ease-in-quart;
 
+      &:focus {
+        opacity: 1;
+      }
+
       svg {
         width: 12px;
         height: 12px;