useComboBox does network request on selection change

[isshesure]

Using useComboBox with async results, a network request occurs when you select an item, with the selected item as the filter text.

For example the official async sample shows the behaviour - if you enter text and then select a result, there will be a network request to https://swapi.dev/api/people/?search=.... Is there a way to avoid this unnecessary request?

[LFDanLu]

IMO this is expected behavior so that the ComboBox can get the list of results that matches the newly selected text. For example, a slightly contrived example:

1. You have a list of names in a database in which there exists "Bob", "Bob Jr", and "Bob Sr".
2. The user types "B" in the ComboBox, sees "Bob" and selects it
3. The text in the ComboBox updates, prompting a network request that fetches all names w/ "Bob" as a substring
4. If the user opens the ComboBox manually, they will see a properly filtered list of names. Without the network request in step 3 being fired from the option selection in step 2, that list would be unfiltered and you would see all names that contain "B"

If you really need to avoid the network request from being sent when you make a selection change, you can try tracking/setting a flag in onSelectionChange that you would use in your useAsyncList load function

super rough example (untested):

let skipFetch = React.useRef(false)
let onSelectionChange = (key) => {
  // SELECTION RELATED CODE
 ...
  skipFetch.current = true;
}

let onInputChange = (value) => {
    // INPUT CHANGE RELATED CODE
   ...
   skipFetch.current = false;
}

let list = useAsyncList({
    async load({signal, cursor, filterText, items}) {
      if (skipFetch.current) {
         // Skip the fetch and return the same items + cursor
         return {
            items: items,
            cursor: cursor
         };
      }
      ....
    }
  });

[isshesure]

thanks, this works well for comboboxes with no manual dropdown open, such as the sample linked