From 77cbb6b06e901de9e0eccee98219f946b014fe21 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Wed, 10 Aug 2022 18:34:05 +0530
Subject: [PATCH] fix: tags being dimmed on safari (#1389)

---
 .../Components/Tags/SmartViewsListItem.tsx    | 30 +++++++++-----
 .../Components/Tags/TagsListItem.tsx          | 40 ++++++++++++-------
 2 files changed, 44 insertions(+), 26 deletions(-)

diff --git a/packages/web/src/javascripts/Components/Tags/SmartViewsListItem.tsx b/packages/web/src/javascripts/Components/Tags/SmartViewsListItem.tsx
index b89c4a0dd..263c265cd 100644
--- a/packages/web/src/javascripts/Components/Tags/SmartViewsListItem.tsx
+++ b/packages/web/src/javascripts/Components/Tags/SmartViewsListItem.tsx
@@ -135,17 +135,25 @@ const SmartViewsListItem: FunctionComponent<Props> = ({ view, tagsState, isColla
           >
             <Icon type={iconType} className={isSelected ? 'text-info' : 'text-neutral'} />
           </div>
-          <input
-            className={classNames('title', isEditing ? 'editing' : '', isCollapsed ? 'hidden' : 'block')}
-            disabled={!isEditing}
-            id={`react-tag-${view.uuid}`}
-            onBlur={onBlur}
-            onInput={onInput}
-            value={title}
-            onKeyUp={onKeyUp}
-            spellCheck={false}
-            ref={inputRef}
-          />
+          {isEditing ? (
+            <input
+              className={classNames('title editing', isCollapsed ? 'hidden' : 'block')}
+              id={`react-tag-${view.uuid}`}
+              onBlur={onBlur}
+              onInput={onInput}
+              value={title}
+              onKeyUp={onKeyUp}
+              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>
diff --git a/packages/web/src/javascripts/Components/Tags/TagsListItem.tsx b/packages/web/src/javascripts/Components/Tags/TagsListItem.tsx
index 55dbde5b0..fdf966e53 100644
--- a/packages/web/src/javascripts/Components/Tags/TagsListItem.tsx
+++ b/packages/web/src/javascripts/Components/Tags/TagsListItem.tsx
@@ -242,21 +242,31 @@ export const TagsListItem: FunctionComponent<Props> = observer(
             >
               <Icon type="hashtag" className={`${isSelected ? 'text-info' : 'text-neutral'}`} />
             </div>
-            <input
-              className={classNames(
-                'title 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}
-              onKeyDown={onKeyDown}
-              spellCheck={false}
-              ref={inputRef}
-            />
+            {isEditing ? (
+              <input
+                className={classNames(
+                  'title editing focus:shadow-none focus:outline-none',
+                  isCollapsed ? 'md-only:!w-min lg-only:!w-min' : '',
+                )}
+                id={`react-tag-${tag.uuid}`}
+                onBlur={onBlur}
+                onInput={onInput}
+                value={title}
+                onKeyDown={onKeyDown}
+                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"