From 5f5f15b9f6d22241dd7ecf2e0feedd58832b8083 Mon Sep 17 00:00:00 2001
From: 0x1eef <0x1eef@protonmail.com>
Date: Thu, 25 Apr 2024 00:46:13 -0300
Subject: [PATCH] Add filter placeholder

---
 client/src/js/components/ProjectSelect.tsx |  9 +++++----
 client/src/js/components/Select.tsx        | 19 ++++++++++++++-----
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/client/src/js/components/ProjectSelect.tsx b/client/src/js/components/ProjectSelect.tsx
index b4d9320..b054b69 100644
--- a/client/src/js/components/ProjectSelect.tsx
+++ b/client/src/js/components/ProjectSelect.tsx
@@ -30,14 +30,15 @@ export function ProjectSelect({ onChange, selected }: Props) {
 
   return (
     <Select
+      options={options}
+      selected={String(selected)}
+      className="max-h-96 overflow-y-scroll overflow-x-none w-3/4"
+      placeholder="Any project"
+      filterPlaceholder="Filter by project"
       onChange={(option: Option) => {
         const project = projects.find(p => p.id == option.id);
         onChange(project);
       }}
-      options={options}
-      selected={String(selected)}
-      placeholder="Any project"
-      className="max-h-96 overflow-y-scroll overflow-x-none w-3/4"
     />
   );
   1;
diff --git a/client/src/js/components/Select.tsx b/client/src/js/components/Select.tsx
index 95b5d53..d0a30f9 100644
--- a/client/src/js/components/Select.tsx
+++ b/client/src/js/components/Select.tsx
@@ -25,6 +25,7 @@ type Props = {
   onChange: (o: Option) => void;
   placeholder: string;
   className?: string;
+  filterPlaceholder?: string;
   isFilterable?: boolean;
 };
 
@@ -40,6 +41,7 @@ export const Select = ({
   selected,
   placeholder,
   className,
+  filterPlaceholder = "Filter by text",
   isFilterable = true,
 }: Props) => {
   const selectOptions = [
@@ -82,7 +84,10 @@ export const Select = ({
     <ul className={className}>
       {isFilterable && isOpen && (
         <li className="flex">
-          <FilterInput onTextChange={text => setFilterText(text)} />
+          <Filter
+            placeholder={filterPlaceholder}
+            onTextChange={text => setFilterText(text)}
+          />
         </li>
       )}
       {selectOptions
@@ -108,11 +113,17 @@ export const Select = ({
   );
 };
 
-type FilterInputProps = { onTextChange: (text: string) => void };
-function FilterInput({ onTextChange }: FilterInputProps) {
+type FilterProps = {
+  onTextChange: (text: string) => void;
+  placeholder: string;
+};
+function Filter({ onTextChange, placeholder }: FilterProps) {
   return (
     <input
+      type="text"
       className="p-3 rounded border-secondary border-solid outline-none"
+      autoFocus={true}
+      placeholder={placeholder}
       onClick={e => e.stopPropagation()}
       onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
         const {
@@ -120,8 +131,6 @@ function FilterInput({ onTextChange }: FilterInputProps) {
         } = e;
         onTextChange(text);
       }}
-      type="text"
-      placeholder="Filter by text"
     />
   );
 }