diff --git a/packages/web/components/templates/navMenu/LibraryLegacyMenu.tsx b/packages/web/components/templates/navMenu/LibraryLegacyMenu.tsx index 20a31c0be..58bf59f03 100644 --- a/packages/web/components/templates/navMenu/LibraryLegacyMenu.tsx +++ b/packages/web/components/templates/navMenu/LibraryLegacyMenu.tsx @@ -510,7 +510,7 @@ function LabelButton(props: LabelButtonProps): JSX.Element { const checkboxRef = useRef(null) const state = useMemo(() => { const term = props.searchTerm ?? '' - if (term.indexOf(`label:\"${props.label.name}\"`) >= 0) { + if (term.indexOf(`label:\"${escapeQuotes(props.label.name)}\"`) >= 0) { return 'on' } return 'off' @@ -560,7 +560,7 @@ function LabelButton(props: LabelButtonProps): JSX.Element { props.applySearchQuery(query.trim()) } else { props.applySearchQuery( - `${query.trim()} label:\"${props.label.name}\"` + `${query.trim()} label:\"${escapeQuotes(props.label.name)}\"` ) } }} @@ -579,16 +579,14 @@ function LabelButton(props: LabelButtonProps): JSX.Element { type="checkbox" checked={state === 'on'} onChange={(e) => { + const escapedName = escapeQuotes(props.label.name) if (e.target.checked) { props.applySearchQuery( - `${props.searchTerm ?? ''} label:\"${props.label.name}\"` + `${props.searchTerm ?? ''} label:\"${escapedName}\"` ) } else { const query = - props.searchTerm?.replace( - `label:\"${props.label.name}\"`, - '' - ) ?? '' + props.searchTerm?.replace(`label:\"${escapedName}\"`, '') ?? '' props.applySearchQuery(query) } }} diff --git a/packages/web/components/templates/navMenu/LibraryMenu.tsx b/packages/web/components/templates/navMenu/LibraryMenu.tsx index 0da615ab0..165a257ad 100644 --- a/packages/web/components/templates/navMenu/LibraryMenu.tsx +++ b/packages/web/components/templates/navMenu/LibraryMenu.tsx @@ -935,7 +935,7 @@ function LabelButton(props: LabelButtonProps): JSX.Element { const checkboxRef = useRef(null) const state = useMemo(() => { const term = props.searchTerm ?? '' - if (term.indexOf(`label:\"${props.label.name}\"`) >= 0) { + if (term.indexOf(`label:\"${escapeQuotes(props.label.name)}\"`) >= 0) { return 'on' } return 'off' @@ -985,7 +985,7 @@ function LabelButton(props: LabelButtonProps): JSX.Element { props.applySearchQuery(query.trim()) } else { props.applySearchQuery( - `${query.trim()} label:\"${props.label.name}\"` + `${query.trim()} label:\"${escapeQuotes(props.label.name)}\"` ) } }} @@ -1004,14 +1004,15 @@ function LabelButton(props: LabelButtonProps): JSX.Element { type="checkbox" checked={state === 'on'} onChange={(e) => { + const escapedLabelName = escapeQuotes(props.label.name) if (e.target.checked) { props.applySearchQuery( - `${props.searchTerm ?? ''} label:\"${props.label.name}\"` + `${props.searchTerm ?? ''} label:\"${escapedLabelName}\"` ) } else { const query = props.searchTerm?.replace( - `label:\"${props.label.name}\"`, + `label:\"${escapedLabelName}\"`, '' ) ?? '' props.applySearchQuery(query) diff --git a/packages/web/pages/settings/pinned-searches.tsx b/packages/web/pages/settings/pinned-searches.tsx index b06f8cce9..784062d14 100644 --- a/packages/web/pages/settings/pinned-searches.tsx +++ b/packages/web/pages/settings/pinned-searches.tsx @@ -21,6 +21,7 @@ import { Label } from '../../lib/networking/fragments/labelFragment' import { CheckSquare, Circle, Square } from 'phosphor-react' import { SavedSearch } from '../../lib/networking/fragments/savedSearchFragment' import { usePersistedState } from '../../lib/hooks/usePersistedState' +import { escapeQuotes } from '../../utils/helper' export type PinnedSearch = { type: 'saved-search' | 'label' @@ -282,7 +283,7 @@ function LabelButton(props: LabelButtonProps): JSX.Element { type: 'label', itemId: props.label.id, name: props.label.name, - search: `label:\"${props.label.name}\"`, + search: `label:\"${escapeQuotes(props.label.name)}\"`, }} listAction={props.listAction} > diff --git a/packages/web/pages/settings/shortcuts.tsx b/packages/web/pages/settings/shortcuts.tsx index 7d1879156..09355ee2b 100644 --- a/packages/web/pages/settings/shortcuts.tsx +++ b/packages/web/pages/settings/shortcuts.tsx @@ -357,7 +357,7 @@ const AvailableItems = (props: ListProps): JSX.Element => { type: 'label', label: label, name: label.name, - filter: `label:\"${label.name}\"`, + filter: `label:\"${escapeQuotes(label.name)}\"`, } props.dispatchList({ item,