feat: add handle filter tokens on blur (#1837)

feat: add tokens on blur

Signed-off-by: Adam Setch <[email protected]>

Author: setchy

src/renderer/components/filters/UserHandleFilter.tsx

@@ -48,6 +48,24 @@ export const UserHandleFilter: FC = () => {
     mapValuesToTokens(settings.filterIncludeHandles),
   );
 
+  const addIncludeHandlesToken = (
+    event:
+      | React.KeyboardEvent<HTMLInputElement>
+      | React.FocusEvent<HTMLInputElement>,
+  ) => {
+    const value = (event.target as HTMLInputElement).value.trim();
+
+    if (value.length > 0 && !includeHandles.some((v) => v.text === value)) {
+      setIncludeHandles([
+        ...includeHandles,
+        { id: includeHandles.length, text: value },
+      ]);
+      updateFilter('filterIncludeHandles', value as UserHandle, true);
+
+      (event.target as HTMLInputElement).value = '';
+    }
+  };
+
   const removeIncludeHandleToken = (tokenId: string | number) => {
     const value = includeHandles.find((v) => v.id === tokenId)?.text || '';
     updateFilter('filterIncludeHandles', value as UserHandle, false);
@@ -58,29 +76,33 @@ export const UserHandleFilter: FC = () => {
   const includeHandlesKeyDown = (
     event: React.KeyboardEvent<HTMLInputElement>,
   ) => {
-    const value = (event.target as HTMLInputElement).value.trim();
+    if (tokenEvents.includes(event.key)) {
+      addIncludeHandlesToken(event);
+    }
+  };
 
-    if (
-      tokenEvents.includes(event.key) &&
-      !includeHandles.some((v) => v.text === value) &&
-      value.length > 0
-    ) {
-      event.preventDefault();
+  const [excludeHandles, setExcludeHandles] = useState<InputToken[]>(
+    mapValuesToTokens(settings.filterExcludeHandles),
+  );
 
-      setIncludeHandles([
-        ...includeHandles,
-        { id: includeHandles.length, text: value },
+  const addExcludeHandlesToken = (
+    event:
+      | React.KeyboardEvent<HTMLInputElement>
+      | React.FocusEvent<HTMLInputElement>,
+  ) => {
+    const value = (event.target as HTMLInputElement).value.trim();
+
+    if (value.length > 0 && !excludeHandles.some((v) => v.text === value)) {
+      setExcludeHandles([
+        ...excludeHandles,
+        { id: excludeHandles.length, text: value },
       ]);
-      updateFilter('filterIncludeHandles', value as UserHandle, true);
+      updateFilter('filterExcludeHandles', value as UserHandle, true);
 
       (event.target as HTMLInputElement).value = '';
     }
   };
 
-  const [excludeHandles, setExcludeHandles] = useState<InputToken[]>(
-    mapValuesToTokens(settings.filterExcludeHandles),
-  );
-
   const removeExcludeHandleToken = (tokenId: string | number) => {
     const value = excludeHandles.find((v) => v.id === tokenId)?.text || '';
     updateFilter('filterExcludeHandles', value as UserHandle, false);
@@ -91,22 +113,8 @@ export const UserHandleFilter: FC = () => {
   const excludeHandlesKeyDown = (
     event: React.KeyboardEvent<HTMLInputElement>,
   ) => {
-    const value = (event.target as HTMLInputElement).value.trim();
-
-    if (
-      tokenEvents.includes(event.key) &&
-      !excludeHandles.some((v) => v.text === value) &&
-      value.length > 0
-    ) {
-      event.preventDefault();
-
-      setExcludeHandles([
-        ...excludeHandles,
-        { id: excludeHandles.length, text: value },
-      ]);
-      updateFilter('filterExcludeHandles', value as UserHandle, true);
-
-      (event.target as HTMLInputElement).value = '';
+    if (tokenEvents.includes(event.key)) {
+      addExcludeHandlesToken(event);
     }
   };
 
@@ -146,6 +154,7 @@ export const UserHandleFilter: FC = () => {
             tokens={includeHandles}
             onTokenRemove={removeIncludeHandleToken}
             onKeyDown={includeHandlesKeyDown}
+            onBlur={addIncludeHandlesToken}
             size="small"
             disabled={
               !settings.detailedNotifications ||
@@ -172,6 +181,7 @@ export const UserHandleFilter: FC = () => {
             tokens={excludeHandles}
             onTokenRemove={removeExcludeHandleToken}
             onKeyDown={excludeHandlesKeyDown}
+            onBlur={addExcludeHandlesToken}
             size="small"
             disabled={
               !settings.detailedNotifications ||