SelectMultiple missing prop to clear or set the search string to the empty string after selecting some button

[nikolablagunovski-hpe]

Hi everyone,

I'm using the SelectMultiple component for filtering results purposes, I'm calling the Search bar with onSearch prop.
I'm facing a problem when I type in a search and have shown one wanted result, select it, component refreshes, and all results appear back, but the search string still remains in the search bar.
Is there a way to change that behavior, I would expect that search string to be cleared since all the results appeared back.

For the summary:
We must refresh the values inside the SelectMultiple component after each selection because the rest of the data in the results and the values in the other filters are being filtered depending on the selected field inside the SelectMultiple.

Actual Behavior:
For example, if we have a filter named ''Categories" which has listed "Document", "Forums" and "Videos" values that can be selected in order to filter results, and if I type in the search label "Document" and have returned and selected it, the list of these values is listed again like so "Category", "Document", "Forums" and in search label the input remained search input "Document" which does not make so much sense to me.

`const Facet = ({ controller, title, enableSearch }) => {
const { t } = useTranslation(['support_hub_search', 'location'])
const [options, setOptions] = useState(
controller.state.values.map((value) => value.value)
)

useEffect(() => {
const unsubscribe = controller.subscribe(() => {
setOptions(controller.state.values.map((value) => value.value))
})

return () => {
  unsubscribe()
}

}, [controller])

if (
!controller.state.values.filter(
(value) => value.state !== 'idle' || value.numberOfResults > 0
).length
) {
return null
}

const handleFacetValuesChange = (nextValues) => {
const valuesToDeselect = []
const valuesToSelect = []

controller.state.values.forEach((facetValue) => {
  if (
    !nextValues.includes(facetValue.value) &&
    controller.isValueSelected(facetValue)
  ) {
    valuesToDeselect.push(facetValue)
  } else if (
    nextValues.includes(facetValue.value) &&
    !controller.isValueSelected(facetValue)
  ) {
    valuesToSelect.push(facetValue)
  }
})

valuesToDeselect.forEach((facetValue) => {
  controller.toggleSelect(facetValue)
})

valuesToSelect.forEach((facetValue) => {
  controller.toggleSelect(facetValue)
})

}

return (

<FormField
htmlFor={facetCheckbox-${title}}
label={t(title)}
data-testid={title}
>
<SelectMultiple
id={${title}}
name={facetCheckbox-${title}}
placeholder={t('location:select')}
searchPlaceholder={t('support_hub_search:facet_search_placeholder')}
data-testid="facet-checkbox"
dropHeight="medium"
labelKey={(option) => {
const valueObject = controller.state.values.find(
(val) => val.value === option
)
const translationKey = valueObject
? ${controller.state.facetId}.${valueObject.value}
: ${controller.state.facetId}.${option}

        const translatedValue = t(translationKey)

        return translatedValue !== translationKey ? translatedValue : option
      }}
      options={options}
      value={controller.state.values
        .filter((facetValue) => controller.isValueSelected(facetValue))
        .map((facetValue) => facetValue.value)}
      onChange={({ value: nextValues }) => {
        handleFacetValuesChange(nextValues)
      }}
      onSearch={
        enableSearch
          ? (text) => {
              const escapedText = text.replace(
                /[-\\^$*+?.()|[\]{}]/g,
                '\\$&'
              )
              const exp = new RegExp(escapedText, 'i')
              setOptions(
                controller.state.values
                  .filter((value) =>
                    exp.test(
                      t(`${controller.state.facetId}.${value.value}`)
                    )
                  )
                  .map((value) => value.value)
              )
            }
          : undefined
      }
      onClose={() => {
        setOptions(controller.state.values.map((value) => value.value))
      }}
    />
  </FormField>
</Form>

)
}`

• Grommet version: ^2.33.2
• Browser Name and version: Brave 1.62.156
• Operating System and version (desktop or mobile): Windows 11/Desktop

CC: @taysea