Amplify Studio - Data Manager Autocomplete field doesn't load all searchable data

[loe-lobo]

Before opening, please confirm:

• [X] I have searched for duplicate or closed issues.
• [X] I have read the guide for submitting bug reports.
• [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.
• [X] I have removed any sensitive information from my code snippets and submission.

App Id

d1thx85qzidq63

Region

sa-east-1

Environment name

dev

Figma File Version (if applicable)

No response

Amplify CLI Version

12.10.0

If applicable, what version of Node.js are you using?

v18.17.1

What operating system are you using?

Mac

Browser type?

Google Chrome

Describe the bug

Autocomplete field isn't loading all the data from DynamoDB (AppSync API).

When searching for BB the result box should show 23 results, but it only shows 1. I can see that the first query executed has a NextToken populated, but the UI isn't looping through the results to load all matching items from DB.

Expected behavior

When searching for an Item on Autocomplete in Data Manager, I would expect to get all results that match the filter.

Reproduction steps

1. Create the following schema

type Portfolio @model
  @auth(
    rules: [
      { allow: private, provider: [iam] }
    ]
  ) {
  id: ID!
  name: String!
  tickers: [PortfolioTicker] @hasMany(indexName: "byPortfolio", fields: ["id"])
}

type PortfolioTicker @model
  @auth(
    rules: [
      { allow: private, provider: iam }
    ]
  ) {
  portfolioId: ID! @primaryKey(sortKeyFields: ["symbol"]) @index(name: "byPortfolio")
  portfolio: Portfolio @belongsTo(fields: ["portfolioId"])
  symbol: String! @index(name: "byTicker")
  ticker: Ticker @belongsTo(fields: ["symbol"])
  entryDate: AWSDateTime!
}

type Ticker @model
  @auth(
    rules: [
      { allow: private, provider: iam }
    ]
  ) {
  symbol: String! @primaryKey
  name: String
  portfolioTickers: [PortfolioTicker] @hasMany(indexName: "byTicker", fields: ["symbol"])
}

2. Populate Ticker with more than 50 items (you can retrieve a list of Tickers here: Tickers; the stocks property will give you enough to start.
3. Open Amplify Studio and go to Data Manager
4. Create a new Portfolio without adding any Tickers
5. Change the type to PortfolioTicker
6. Click on Create new PortfolioTicker
7. Search for BB on the ticker autocomplete field.

The expected result should contain many instances of tickers with BB, but it doesn't show them all.

Project Identifier

8893b0f513340872ef0f1d36b5e0b90a

Additional information

No response

[loe-lobo]

I believe I've found the culprit, if Amplify Studio uses the autogenerated Autocomplete from Amplify-UI. This is the code generated by Amplify-UI (Figma-to-code) for a autocomplete field:

  const fetchTickerRecords = async (value) => {
    setTickerLoading(true);
    const newOptions = [];
    let newNext = "";
    while (newOptions.length < autocompleteLength && newNext != null) {
      const variables = {
        limit: autocompleteLength * 5,
        filter: {
          or: [{ name: { contains: value } }, { symbol: { contains: value } }],
        },
      };
      if (newNext) {
        variables["nextToken"] = newNext;
      }
      const result = (
        await client.graphql({
          query: listTickers.replaceAll("__typename", ""),
          variables,
        })
      )?.data?.listTickers?.items;
      var loaded = result.filter(
        (item) => !tickerIdSet.has(getIDValue.ticker?.(item))
      );
      newOptions.push(...loaded);
      newNext = result.nextToken;
    }
    setTickerRecords(newOptions.slice(0, autocompleteLength));
    setTickerLoading(false);
  };

The problem here is that result.nextToken doesn't exist. The nextToken property is outside of the items list.

[ykethan]

I was able to reproduce the issue, marking as bug.