Merge pull request #56 from deriv-com/shayan/fix-dropdown-console-error

fix: added forwardRef to Input component
deriv-com · Feb 2, 2024 · 5733cb8 · 5733cb8
2 parents 56d3619 + cc85c54
commit 5733cb8
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 26 deletions.
diff --git a/lib/components/Input/index.tsx b/lib/components/Input/index.tsx
@@ -1,4 +1,4 @@
-import React, { ComponentProps, ReactNode } from "react";
+import React, { ComponentProps, ReactNode, Ref, forwardRef } from "react";
 import clsx from "clsx";
 import HelperMessage from "./HelperMessage";
 import "./Input.scss";
@@ -34,7 +34,7 @@ const LabelVariant: Record<InputVariants, string> = {
   disabled: "deriv-input__label--disabled",
 };
 
-export const Input = ({
+export const Input = forwardRef(({
   label,
   id,
   error,
@@ -45,7 +45,8 @@ export const Input = ({
   className,
   disabled,
   ...rest
-}: InputProps) => {
+}: InputProps,
+  ref: Ref<HTMLInputElement>) => {
   return (
     <div
       className={clsx(
@@ -65,6 +66,7 @@ export const Input = ({
         className="deriv-input__field"
         id={id}
         disabled={disabled}
+        ref={ref}
         {...rest}
       />
       <label
@@ -94,4 +96,4 @@ export const Input = ({
       </div>
     </div>
   );
-};
+});
diff --git a/src/main.tsx b/src/main.tsx
@@ -4,33 +4,26 @@ import { Loader } from '../dist/components/Loader';
 import { Button } from '../dist/components/Button';
 import { Text } from '../dist/components/Text';
 import { Tab, Tabs } from '../dist/components/Tabs';
-// import {PrimaryTab, PrimaryTabs} from '../dist/components/PrimaryTabs';
+import {Dropdown} from '../dist/components/Dropdown';
 import './style.scss'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <>
-      <Loader color='red' />
-      <Button> button </Button>
-      <Text color='blue' size='lg'>this is a Text</Text>
-
-      <Tabs variant='primary' activeTab='primary tab 2' onChange={(index)=>console.log(index)}  >
-        <Tab title='primary tab 1'>
-          test data for tab 1
-        </Tab>
-        <Tab title='primary tab 2'>
-          test data for tab 2
-        </Tab>
-      </Tabs>
-
-      <Tabs variant='secondary' activeTab='secondary tab 1'  >
-        <Tab title='secondary tab 1'>
-          test data for tab 1
-        </Tab>
-        <Tab title='secondary tab 2'>
-          test data for tab 2
-        </Tab>
-      </Tabs>
+      <Dropdown label='test'  variant='comboBox' list={[
+        {
+          text: 'Option 1',
+          value: 'option1'
+        },
+        {
+          text: 'Option 2',
+          value: 'option2'
+        },
+      ]}
+      dropdownIcon="down"
+      onSelect={(value) => console.log(value)}
+      name='test name'
+      />
     </>