[combobox] Uncaught type errors are thrown

[mpayson]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

Calcite combobox throws type errors in the console logs

Expected Behavior

No uncaught type errors

Reproduction Sample

https://github.com/mpayson/calcite-debug

Reproduction Steps

1. Clone the reproduction sample above and checkout the branch combobox-repo
2. Run the app with developer console open
3. Click the "Toggle" button
4. See uncaught error in console

In the reproduction case, the type error is:

TypeError: this.textInput is null
documentClickHandler combobox.tsx:357
hostListenerProxy index.js:2622
ael index.js:2878
addHostEventListeners index.js:2608
addHostEventListeners index.js:2604
registerHost index.js:2808
__registerHost index.js:2358
Combobox2 @esri_calcite-components_dist_components_calcite-combobox.js:3389
React 13
onClick main.jsx:18
React 23
main.jsx:29

In our app, this is the type error, it happens for comboboxes across our app

TypeError: Cannot read properties of null (reading 'value')
at Combobox2.documentClickHandler (combobox.tsx:357:51)
at HTMLDocument. (index.js:2622:39) undefined

Additional notes:

• Rendering just the combobox as the app root does not reproduce the issue, it seems like it is related to comboboxes being rendered at some point within the app

Reproduction Version

2.8.0

Relevant Info

No response

Regression?

No response

Priority impact

p1 - need for current milestone

Impact

No response

Calcite package

• @esri/calcite-components
• @esri/calcite-components-angular
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Online

[jcfranco]

Dug a bit and this is caused by this line. It seems the window click listener is set up and triggered before the component is rendered.

In terms of workaround, you could toggle the component's hidden property vs recreating it:

{(
        <CalciteCombobox hidden={!show}>
          <CalciteComboboxItem value="1" textLabel="One" />
          <CalciteComboboxItem value="2" textLabel="Two" />
        </CalciteCombobox>
      )}

or setting allowCustomValues to true to bypass the error-throwing check and restoring the default after it's created (⚠️quick workaround, needs fine-tuning to follow React best practices⚠️):

function App() {
  const [show, setShow] = useState(false);
  const [workaround, setWorkaround] = useState(true);
  return (
    <>
      <button onClick={() => setShow(!show)}>Toggle</button>
      {show && (
        <CalciteCombobox allowCustomValues={workaround} ref={() =>
          requestAnimationFrame(() => setWorkaround(undefined))}>
          <CalciteComboboxItem value="1" textLabel="One" />
          <CalciteComboboxItem value="2" textLabel="Two" />
        </CalciteCombobox>
      )}
    </>
  );
}

[github-actions]

Installed and assigned for verification.

[github-actions]

Installed and assigned for verification.