From d638196b314ccdd1e9518077c21d37b6b05cf74f Mon Sep 17 00:00:00 2001
From: Markus Thielker <mail.markus.thielker@gmail.com>
Date: Sun, 17 Mar 2024 15:33:58 +0100
Subject: [PATCH] N-FIN-51: add button to clear auto complete input

---
 src/components/ui/auto-complete-input.tsx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/components/ui/auto-complete-input.tsx b/src/components/ui/auto-complete-input.tsx
index 1119e74..e6e3d46 100644
--- a/src/components/ui/auto-complete-input.tsx
+++ b/src/components/ui/auto-complete-input.tsx
@@ -3,6 +3,8 @@
 import * as React from 'react';
 import { useEffect, useState } from 'react';
 import { cn } from '@/lib/utils';
+import { X } from 'lucide-react';
+import { Button } from '@/components/ui/button';
 
 export interface AutoCompleteInputProps
     extends React.InputHTMLAttributes<HTMLInputElement> {
@@ -80,6 +82,20 @@ const AutoCompleteInput = React.forwardRef<HTMLInputElement, AutoCompleteInputPr
                         props.onKeyDown?.(e);
                     }}
                 />
+                {
+                    value.length > 0 && (
+                        <Button
+                            className="absolute end-0 top-0 z-10"
+                            size="icon"
+                            variant="ghost"
+                            onClick={() => {
+                                handleChange({target: {value: ''}} as any);
+                            }}
+                        >
+                            <X className="h-4 w-4"/>
+                        </Button>
+                    )
+                }
                 {
                     open && (
                         <div