AutoComplete does not work if added as part of a functional component to Form (e.g. within Steps)

[gregholst]

Reproduction link

Steps to reproduce

1. create a Modal
2. create a Form within the Modal
3. add to the Form with a functional component that includes an AutoComplete field

What is expected?

When typing letters into the AutoComplete field, a list of options as a dropdown is expected

What is actually happening?

No options are displayed

Environment	Info
antd	5.0.5
React	react 18
System	MacOS Monterey
Browser	newest Chrome / Firefox

---

This problem occurs only when adding to the Form as a functional component. This scenario occurred for me within a multi-step form as part of a modal. When using Steps as shown within antd documentation contents of the steps is added to a list, e.g. shown here https://ant.design/components/steps#components-steps-demo-step-next So in order to create the multi step form several of these functional components would be added to the list.

Maybe related #27115 (#27115)

Please excuse if adding functional components within a functional component like shown in the codebox is an anti-pattern. I could not find evidence for this. Maybe it would also be an interesting example for documentation of the Steps component as multi step Form seems to be a common use case.

[gregholst]

"So in order to create the multi step form several of these functional components would be added to the list."

This is an example of a multi-step form with such functional components, but without AutoComplete, to make my setup clearer: https://codesandbox.io/s/cool-mcnulty-or8jw?file=/src/MyStepForm.js

[YinDongFang]

You defined LocationForm as a function component in render phase of App component. So it will render a new LocationForm component (without any internal state) every time of render phase.

solution:

1. move definition of LocationForm out of App
2. use {LocationForm()} instead of <LocationForm />

[gregholst]

@YinDongFang You are right, it is not a bug, but my fault. Thanks for explaining. I would still be interested why you recommended step 2? It seems to work also with the style: https://codesandbox.io/s/antd-reproduction-template-forked-m8zimd?file=/index.js

[afc163]

https://ant.design/components/form#components-form-demo-customized-form-controls

https://ant.design/components/form#form

[afc163]

https://codesandbox.io/s/antd-reproduction-template-forked-ubnue0

[afc163]

You should pass value and onChange to AutoComplete.

[YinDongFang]

@YinDongFang You are right, it is not a bug, but my fault. Thanks for explaining. I would still be interested why you recommended step 2? It seems to work also with the style: https://codesandbox.io/s/antd-reproduction-template-forked-m8zimd?file=/index.js

sorry. It's not two steps but two ways to resolve your problem.