feat(auto-complete): add forwardRef for input element (#542)

* feat(auto-complete): add forwardRef for input element * test(auto-complete): add testcase to ensure ref is available * docs(auto-complete): append props for ref
geist-org · May 24, 2021 · 622de49 · 622de49
1 parent a9bd28e
commit 622de49
Show file tree

Hide file tree

Showing 6 changed files with 223 additions and 194 deletions.
diff --git a/components/auto-complete/__tests__/__snapshots__/index.test.tsx.snap b/components/auto-complete/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AutoComplete should render correctly 1`] = `
-<AutoComplete
+<ForwardRef
   className=""
   clearable={false}
   disableFreeSolo={false}

diff --git a/components/auto-complete/__tests__/__snapshots__/search.test.tsx.snap b/components/auto-complete/__tests__/__snapshots__/search.test.tsx.snap
@@ -370,16 +370,16 @@ initialize {
           "children": Array [
             Node {
               "data": "
-          .auto-complete {
-            width: max-content;
-          }
-
-          .auto-complete :global(.loading) {
-            left: -3px;
-            right: -3px;
-            width: max-content;
-          }
-        ",
+            .auto-complete {
+              width: max-content;
+            }
+
+            .auto-complete :global(.loading) {
+              left: -3px;
+              right: -3px;
+              width: max-content;
+            }
+          ",
               "next": null,
               "parent": [Circular],
               "prev": null,
@@ -410,16 +410,16 @@ initialize {
         "children": Array [
           Node {
             "data": "
-          .auto-complete {
-            width: max-content;
-          }
-
-          .auto-complete :global(.loading) {
-            left: -3px;
-            right: -3px;
-            width: max-content;
-          }
-        ",
+            .auto-complete {
+              width: max-content;
+            }
+
+            .auto-complete :global(.loading) {
+              left: -3px;
+              right: -3px;
+              width: max-content;
+            }
+          ",
             "next": null,
             "parent": [Circular],
             "prev": null,
@@ -1205,16 +1205,16 @@ initialize {
           "children": Array [
             Node {
               "data": "
-          .auto-complete {
-            width: max-content;
-          }
-
-          .auto-complete :global(.loading) {
-            left: -3px;
-            right: -3px;
-            width: max-content;
-          }
-        ",
+            .auto-complete {
+              width: max-content;
+            }
+
+            .auto-complete :global(.loading) {
+              left: -3px;
+              right: -3px;
+              width: max-content;
+            }
+          ",
               "next": null,
               "parent": [Circular],
               "prev": null,
@@ -1245,16 +1245,16 @@ initialize {
         "children": Array [
           Node {
             "data": "
-          .auto-complete {
-            width: max-content;
-          }
-
-          .auto-complete :global(.loading) {
-            left: -3px;
-            right: -3px;
-            width: max-content;
-          }
-        ",
+            .auto-complete {
+              width: max-content;
+            }
+
+            .auto-complete :global(.loading) {
+              left: -3px;
+              right: -3px;
+              width: max-content;
+            }
+          ",
             "next": null,
             "parent": [Circular],
             "prev": null,

diff --git a/components/auto-complete/__tests__/index.test.tsx b/components/auto-complete/__tests__/index.test.tsx
@@ -56,4 +56,11 @@ describe('AutoComplete', () => {
 
     expect(wrapper.prop('width')).toEqual('200px')
   })
+
+  it('should forward ref by default', () => {
+    const ref = React.createRef<HTMLInputElement>()
+    const wrapper = mount(<AutoComplete ref={ref} />)
+    expect(ref.current).not.toBeNull()
+    expect(() => wrapper.unmount()).not.toThrow()
+  })
 })