work on filtering mobile

barbalex · Jan 23, 2025 · cb44648 · cb44648
1 parent 75edd85
commit cb44648
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 62 deletions.
diff --git a/src/components/Bookmarks/Bookmark/Menu/Title/FilterInput.jsx b/src/components/Bookmarks/Bookmark/Menu/Title/FilterInput.jsx
@@ -28,6 +28,8 @@ const StyledTextField = styled(TextField)`
   width: ${(props) => (props.width ?? 32) - 32}px;
 `
 
+const isCoarsePointer = matchMedia('(pointer: coarse)').matches
+
 export const FilterInput = memo(
   observer(({ width, filterInputIsVisible, ref: inputRef }) => {
     const store = useContext(MobxContext)
@@ -39,6 +41,7 @@ export const FilterInput = memo(
 
     const filterValue = nodeLabelFilter?.[activeFilterTable] ?? ''
     const [value, setValue] = useState(filterValue)
+    // value should update when changed from outside
     useEffect(() => {
       if (filterValue === value) return
       setValue(filterValue)
@@ -62,26 +65,28 @@ export const FilterInput = memo(
       (e) => {
         // remove some values as they can cause exceptions in regular expressions
         const val = e.target.value.replaceAll('(', '').replaceAll(')', '')
-
         setValue(val)
 
-        const isCoarsePointer = matchMedia('(pointer: coarse)').matches
-
-        if (isCoarsePointer) {
-          // issue: (https://github.com/barbalex/apf2/issues/710)
-          // setting nodeLabelFilter rerenders the component
-          // so focus has to be reset
-          // on mobile this makes the keyboard disappear and reappear
-          // thus better to filter on enter
-          if (e.key === 'Enter') {
-            setNodeLabelFilter(val)
-          }
-          return
-        }
-        // pointer is fine
+        // on coarse pointer filter on enter, not debounced
+        if (isCoarsePointer) return
+
         setNodeLabelFilterDebounced(val)
       },
-      [setNodeLabelFilterDebounced],
+      [setNodeLabelFilterDebounced, isCoarsePointer],
+    )
+
+    // issue: (https://github.com/barbalex/apf2/issues/710)
+    // setting nodeLabelFilter rerenders the component, so focus has to be reset
+    // on mobile this makes the keyboard disappear and reappear
+    // thus better to filter on pressing enter
+    const onKeyDown = useCallback(
+      (e) => {
+        if (!isCoarsePointer) return
+        if (!e.key === 'Enter') return
+
+        setNodeLabelFilter(value)
+      },
+      [setNodeLabelFilter, isCoarsePointer, value],
     )
 
     const onClickEmpty = useCallback(() => {
@@ -102,6 +107,7 @@ export const FilterInput = memo(
           width={width}
           value={value}
           onChange={onChange}
+          onKeyDown={onKeyDown}
           spellCheck="false"
           autoComplete="off"
           autoCorrect="off"

diff --git a/src/components/Projekte/TreeContainer/LabelFilter.jsx b/src/components/Projekte/TreeContainer/LabelFilter.jsx
@@ -38,6 +38,8 @@ const StyledDeleteFilterIcon = styled(MdDeleteSweep)`
   font-size: 1.5rem;
 `
 
+const isCoarsePointer = matchMedia('(pointer: coarse)').matches
+
 export const LabelFilter = memo(
   observer(() => {
     const store = useContext(MobxContext)
@@ -97,29 +99,30 @@ export const LabelFilter = memo(
 
         // remove some values as they can cause exceptions in regular expressions
         const val = e.target.value.replaceAll('(', '').replaceAll(')', '')
-
         setValue(val)
 
-        const isCoarsePointer = matchMedia('(pointer: coarse)').matches
-
-        if (isCoarsePointer) {
-          // issue: (https://github.com/barbalex/apf2/issues/710)
-          // setting nodeLabelFilter rerenders the component
-          // so focus has to be reset
-          // on mobile this makes the keyboard disappear and reappear
-          // thus better to filter on enter
-          if (e.key === 'Enter') {
-            setNodeLabelFilter(val)
-          }
-          return
-        }
+        // on coarse pointer filter on enter, not debounced
+        if (isCoarsePointer) return
 
-        // pointer is fine
         setNodeLabelFilterDebounced(val)
       },
       [labelText, setNodeLabelFilterDebounced],
     )
 
+    // issue: (https://github.com/barbalex/apf2/issues/710)
+    // setting nodeLabelFilter rerenders the component, so focus has to be reset
+    // on mobile this makes the keyboard disappear and reappear
+    // thus better to filter on pressing enter
+    const onKeyDown = useCallback(
+      (e) => {
+        if (!isCoarsePointer) return
+        if (!e.key === 'Enter') return
+
+        setNodeLabelFilter(value)
+      },
+      [setNodeLabelFilter, isCoarsePointer, value],
+    )
+
     const onClickEmptyFilter = useCallback(() => {
       empty()
       setValue('')
@@ -135,6 +138,7 @@ export const LabelFilter = memo(
           id={labelText}
           value={value}
           onChange={onChange}
+          onKeyDown={onKeyDown}
           spellCheck="false"
           autoComplete="off"
           autoCorrect="off"

diff --git a/src/components/shared/FormTitle/FilterInput.jsx b/src/components/shared/FormTitle/FilterInput.jsx
@@ -59,10 +59,8 @@ export const FilterInput = memo(
       setValue(filterValue)
     }, [filterValue])
 
-    const [valSNLF, setValSNLF] = useState('')
     const setNodeLabelFilter = useCallback(
       (val) => {
-        setValSNLF(val)
         setNodeLabelFilterKey({
           value: val,
           key: activeFilterTable,
@@ -79,42 +77,24 @@ export const FilterInput = memo(
       (e) => {
         // remove some values as they can cause exceptions in regular expressions
         const val = e.target.value.replaceAll('(', '').replaceAll(')', '')
-
         setValue(val)
 
-        if (isCoarsePointer) {
-          // issue: (https://github.com/barbalex/apf2/issues/710)
-          // setting nodeLabelFilter rerenders the component
-          // so focus has to be reset
-          // on mobile this makes the keyboard disappear and reappear
-          // thus better to filter on enter
-          // but that can only be caught on keydown, not on change
-          return
-        }
+        // on coarse pointer filter on enter, not debounced
+        if (isCoarsePointer) return
+
         setNodeLabelFilterDebounced(val)
       },
       [setNodeLabelFilterDebounced, isCoarsePointer],
     )
 
-    const [keyPressed, setKeyPressed] = useState(null)
-    const [doSet, setDoSet] = useState(false)
+    // issue: (https://github.com/barbalex/apf2/issues/710)
+    // setting nodeLabelFilter rerenders the component, so focus has to be reset
+    // on mobile this makes the keyboard disappear and reappear
+    // thus better to filter on pressing enter
     const onKeyDown = useCallback(
       (e) => {
-        // issue: (https://github.com/barbalex/apf2/issues/710)
-        // setting nodeLabelFilter rerenders the component
-        // so focus has to be reset
-        // on mobile this makes the keyboard disappear and reappear
-        // thus better to filter on enter
-        setKeyPressed(e.key)
-        // on coarse pointer if enter is pressed, setNodeLabelFilter
         if (!isCoarsePointer) return
-
-        // const filterValue = nodeLabelFilter?.[activeFilterTable]
-        // if (filterValue !== value) return setNodeLabelFilter(value)
-
-        const doSet = e.key === 'Enter' || e.keyCode === 13
-        setDoSet(doSet)
-        if (!doSet) return
+        if (!e.key === 'Enter') return
 
         setNodeLabelFilter(value)
       },
@@ -124,9 +104,9 @@ export const FilterInput = memo(
     const onClickEmpty = useCallback(() => {
       setValue('')
       setNodeLabelFilter('')
-      // should the focus be set here?
+      // should the focus be set here? No, hideous on mobile
       // setTimeout(() => inputRef?.current?.focus?.(), 0)
-    }, [setNodeLabelFilter])
+    }, [setNodeLabelFilter, setValue])
 
     // if no activeFilterTable, show nothing
     if (!activeFilterTable) return null
@@ -135,7 +115,7 @@ export const FilterInput = memo(
       <Container show={filterInputIsVisible.toString()}>
         <StyledTextField
           inputRef={inputRef}
-          label={`Filter (value: ${value}, filter: ${filterValue}, valSNLF: ${valSNLF}, set: ${doSet})`}
+          label="Filter"
           variant="standard"
           fullWidth
           value={value}