Repository: h2oai/wave
File: ui/src/picker.tsx (TypeScript)

Code before:
  const
    tags: Fluent.ITag[] = React.useMemo(() => m.choices.map(({ name, label }) => ({ key: name, name: label || name })), [m.choices]),
    [selectedTags, setSelectedTags] = React.useState<Fluent.ITag[]>(tags.filter(({ key }) => m.values?.includes(key as S))),
    filterSuggestedTags = (filterText: S, selectedTags?: Fluent.ITag[]) => {
      if (!filterText) return []
      const isStringMatch = (name: S) => name.toLowerCase().includes(filterText.toLowerCase())
      return tags.filter(t => isStringMatch(t.name) && !selectedTags?.includes(t))
    },
    onChange = (items?: Fluent.ITag[]) => {
      setSelectedTags(items || [])
      wave.args[m.name] = items ? items.map(({ key }) => key) : null
      if (m.trigger) wave.push()
    },
    onEmptyResolveSuggestions = () => tags.filter(tag => !selectedTags.includes(tag))

  React.useEffect(() => {
    wave.args[m.name] = m.values || null
    setSelectedTags(tags.filter(({ key }) => m.values?.includes(key as S)))
  }, [m.name, m.values, tags])

  return (
    <>
      {m.label && <Fluent.Label required={m.required}>{m.label}</Fluent.Label>}
      <Fluent.TagPicker
        inputProps={{ 'data-test': m.name } as Fluent.IInputProps}
        removeButtonIconProps={{ ...removeButtonIconProps, 'data-test' : 'remove_'+m.name } as Fluent.IIconProps}
        removeButtonAriaLabel="Remove"
        onResolveSuggestions={filterSuggestedTags}
        onChange={onChange}
        pickerSuggestionsProps={pickerSuggestionsProps}
        itemLimit={m.max_choices}
        selectedItems={selectedTags}
        disabled={m.disabled}
        onEmptyResolveSuggestions={onEmptyResolveSuggestions}
      />
    </>
  )
}

Review comment (suggestion):
Can be simplified

```suggestion
        removeButtonIconProps={{ iconName: 'Cancel', 'data-test': 'remove_' + m.name } as Fluent.IIconProps}
```

Code after:
      if (!filterText) return []
      const isStringMatch = (name: S) => name.toLowerCase().includes(filterText.toLowerCase())
      return tags.filter(t => isStringMatch(t.name) && !selectedTags?.includes(t))
    },
    onChange = (items?: Fluent.ITag[]) => {
      setSelectedTags(items || [])
      wave.args[m.name] = items ? items.map(({ key }) => key) : null
      if (m.trigger) wave.push()
    },
    onEmptyResolveSuggestions = () => tags.filter(tag => !selectedTags.includes(tag))

  React.useEffect(() => {
    wave.args[m.name] = m.values || null
    setSelectedTags(tags.filter(({ key }) => m.values?.includes(key as S)))
  }, [m.name, m.values, tags])

  return (
    <>
      {m.label && <Fluent.Label required={m.required}>{m.label}</Fluent.Label>}
      <Fluent.TagPicker
        inputProps={{ 'data-test': m.name } as Fluent.IInputProps}
        removeButtonIconProps={{ iconName: 'Cancel', 'data-test' : 'remove_' + m.name } as Fluent.IIconProps}
        removeButtonAriaLabel="Remove"
        onResolveSuggestions={filterSuggestedTags}
        onChange={onChange}
        pickerSuggestionsProps={pickerSuggestionsProps}
        itemLimit={m.max_choices}
        selectedItems={selectedTags}
        disabled={m.disabled}
        onEmptyResolveSuggestions={onEmptyResolveSuggestions}
      />
    </>
  )
}