Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

TeamSearchField: filterSelectedOptions filters MUI's internal value, not the actual selection

Aperta
  • Qualcosa non va?
#1,784 3 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
68/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

Inizia in TeamSearchField tracciando teamsData, handleAdd, filterSelectedOptions, isOptionEqualToValue e le chiamate a fetchSuggestions. Confronta i due approcci suggeriti e controlla i picker fratelli di InviteUserModal per individuare lo stesso pattern. Il lavoro è completo quando ogni team selezionato rimane nascosto dopo i refetch, i confronti restano corretti con oggetti option sostituiti e il controllo dei duplicati esistente continua a funzionare.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Summary

TeamSearchField keeps its real selection in parent state (teamsData) while leaving the MUI Autocomplete uncontrolled, and then relies on the Autocomplete's internal value for filterSelectedOptions. The two disagree, so the filtering is partial and does not survive a refetch.

Not a regression - it is the shape the component is left in after layer5io/sistent#1780 removed a value={inputValue} prop that bound a string to an object-valued Autocomplete. That prop was a type error masked by a file-level @ts-nocheck; removing the suppression forced it out and switched the component from (broken) controlled to uncontrolled, which is what made filterSelectedOptions start working at all. Keeping the now-live filter was a deliberate call - it restores what the author evidently intended and the UX is better. This issue is about finishing the job properly.

The mismatch

Three facts that do not compose:

  1. The Autocomplete is single-select and uncontrolled. There is no multiple and no value. MUI's internal value is therefore the last selected option, not the selection set.
  2. The real selection set lives in the parent, as teamsData, appended by handleAdd and rendered as Chips outside the Autocomplete.
  3. filterSelectedOptions filters against fact 1, not fact 2. So at most one team - whichever was picked most recently - is hidden from the dropdown. Every other already-selected team stays listed.

On top of that, isOptionEqualToValue={(option, value) => option === value} is reference equality, and options is replaced wholesale on every fetchSuggestions(...) call (onInputChange, and the useEffect on mount / orgID change). After any refetch the retained value is no longer reference-equal to the new option objects, so even that single team reappears.

Net: the filter applies to one team, sometimes, until the next keystroke. What actually prevents a duplicate selection is the explicit guard in handleAdd, which sets the "Team Already Selected" error.

Why fix it

The component currently works by accident on two levels - correctness is carried by the handleAdd duplicate guard, while the visible filtering is incidental. Anyone who later needs to control the field programmatically (clear it after a successful invite, preselect teams when editing) will reach for value and land straight back on the bug that @ts-nocheck was hiding.

Suggested resolution

Either of these, not both:

  • Derive the filter from the real selection. Drop filterSelectedOptions and filter options against teamsData directly, so every selected team is hidden, deterministically, regardless of refetches. Smallest change, keeps the component uncontrolled.
  • Make it properly controlled. Give the Autocomplete a correctly-typed object value (or multiple with value={teamsData}), which makes filterSelectedOptions mean what it says and makes programmatic control possible.

In either case replace the reference comparator with an id comparison - (option, value) => option.id === value.id - since options identities are not stable across fetches.

Worth checking InviteUserModal's sibling pickers for the same pattern while in here.

Lingua principale
TypeScript
Stelle
137
Fork
239
Merge medio
4g 14h
PR unite (30g)
5

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di layer5io/sistent

Tutte le issue di layer5io/sistent

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.