Skip to content

Autocomplete 'children' function continuously invoked #1329

@g00glen00b

Description

@g00glen00b

Let's say we use the basic example from the documentation, and add a console.log() statement, eg.:

<Autocomplete
  title="Fruits"
  onChange={changedItem => console.log(changedItem)}
  items={['Apple', 'Apricot', 'Banana', 'Cherry', 'Cucumber']}
>
  {props => {
   console.log('test'); // Add this
    const { getInputProps, getRef, inputValue } = props
    return (
      <TextInput
        placeholder="Fruits"
        value={inputValue}
        ref={getRef}
        {...getInputProps()}
      />
    )
  }}
</Autocomplete>

If you open up a browser, nothing spectacular will happen, even focusing/unfocusing the field won't make a difference. However, when you change the input value, the children function is continuously being called (as seen by the console.log() being called the whole time). This causes high CPU usage.

Is this intended behaviour?

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions