fix: Dashboard alias not updating in safari (#5310)

Author: Zaimwa9

frontend/common/services/useIdentity.ts

@@ -141,7 +141,7 @@ export const identityService = service
             query.environmentId
           }/${Utils.getIdentitiesEndpoint()}/${
             query.data.identity_uuid || query.data.id
-          }`,
+          }/`,
         }),
       }),
       // END OF ENDPOINTS

frontend/web/components/EditIdentity.tsx

@@ -3,7 +3,7 @@ import { Identity } from 'common/types/responses'
 import { useUpdateIdentityMutation } from 'common/services/useIdentity'
 import Button from './base/forms/Button'
 import ErrorMessage from './ErrorMessage'
-import classNames from 'classnames'
+import GhostInput from './base/forms/GhostInput'
 
 type EditIdentityType = {
   data: Identity
@@ -13,7 +13,7 @@ type EditIdentityType = {
 
 const EditIdentity: FC<EditIdentityType> = ({ data, environmentId }) => {
   const [alias, setAlias] = useState(data.dashboard_alias)
-  const aliasRef = useRef<HTMLSpanElement>(null)
+  const aliasRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
     setAlias(data?.dashboard_alias)
@@ -22,20 +22,11 @@ const EditIdentity: FC<EditIdentityType> = ({ data, environmentId }) => {
   const [updateIdentity, { error, isLoading }] = useUpdateIdentityMutation({})
 
   const handleBlur = () => {
-    if (aliasRef.current) {
-      const updatedAlias = (aliasRef.current.textContent || '')
-        .replace(/\n/g, ' ')
-        .trim()
-        .toLowerCase()
-
-      aliasRef.current.textContent = alias
-      setAlias(updatedAlias)
-      onSubmit(updatedAlias)
-    }
+    onSubmit(alias)
   }
 
-  const onSubmit = (updatedAlias: string) => {
-    if (!isLoading && updatedAlias) {
+  const onSubmit = (updatedAlias?: string) => {
+    if (!isLoading) {
       updateIdentity({
         data: { ...data, dashboard_alias: updatedAlias },
         environmentId,
@@ -44,26 +35,7 @@ const EditIdentity: FC<EditIdentityType> = ({ data, environmentId }) => {
   }
 
   const handleFocus = () => {
-    if (!alias) {
-      aliasRef.current.textContent = '' // Clear the content
-    }
-
-    // Ensure that aliasRef.current has at least one child node (a text node)
-    if (aliasRef.current && aliasRef.current.childNodes.length === 0) {
-      aliasRef.current.appendChild(document.createTextNode(''))
-    }
-
-    if (aliasRef.current) {
-      const selection = window.getSelection()
-      const range = document.createRange()
-
-      const textLength = aliasRef.current.textContent?.length || 0
-      range.setStart(aliasRef.current.childNodes[0], textLength)
-      range.collapse(true)
-
-      selection?.removeAllRanges()
-      selection?.addRange(range)
-    }
+    aliasRef.current?.focus()
   }
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLSpanElement>) => {
@@ -73,48 +45,27 @@ const EditIdentity: FC<EditIdentityType> = ({ data, environmentId }) => {
     }
   }
 
-  const handleInput = () => {
-    if (aliasRef.current) {
-      const selection = window.getSelection()
-      const range = selection?.getRangeAt(0)
-      const cursorPosition = range?.startOffset || 0
-
-      const lowerCaseText = aliasRef.current.textContent?.toLowerCase() || ''
-      aliasRef.current.textContent = lowerCaseText
-
-      // Restore cursor position
-      const newRange = document.createRange()
-      newRange.setStart(
-        aliasRef.current.childNodes[0],
-        Math.min(cursorPosition, lowerCaseText.length),
-      )
-      newRange.collapse(true)
-
-      selection?.removeAllRanges()
-      selection?.addRange(newRange)
-    }
+  const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value.toLowerCase()
+    setAlias(newValue.replace(/\n/g, ' ').trim())
   }
 
   return (
     <>
-      <span
+      <GhostInput
         ref={aliasRef}
-        className={classNames('fw-normal', { 'text-muted': !alias })}
-        contentEditable={true}
-        suppressContentEditableWarning={true}
+        value={alias}
+        onChange={handleInput}
         onBlur={handleBlur}
         onKeyDown={handleKeyDown}
-        onInput={handleInput}
-        role='textbox'
-        aria-label='Alias'
-      >
-        {alias || 'None'}
-      </span>
+        placeholder='None'
+      />
       <Button
         disabled={!data}
         iconSize={18}
         theme='text'
-        className='ms-2 text-primary'
+        style={{ lineHeight: 'inherit' }}
+        className='text-primary'
         iconRightColour='primary'
         iconRight={'edit'}
         onClick={handleFocus}

frontend/web/components/base/forms/GhostInput.tsx

@@ -0,0 +1,92 @@
+import React, { forwardRef, useEffect, useRef, useState } from 'react'
+import classNames from 'classnames'
+
+type GhostInputProps = {
+  value?: string
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+  onBlur?: () => void
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void
+  placeholder: string
+  className?: string
+  width?: number
+  'aria-label'?: string
+}
+
+const GhostInput = forwardRef<HTMLInputElement, GhostInputProps>(
+  (
+    {
+      'aria-label': ariaLabel,
+      className,
+      onBlur,
+      onChange,
+      onKeyDown,
+      placeholder = '',
+      value,
+    },
+    ref,
+  ) => {
+    const spanRef = useRef<HTMLSpanElement>(null)
+    const [inputWidth, setInputWidth] = useState(5)
+
+    useEffect(() => {
+      if (spanRef.current) {
+        setInputWidth(spanRef.current.offsetWidth * 0.95)
+      }
+    }, [value])
+
+    return (
+      <div style={{ display: 'inline-block', position: 'relative' }}>
+        <span
+          ref={spanRef}
+          style={{
+            border: 0,
+            fontFamily: 'inherit',
+            fontSize: 'inherit',
+            fontWeight: 'inherit',
+            letterSpacing: 'inherit',
+            lineHeight: 'inherit',
+            margin: 0,
+            padding: 0,
+            position: 'absolute',
+            visibility: 'hidden',
+            whiteSpace: 'pre',
+          }}
+        >
+          {value || placeholder}
+        </span>
+        <input
+          ref={ref}
+          maxLength={100}
+          className={classNames('fw-normal', className, {
+            'text-muted': !value,
+          })}
+          value={value}
+          placeholder={placeholder}
+          onChange={onChange}
+          onBlur={onBlur}
+          onKeyDown={onKeyDown}
+          role='textbox'
+          aria-label={ariaLabel}
+          spellCheck={false}
+          style={{
+            background: 'transparent',
+            border: 'none',
+            boxShadow: 'none',
+            color: 'inherit',
+            cursor: 'text',
+            fontFamily: 'inherit',
+            fontSize: 'inherit',
+            margin: 0,
+            outline: 'none',
+            padding: 0,
+            width: inputWidth,
+          }}
+        />
+      </div>
+    )
+  },
+)
+
+GhostInput.displayName = 'GhostInput'
+
+export default GhostInput

frontend/web/components/pages/HomeAside.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentProps, FC, useEffect, useMemo, useState } from 'react'
+import React, { ComponentProps, FC, useEffect, useState } from 'react'
 import ProjectStore from 'common/stores/project-store'
 import ChangeRequestStore from 'common/stores/change-requests-store'
 import Utils from 'common/utils/utils'
@@ -355,7 +355,7 @@ const HomeAside: FC<HomeAsideType> = ({
                                       exact
                                       to={`/project/${project.id}/environment/${environment.api_key}/split-tests`}
                                     >
-                                      <IonIcon className='mr-2' icon={flask} />
+                                      <IonIcon className='mr-2' icon={flask} color={'#9DA4AE'} />
                                       Split Tests
                                     </NavLink>
                                   )}

frontend/web/components/pages/UserPage.tsx

@@ -332,7 +332,7 @@ const UserPage: FC<UserPageType> = (props) => {
                           }
                         />
                         {showAliases && (
-                          <h6>
+                          <h6 className='d-flex align-items-center gap-1'>
                             <Tooltip
                               title={
                                 <span className='user-select-none'>