fix: tags being dimmed on safari (#1389)

packages/web/src/javascripts/Components/Tags/SmartViewsListItem.tsx

@@ -135,9 +135,9 @@ const SmartViewsListItem: FunctionComponent<Props> = ({ view, tagsState, isColla
           >
             <Icon type={iconType} className={isSelected ? 'text-info' : 'text-neutral'} />
           </div>
+          {isEditing ? (
             <input
-            className={classNames('title', isEditing ? 'editing' : '', isCollapsed ? 'hidden' : 'block')}
+              className={classNames('title editing', isCollapsed ? 'hidden' : 'block')}
-            disabled={!isEditing}
               id={`react-tag-${view.uuid}`}
               onBlur={onBlur}
               onInput={onInput}
@@ -146,6 +146,14 @@ const SmartViewsListItem: FunctionComponent<Props> = ({ view, tagsState, isColla
               spellCheck={false}
               ref={inputRef}
             />
+          ) : (
+            <div
+              className={classNames('title overflow-hidden text-left', isCollapsed ? 'hidden' : 'block')}
+              id={`react-tag-${view.uuid}`}
+            >
+              {title}
+            </div>
+          )}
           <div className={classNames('count', isCollapsed ? 'absolute top-0 right-0' : '')}>
             {view.uuid === SystemViewId.AllNotes && tagsState.allNotesCount}
           </div>

packages/web/src/javascripts/Components/Tags/TagsListItem.tsx

@@ -242,14 +242,13 @@ export const TagsListItem: FunctionComponent<Props> = observer(
             >
               <Icon type="hashtag" className={`${isSelected ? 'text-info' : 'text-neutral'}`} />
             </div>
+            {isEditing ? (
               <input
                 className={classNames(
-                'title focus:shadow-none focus:outline-none',
+                  'title editing focus:shadow-none focus:outline-none',
-                isEditing ? 'editing' : '',
                   isCollapsed ? 'md-only:!w-min lg-only:!w-min' : '',
                 )}
                 id={`react-tag-${tag.uuid}`}
-              disabled={!isEditing}
                 onBlur={onBlur}
                 onInput={onInput}
                 value={title}
@@ -257,6 +256,17 @@ export const TagsListItem: FunctionComponent<Props> = observer(
                 spellCheck={false}
                 ref={inputRef}
               />
+            ) : (
+              <div
+                className={classNames(
+                  'title overflow-hidden text-left focus:shadow-none focus:outline-none',
+                  isCollapsed ? 'md-only:!w-min lg-only:!w-min' : '',
+                )}
+                id={`react-tag-${tag.uuid}`}
+              >
+                {title}
+              </div>
+            )}
             <div className="flex items-center">
               <a
                 role="button"