Combobox error on switching between controller/uncontrolled input

[yannieyip]

We discovered a potential bug on combobox when we tested the component with the following snippet (Search is a combobox). In the initial case, the input (query string) is an empty string.

   const [query, setQuery] = useState("");
   return (
     <Search
       query={query}
       searchResults={defaultResults}
       onChange={(newValue: string) => setQuery(newValue)}
     />
   );
};

The display still works, but with the following console error
downshift: A component has changed the uncontrolled prop "inputValue" to be controlled. This prop should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled Downshift element for the lifetime of the component. More info: https://github.com/downshift-js/downshift#control-props

It seems like the downshift component in Combobox doesn't like when we flip from an uncontrolled to a controlled input. Or perhaps there is something wrong with our implementation?

[kate-porter]

Hey @yannieyip - I'm forwarding this question along to our eng team, so we'll get back to you soon!

[TheSisb]

Hey @yannieyip,

React components like Combobox require developers to do use controlled or uncontrolled components, and complains if you swap between approaches.

• Controlled means you're passing the current value and some onChange function. You keep the current value held in some app state by yourself.
• Uncontrolled means you're letting the component manage the current value state.

Based on the error changed the uncontrolled prop "inputValue" to be controlled. and seeing that you're specifying an onChange, I think you may have forgotten to pass the inputValue in your default Search implementation. Make sure that prop is passed with an initial state.

I would need to see the full code for the Search component to give a definite answer, but that's my hunch! Report back with your findings :)

[yannieyip]

Hi @TheSisb - thank you for looking into this! I do have inputValue set on the Search component, though I'm not sure if I'm doing it correctly. This is the Search component code:

const Search = ({ query, searchResults, onChange }: SearchType) => {
  return (
    <>
      <Box width="size30" margin="space50">
        <Combobox
          autocomplete
          labelText=""
          insertBefore={<IconLoader icon="SearchIcon" decorative />}
          placeholder="Jump to..."
          onInputValueChange={({ inputValue }) => {
            onChange(inputValue);
          }}
          groupItemsBy="product"
          groupLabelTemplate={(productName) => titleCase(productName)}
          inputValue={query ? query : ""}
          items={searchResults}
          optionTemplate={(item: any) => {
            return searchResults.loading ? (
              <Box marginBottom="space100">
                <Loading />
              </Box>
            ) : searchResults.data && searchResults.data.length > 0 ? (
              <Anchor data-testid={item.name} href={item.url}>
                {item.name}
              </Anchor>
            ) : !!query ? (
              <Box>
                <img src={"./search-empty-results.png"} width={234} height={132}/>
                <Text data-testid="empty-text" as="p" textAlign="center" marginTop="space30">
                  No results matching "{query}". <br />
                  <strong>Need help?</strong> Check out our{" "}
                  <Anchor href={"www.twilio.com/docs"}>documentation</Anchor>.
                </Text>
              </Box>
            ) : (
              <Box>
                <img src={"./search-default-view.png"} width={234} height={218} />
                <Text data-testid="default-text" as="p" textAlign="center" marginTop="space30">
                  Search within your Console account or our documentation and help
                  center.
                </Text>
              </Box>
            );
          }}
        />
      </Box>
    </>
  );
};

[hharnisc]

Jumping in here's a link to the current search implementation, Which always passes the query down to the ComboBox: https://code.hq.twilio.com/twilio/console/blob/main/src/shell/ConsoleNavigation/Masthead/components/Search/index.tsx#L36

The above code snippet with useState can still reproduce the issue.

I think the issue is that an empty string is treated as an uncontrolled input. Typing in the input switches to controlled input, clearing the box (empty string) switches it back to an uncontrolled input.

[SiTaggart]

Thanks for the up to date code example.

For future reference Codesandbox runs in Dev mode so it's easily reproducible there for us. https://codesandbox.io/s/controlled-combobox-repro-xhjqs?file=/src/index.tsx

Seems an update to Downshift changed their API slightly.

Thanks for the report, we'll get it updated pretty quickly

[SiTaggart]

Correction, just my dodgy logic 😉

[SiTaggart]

Fix is out. Hopefully that resolves the issue

[hharnisc]

Thank you @SiTaggart 🙌

[SiTaggart]

Though, having said that, you might be better off going all in on controlling state with the useCombobox hook https://paste.twilio.design/components/combobox#usecombobox-state-hook