fix: Added hook to combobox for when options change

[werdnanoslen]

Summary

• added hook to combobox for when options change
• added test
• updated story to use this feature
• added veggies to food list and renamed file

Related Issues or PRs

Resolves #2182

How To Test

• Run new test
• See updated story

Screenshots (optional)

[werdnanoslen]

This may cause new behaviors, so might be a breaking change?

[brandonlenz]

This looks like it would clobber the filters in place if the user has already typed into the combo box. Haven't tested myself, but wanted to raise.

Combo box is tricky because it uses a reducer, in this case specifically the ActionTypes.UPDATE_FILTER handler

[brandonlenz]

react-uswds/src/components/forms/ComboBox/useComboBox.ts

Lines 108 to 138 in 5457bba

	case ActionTypes.UPDATE_FILTER: {
	const { closestMatch, optionsToDisplay } = getPotentialMatches(
	action.value
	)
	const newState = {
	...state,
	isOpen: true,
	filteredOptions: optionsToDisplay,
	inputValue: action.value,
	statusText: `${optionsToDisplay.length} result${
	optionsToDisplay.length > 1 ? 's' : ''
	} available.`,
	}
	if (optionsToDisplay.length < 1) {
	newState.statusText = 'No results.'
	}
	if (disableFiltering || !state.selectedOption) {
	newState.focusedOption = closestMatch
	} else if (state.selectedOption) {
	if (newState.filteredOptions.includes(state.selectedOption)) {
	newState.focusedOption = state.selectedOption
	} else {
	newState.focusedOption = closestMatch
	}
	}
	return newState
	}

[brandonlenz]

I suspect this useEffect should dispatch an event that both changes the options to filter from, and filters the list if the user has already typed into the combo box when the options change.

[werdnanoslen]

I don't think so... e.g. I added a little 'test' console log right above the dispatch:

react-uswds/src/components/forms/ComboBox/ComboBox.tsx

Lines 399 to 400 in 9ac7a45

	dispatch({ type: ActionTypes.UPDATE_FILTER, value: e.target.value })

And it doesn't seem to fire when the options change, just when the input is typed in:

[brandonlenz]

Finally got around to testing this. Its not what I expected (forgot that blurring the combobox clears user input, so less of a concern to filter the list based on what the user has already typed)

But we should probably at least clear the selected item, especially if the selection is not a possible choice after the options change:

[werdnanoslen]

I had the same thought, but left it off to preserve the simplicity of the example's focus even if impractical for actual use. Also, adding a ref-based clear on the radio change also prompts the options to change without needing the useEffect, but I figured that shouldn't be the ideal fix here. So I'll add the clear and keep the useEffect too.

[werdnanoslen]

[shkeating]

looks good to me!

[shkeating]

oop @brandonlenz i didn't realize this was still waiting on review from you 😳 i didn't know it would let me merge without code owners review