From 92a4ecb2f62cd8f4bb9a39b43faf2aef6f06c2de Mon Sep 17 00:00:00 2001
From: WaqasQx <161662074+WaqasQx@users.noreply.github.com>
Date: Thu, 7 Nov 2024 17:06:07 +0500
Subject: [PATCH 1/2] Add Serach Input on select.component.tsx

---
 src/components/ui/select/select.component.tsx | 51 ++++++++++++++++++-
 1 file changed, 49 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/select/select.component.tsx b/src/components/ui/select/select.component.tsx
index 51a26a17e..e77e5ebcd 100644
--- a/src/components/ui/select/select.component.tsx
+++ b/src/components/ui/select/select.component.tsx
@@ -18,6 +18,7 @@ import {
   TextStyle,
   View,
   ViewProps,
+  TextInput ,
 } from 'react-native';
 import {
   ChildrenWithProps,
@@ -75,6 +76,8 @@ export type SelectElement = React.ReactElement<SelectProps>;
 
 interface State {
   listVisible: boolean;
+  searchQuery: '',
+  filteredOptions: [],
 }
 
 const CHEVRON_DEG_COLLAPSED = -180;
@@ -228,9 +231,16 @@ export class Select extends React.Component<SelectProps, State> {
     return this.props.multiSelect;
   }
 
-  private get data(): Array<Exclude<ReactNode, boolean | null | undefined>> {
-    return React.Children.toArray(this.props.children || []);
+ private get data(): Array<Exclude<ReactNode, boolean | null | undefined>> {
+  const options = React.Children.toArray(this.props.children || []);
+  if (this.state.searchQuery) {
+    return options.filter((option) =>
+      option.toString().toLowerCase().includes(this.state.searchQuery.toLowerCase())
+    );
   }
+  return options;
+}
+
 
   private get selectedIndices(): IndexPath[] {
     if (!this.props.selectedIndex) {
@@ -258,9 +268,25 @@ export class Select extends React.Component<SelectProps, State> {
     return this.state.listVisible;
   };
 
+
+  public onSearch = (): void => {
+    const { searchQuery, options } = this.state;
+    const filteredOptions = options.filter(option =>
+      option.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+    this.setState({ filteredOptions });
+  };
+
+  public handleSearch = (query: string): void => {
+    this.setState({ searchQuery: query }, this.onSearch);
+  };
+  
   public clear = (): void => {
     this.props.onSelect?.(null);
   };
+  public handleSearch = (query: string): void => {
+  this.setState({ searchQuery: query });
+};
 
   private onMouseEnter = (event: NativeSyntheticEvent<TargetedEvent>): void => {
     this.props.eva.dispatch([Interaction.HOVER]);
@@ -304,6 +330,7 @@ export class Select extends React.Component<SelectProps, State> {
       this.props.onFocus?.(null);
     });
   };
+  
 
   private onListInvisible = (): void => {
     this.props.eva.dispatch([]);
@@ -473,6 +500,20 @@ export class Select extends React.Component<SelectProps, State> {
     );
   };
 
+private renderSearchInput = (): React.ReactElement => {
+  return (
+    <TextInput
+      style={styles.searchInput}
+      placeholder="Search..."
+      value={this.state.searchQuery}
+      onChangeText={this.handleSearch}
+    />
+  );
+};
+
+
+
+  
   public render(): React.ReactElement<ViewProps> {
     const { eva, style, label, caption, children, ...touchableProps } = this.props;
     const evaStyle = this.getComponentStyle(eva.style);
@@ -490,6 +531,7 @@ export class Select extends React.Component<SelectProps, State> {
           anchor={() => this.renderInputElement(touchableProps, evaStyle)}
           onBackdropPress={this.onBackdropPress}
         >
+          {this.renderSearchInput()}
           <List
             style={styles.list}
             data={this.data}
@@ -528,4 +570,9 @@ const styles = StyleSheet.create({
   caption: {
     textAlign: 'left',
   },
+    searchInput: {
+    padding: 10,
+    borderBottomWidth: 1,
+    borderBottomColor: '#e0e0e0',
+  },
 });

From 2a5464ae014388196470d4fd9154ecbbc883d98c Mon Sep 17 00:00:00 2001
From: WaqasQx <161662074+WaqasQx@users.noreply.github.com>
Date: Thu, 7 Nov 2024 20:34:30 +0000
Subject: [PATCH 2/2] Bugs: Fixed Type and Duplicate Search

---
 src/components/ui/select/select.component.tsx | 79 ++++++++++---------
 1 file changed, 41 insertions(+), 38 deletions(-)

diff --git a/src/components/ui/select/select.component.tsx b/src/components/ui/select/select.component.tsx
index e77e5ebcd..78f9801d2 100644
--- a/src/components/ui/select/select.component.tsx
+++ b/src/components/ui/select/select.component.tsx
@@ -18,7 +18,7 @@ import {
   TextStyle,
   View,
   ViewProps,
-  TextInput ,
+  TextInput,
 } from 'react-native';
 import {
   ChildrenWithProps,
@@ -76,8 +76,8 @@ export type SelectElement = React.ReactElement<SelectProps>;
 
 interface State {
   listVisible: boolean;
-  searchQuery: '',
-  filteredOptions: [],
+  searchQuery: string;
+  filteredOptions: string[];
 }
 
 const CHEVRON_DEG_COLLAPSED = -180;
@@ -222,6 +222,8 @@ export class Select extends React.Component<SelectProps, State> {
 
   public state: State = {
     listVisible: false,
+    searchQuery: '',
+    filteredOptions: []
   };
 
   private service: SelectService = new SelectService();
@@ -231,15 +233,15 @@ export class Select extends React.Component<SelectProps, State> {
     return this.props.multiSelect;
   }
 
- private get data(): Array<Exclude<ReactNode, boolean | null | undefined>> {
-  const options = React.Children.toArray(this.props.children || []);
-  if (this.state.searchQuery) {
-    return options.filter((option) =>
-      option.toString().toLowerCase().includes(this.state.searchQuery.toLowerCase())
-    );
+  private get data(): Array<Exclude<ReactNode, boolean | null | undefined>> {
+    const options = React.Children.toArray(this.props.children || []);
+    if (this.state.searchQuery) {
+      return options.filter((option) =>
+        option.toString().toLowerCase().includes(this.state.searchQuery.toLowerCase())
+      );
+    }
+    return options;
   }
-  return options;
-}
 
 
   private get selectedIndices(): IndexPath[] {
@@ -270,23 +272,22 @@ export class Select extends React.Component<SelectProps, State> {
 
 
   public onSearch = (): void => {
-    const { searchQuery, options } = this.state;
-    const filteredOptions = options.filter(option =>
+    const { searchQuery, filteredOptions } = this.state;
+    const filtered = filteredOptions.filter((option: string) =>
       option.toLowerCase().includes(searchQuery.toLowerCase())
     );
-    this.setState({ filteredOptions });
+    this.setState({ filteredOptions: filtered });
   };
 
+
   public handleSearch = (query: string): void => {
     this.setState({ searchQuery: query }, this.onSearch);
   };
-  
+
   public clear = (): void => {
     this.props.onSelect?.(null);
   };
-  public handleSearch = (query: string): void => {
-  this.setState({ searchQuery: query });
-};
+
 
   private onMouseEnter = (event: NativeSyntheticEvent<TargetedEvent>): void => {
     this.props.eva.dispatch([Interaction.HOVER]);
@@ -330,7 +331,7 @@ export class Select extends React.Component<SelectProps, State> {
       this.props.onFocus?.(null);
     });
   };
-  
+
 
   private onListInvisible = (): void => {
     this.props.eva.dispatch([]);
@@ -500,20 +501,20 @@ export class Select extends React.Component<SelectProps, State> {
     );
   };
 
-private renderSearchInput = (): React.ReactElement => {
-  return (
-    <TextInput
-      style={styles.searchInput}
-      placeholder="Search..."
-      value={this.state.searchQuery}
-      onChangeText={this.handleSearch}
-    />
-  );
-};
+  private renderSearchInput = (): React.ReactElement => {
+    return (
+      <TextInput
+        style={styles.searchInput}
+        placeholder="Search..."
+        value={this.state.searchQuery}
+        onChangeText={this.handleSearch}
+      />
+    );
+  };
+
 
 
 
-  
   public render(): React.ReactElement<ViewProps> {
     const { eva, style, label, caption, children, ...touchableProps } = this.props;
     const evaStyle = this.getComponentStyle(eva.style);
@@ -531,13 +532,15 @@ private renderSearchInput = (): React.ReactElement => {
           anchor={() => this.renderInputElement(touchableProps, evaStyle)}
           onBackdropPress={this.onBackdropPress}
         >
-          {this.renderSearchInput()}
-          <List
-            style={styles.list}
-            data={this.data}
-            bounces={false}
-            renderItem={this.renderItem}
-          />
+          <>
+            {this.renderSearchInput()}
+            <List
+              style={styles.list}
+              data={this.data}
+              bounces={false}
+              renderItem={this.renderItem}
+            />
+          </>
         </Popover>
         <FalsyText
           style={[styles.caption, evaStyle.caption]}
@@ -570,7 +573,7 @@ const styles = StyleSheet.create({
   caption: {
     textAlign: 'left',
   },
-    searchInput: {
+  searchInput: {
     padding: 10,
     borderBottomWidth: 1,
     borderBottomColor: '#e0e0e0',