diff --git a/src/components/search/TagsFilter.tsx b/src/components/search/TagsFilter.tsx index d3ba620..97d71c6 100644 --- a/src/components/search/TagsFilter.tsx +++ b/src/components/search/TagsFilter.tsx @@ -30,12 +30,15 @@ export const TagsFilter: React.FC = ({ notes = [] }) => { const tagCounts = getAllTags(); const sortedTags = Object.keys(tagCounts).sort(); - const handleTagClick = (tag: string) => { + const handleTagClick = (tag: string, event: React.MouseEvent) => { + event.preventDefault(); if (selectedTag === tag) { dispatch(setSelectedTag(null)); } else { dispatch(setSelectedTag(tag)); } + // Сбрасываем фокус после клика для предотвращения сохранения состояния :active + (event.currentTarget as HTMLElement).blur(); }; if (sortedTags.length === 0) { @@ -72,7 +75,11 @@ export const TagsFilter: React.FC = ({ notes = [] }) => { key={tag} className={`tag ${isActive ? "active" : ""}`} data-tag={tag} - onClick={() => handleTagClick(tag)} + onClick={(e) => handleTagClick(tag, e)} + onTouchEnd={(e) => { + // Дополнительная обработка для touch-событий + e.currentTarget.blur(); + }} > #{tag} {count} diff --git a/src/styles/style.css b/src/styles/style.css index a1cb390..985bbaf 100644 --- a/src/styles/style.css +++ b/src/styles/style.css @@ -2562,19 +2562,49 @@ textarea:focus { text-overflow: ellipsis; white-space: nowrap; word-break: break-word; + touch-action: manipulation; + -webkit-tap-highlight-color: transparent; } -.mobile-sidebar .tag:hover { +.mobile-sidebar .tag:not(.active) { + background-color: rgba(var(--accent-color-rgb), 0.1) !important; + color: var(--accent-color) !important; +} + +.mobile-sidebar .tag:not(.active):hover { background-color: var(--accent-color, #007bff); color: white; } +/* Отключаем hover эффекты на touch-устройствах для предотвращения "залипания" */ +@media (hover: none) and (pointer: coarse) { + .mobile-sidebar .tag:not(.active):hover { + background-color: rgba(var(--accent-color-rgb), 0.1) !important; + color: var(--accent-color) !important; + } +} + +.mobile-sidebar .tag:not(.active):active, +.mobile-sidebar .tag:not(.active):focus, +.mobile-sidebar .tag:not(.active):focus:active { + background-color: rgba(var(--accent-color-rgb), 0.1) !important; + color: var(--accent-color) !important; + outline: none; +} + .mobile-sidebar .tag.active { background-color: var(--accent-color, #007bff); color: white; font-weight: bold; } +.mobile-sidebar .tag.active:active, +.mobile-sidebar .tag.active:focus { + background-color: var(--accent-color, #007bff); + color: white; + outline: none; +} + .mobile-sidebar .tag-count { margin-left: 3px; font-size: 8px; @@ -4817,12 +4847,7 @@ textarea:focus { } /* Очень маленькие экраны */ -@media (max-width: 480px) { - .mobile-menu-btn { - top: 10px; - left: 10px; - padding: 8px 10px; - } + .mobile-menu-btn .iconify { font-size: 20px;