fix: tags being dimmed on safari (#1389)

standardnotes · Aug 10, 2022 · 77cbb6b · 77cbb6b
1 parent 82a8bcc
commit 77cbb6b
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 26 deletions.
diff --git 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
@@ -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"