Resetting inclusion/exclusion fields with filters

components/common/MentionTableField/index.tsx

@@ -1,5 +1,6 @@
 import TableField from '~components/common/TableField'
 import MentionTypeahead from '../MentionTypeahead'
+import Typeahead from 'react-bootstrap-typeahead/types/core/Typeahead'
 
 interface Props
   extends React.DetailedHTMLProps<
@@ -11,6 +12,7 @@ interface Props
   placeholder?: string
   inclusions: MentionItem[]
   exclusions: MentionItem[]
+  typeaheadRef: React.Ref<Typeahead>
   onUpdate: (content: MentionItem[]) => void
 }
 
@@ -20,6 +22,7 @@ const MentionTableField = ({
   placeholder,
   inclusions,
   exclusions,
+  typeaheadRef,
   ...props
 }: Props) => {
   return (
@@ -31,6 +34,7 @@ const MentionTableField = ({
       label={label}
     >
       <MentionTypeahead
+        ref={typeaheadRef}
         label={label}
         description={description}
         placeholder={placeholder}

components/common/MentionTypeahead/index.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import { useState } from 'react'
 import { getCookie } from 'cookies-next'
 import { useTranslation } from 'next-i18next'
@@ -14,6 +15,7 @@ import {
   RenderMenuProps,
   Token,
 } from 'react-bootstrap-typeahead'
+import Typeahead from 'react-bootstrap-typeahead/types/core/Typeahead'
 
 import api from '~utils/api'
 import { numberToElement } from '~utils/elements'
@@ -41,14 +43,10 @@ interface RawSearchResponse {
   element: number
 }
 
-const MentionTypeahead = ({
+const MentionTypeahead = React.forwardRef<Typeahead, Props>(function Typeahead(
-  label,
+  { label, description, placeholder, inclusions, exclusions, ...props }: Props,
-  description,
+  forwardedRef
-  placeholder,
+) {
-  inclusions,
-  exclusions,
-  ...props
-}: Props) => {
   const { t } = useTranslation('common')
   const locale = getCookie('NEXT_LOCALE')
     ? (getCookie('NEXT_LOCALE') as string)
@@ -159,6 +157,7 @@ const MentionTypeahead = ({
   return (
     <AsyncTypeahead
       multiple
+      ref={forwardedRef}
       className={styles.typeahead}
       id={label}
       align="left"
@@ -166,7 +165,6 @@ const MentionTypeahead = ({
       labelKey={(option) => (option as MentionItem).name[locale]}
       defaultSelected={inclusions}
       filterBy={() => true}
-      minLength={3}
       onSearch={handleSearch}
       options={options}
       useCache={false}
@@ -181,6 +179,6 @@ const MentionTypeahead = ({
       onChange={(selected) => props.onUpdate(selected as MentionItem[])}
     />
   )
-}
+})
 
 export default MentionTypeahead

components/filters/FilterModal/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { getCookie, setCookie } from 'cookies-next'
 import { useRouter } from 'next/router'
 import { Trans, useTranslation } from 'react-i18next'
@@ -10,16 +10,16 @@ import DialogContent from '~components/common/DialogContent'
 
 import Button from '~components/common/Button'
 import InputTableField from '~components/common/InputTableField'
+import MentionTableField from '~components/common/MentionTableField'
 import SelectTableField from '~components/common/SelectTableField'
 import SliderTableField from '~components/common/SliderTableField'
 import SwitchTableField from '~components/common/SwitchTableField'
 import SelectItem from '~components/common/SelectItem'
 
 import type { DialogProps } from '@radix-ui/react-dialog'
+import Typeahead from 'react-bootstrap-typeahead/types/core/Typeahead'
 
 import styles from './index.module.scss'
-import MentionTableField from '~components/common/MentionTableField'
-import classNames from 'classnames'
 
 interface Props extends DialogProps {
   defaultFilterSet: FilterSet
@@ -43,6 +43,8 @@ const FilterModal = (props: Props) => {
   // Refs
   const headerRef = React.createRef<HTMLDivElement>()
   const footerRef = React.createRef<HTMLDivElement>()
+  const inclusionRef = useRef<Typeahead>(null)
+  const exclusionRef = useRef<Typeahead>(null)
 
   // States
   const [open, setOpen] = useState(false)
@@ -88,7 +90,6 @@ const FilterModal = (props: Props) => {
   useEffect(() => {
     if (props.open !== undefined) {
       setOpen(props.open)
-
       // When should we reset the filter state?
     }
   })
@@ -160,6 +161,12 @@ const FilterModal = (props: Props) => {
     setUserQuality(props.defaultFilterSet.user_quality)
     setNameQuality(props.defaultFilterSet.name_quality)
     setOriginalOnly(props.defaultFilterSet.original)
+
+    setInclusions([])
+    inclusionRef.current?.clear()
+
+    setExclusions([])
+    exclusionRef.current?.clear()
   }
 
   function openChange() {
@@ -413,6 +420,7 @@ const FilterModal = (props: Props) => {
       exclusions={exclusions}
       placeholder={t('modals.filters.placeholders.inclusion')}
       label={t('modals.filters.labels.inclusion')}
+      typeaheadRef={inclusionRef}
       onUpdate={storeInclusions}
     />
   )
@@ -424,6 +432,7 @@ const FilterModal = (props: Props) => {
       exclusions={inclusions}
       placeholder={t('modals.filters.placeholders.exclusion')}
       label={t('modals.filters.labels.exclusion')}
+      typeaheadRef={exclusionRef}
       onUpdate={storeExclusions}
     />
   )