[Bug]: Autocomplete in navigation add item causes dashboard to crash

[pawelromanskidajar]

Description of the issue

When I want to add a Page to my navigation menu and search for a page I want to add, the dashboard crashes with error:

vendor.ac27f009.js:33049 TypeError: Cannot read properties of undefined (reading 'children')
    at children (index.945cdf32.js:83671:75)
    at Downshift2.render (vendor.ac27f009.js:49275:35)
    at qi$1 (vendor.ac27f009.js:32439:80)
    at pi$4 (vendor.ac27f009.js:32430:10)
    at ck (vendor.ac27f009.js:34497:98)
    at bk (vendor.ac27f009.js:33974:12)
    at ak (vendor.ac27f009.js:33967:5)
    at Tj (vendor.ac27f009.js:33950:7)
    at Lj (vendor.ac27f009.js:33718:28)
    at vendor.ac27f009.js:31152:18

Which is related to this:

(menuPath2.length ? getMenuItemByPath(options2, menuPath2).children : options2).map((suggestion, index2) => {
                  var _a;
                  return /* @__PURE__ */ jsxRuntime.exports.jsx(MenuItem$1, {
                    "data-test-id": !!testIds ? testIds[index2] : "",
                    component: "div",
                    ...getItemProps({ item: (_a = suggestion.value) != null ? _a : "" }),
                    onClick: () => suggestion.value ? selectItem(suggestion.value) : setMenuPath([...menuPath2, index2]),
                    children: suggestion.label
                  }, `${suggestion.value}:${index2}`);
                })

I guess this is here in the codebase:

saleor-dashboard/src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx

Line 143 in 9c5e786

? getMenuItemByPath(options, menuPath).children

Steps to reproduce the problem

• Create a menu
• Set any title
• Create new item
• Select Link -> Pages
• Type random combination of letters

You should see "We’ve encountered an unexpected error. Try to refresh the page or go navigate to a different page and back."

What did you expect to happen?

Show pages matching search pattern

Additional information

No response

Environment

Browser and version: Chrome
OS and version: Windows
Dashboard version: 3.19.6
Core version: 3.19.30

[pawelromanskidajar]

I have implemented for myself a hotfix that fixes the issue (basically added two ? to handle nulls):

{(menuPath.length
    ? getMenuItemByPath(options, menuPath)?.children
    : options
  )?.map((suggestion, index) => (
    <MenuItem
      data-test-id={testIds ? testIds[index] : ""}
      key={`${suggestion.value}:${index}`}
      component="div"
      {...getItemProps({ item: suggestion.value ?? "" })}
      onClick={() =>
        suggestion.value
          ? selectItem(suggestion.value)
          : setMenuPath([...menuPath, index])
      }
    >
      {suggestion.label}
    </MenuItem>
  ))}

Still it would be great, if there was more capability for finding pages when adding to menu. Like filtering by page type. I imagine that it would get painful if someone had many pages (painful to find the right one with just a title and full word search).