Suggestions not working in Custom UI's JQL Editor

Forge Forge UI Kit and Custom UI
,
1

Hi,
I’m working on a feature in our app using JQL editor. Everything regarding the editor works fine. But when I tried to implement the autocomplete function based on the documentation, the suggestions is not working properly. Only the clauses like AND, OR, ORDER BY, EMPTY are shown when the query is inputted. Here is my implementation:

import { JQLEditorAsync as JQLEditor } from "@atlaskit/jql-editor";
import { useAutocompleteProvider } from "@atlaskit/jql-editor-autocomplete-rest";
import { useCallback } from "react";
import { requestJira } from "@forge/bridge";
const getInitialData = async (url) => {
  const res = await requestJira(url, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ includeCollapsedFields: true }),
  });

  const data = res.json();

  return {
    jqlFields: data.visibleFieldNames,
    jqlFunctions: data.visibleFunctionNames,
  };
};

const getSuggestions = async (url) => {
  const res = await requestJira(url);
  return res.json();
};

const JqlEditor = ({ jql, setJql, locale }) => {
  const autocompleteProvider = useAutocompleteProvider(
    "etj-jql-editor",
    getInitialData,
    getSuggestions
  );

  const onSearch = useCallback(
    (query, jast) => {
      console.log("JQL Search triggered:", query, jast);
      if (jast.errors.length === 0) {
        setJql(query);
      }
    },
    [setJql]
  );

  return (
    <JQLEditor
      analyticsSource={"etj-jql-editor"}
      query={jql}
      onSearch={onSearch}
      autocompleteProvider={autocompleteProvider}
      locale={locale}
      isCompact={true}
    />
  );
};

export default JqlEditor;

The version of the libraries and React:

"@atlaskit/jql-editor": "^5.9.0",
"@atlaskit/jql-editor-autocomplete-rest": "^3.0.2",

"react": "^18.2.0",
"react-dom": "^18.2.0",

Is there anything missing in the implementation? Or is the documentation outdated? I would appreciate any help provided.

Thanks in advanced!

EDIT: for anyone having the same problems as mine, just add await before json() method! Just notice it when I re-read the code. Don’t know why the example doesn’t include it, but I hope the development team update it.

1 Like