<iman> fix bug select variant

1 files changed, 9 insertions, 3 deletions

diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx
index ec606423..d500ff6e 100644
--- a/src-migrate/modules/product-detail/components/Information.tsx
+++ b/src-migrate/modules/product-detail/components/Information.tsx
@@ -12,7 +12,7 @@ import { useEffect, useRef, useState } from 'react';
 
 import currencyFormat from '@/core/utils/currencyFormat';
 import { InputGroup, InputRightElement } from '@chakra-ui/react';
-import { ChevronDownIcon } from '@heroicons/react/24/outline';
+import { ChevronDownIcon, XMarkIcon } from '@heroicons/react/24/outline';
 import Image from 'next/image';
 import { formatToShortText } from '~/libs/formatNumber';
 import { createSlug } from '~/libs/slug';
@@ -35,7 +35,7 @@ const Information = ({ product }: Props) => {
   const [inputValue, setInputValue] = useState<string | null>(
     selectedVariant?.code + ' - ' + selectedVariant?.attributes[0]
   );
-
+  const [disableFilter, setDisableFilter] = useState<boolean>(false);
   const inputRef = useRef<HTMLInputElement>(null);
 
   const [variantOptions, setVariantOptions] = useState<any[]>(
@@ -85,6 +85,7 @@ const Information = ({ product }: Props) => {
   };
 
   const handleOnKeyUp = (e: any) => {
+    setDisableFilter(false);
     setInputValue(e.target.value);
   };
 
@@ -98,6 +99,7 @@ const Information = ({ product }: Props) => {
           </span>{' '}
         </label>
         <AutoComplete
+          disableFilter={disableFilter}
           openOnFocus
           className='form-input'
           onChange={(vals) => handleOnChange(vals)}
@@ -108,7 +110,11 @@ const Information = ({ product }: Props) => {
               value={inputValue as string}
               onChange={(e) => handleOnKeyUp(e)}
             />
-            <InputRightElement>
+            <InputRightElement className='mr-4'>
+              <XMarkIcon
+                className='h-6 w-6 text-gray-500'
+                onClick={() => setDisableFilter(true)}
+              />
               <ChevronDownIcon
                 className='h-6 w-6 text-gray-500'
                 onClick={() => inputRef?.current?.focus()}