Autocomplete does not filter a Tree

Abierto
  • ¿Algo no está bien?
#10,664 1 comentario 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
78/100
Tipo de issue
Nueva funcionalidad
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
react, typescript
Área
frontend

Línea de trabajo

Start by comparing Tree.mjs with GridList.mjs and the other components that consume SelectableCollectionContext under react-aria-components/dist/private/. Verify the existing Autocomplete example with ListBox, then make the tree filter matching rows while retaining their ancestors; the reproduced tree and list behavior should agree when typing “ban”.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

Autocomplete
Provide a general summary of the feature here

Let Autocomplete filter a Tree, as it filters ListBox, Menu and GridList.

🤔 Expected Behavior?

Typing into an Autocomplete's SearchField filters the rows of a Tree inside it.

😯 Current Behavior

The tree is not filtered. react-aria-components 1.21.1, Chromium, typing ban into each field of the example below:

typed 'ban': tree rows Apple/Banana/Cherry | listbox options Banana

SelectableCollectionContext is read by Autocomplete.mjs, GridList.mjs, ListBox.mjs, Menu.mjs, Table.mjs and TagGroup.mjs under react-aria-components/dist/private/; Tree.mjs does not reference it.

💁 Possible Solution

Have Tree consume SelectableCollectionContext as GridList does, filtering child rows and keeping the ancestors of a matching row.

🔦 Context

A searchable tree select in our design system. Today the caller has to filter the rows itself, while the listbox equivalent filters locally.

💻 Examples
import { Autocomplete, Input, ListBox, ListBoxItem, SearchField, Tree, TreeItem, TreeItemContent, useFilter } from "react-aria-components";

export function Repro() {
  const { contains } = useFilter({ sensitivity: "base" });
  const fruits = ["Apple", "Banana", "Cherry"];
  return (
    <>
      <Autocomplete filter={contains}>
        <SearchField aria-label="tree search"><Input /></SearchField>
        <Tree aria-label="tree">
          {fruits.map((f) => <TreeItem key={f} id={f} textValue={f}><TreeItemContent>{f}</TreeItemContent></TreeItem>)}
        </Tree>
      </Autocomplete>
      <Autocomplete filter={contains}>
        <SearchField aria-label="list search"><Input /></SearchField>
        <ListBox aria-label="list">{fruits.map((f) => <ListBoxItem key={f} id={f}>{f}</ListBoxItem>)}</ListBox>
      </Autocomplete>
    </>
  );
}
🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

Lenguaje dominante
TypeScript
Estrellas
16k
Forks
1.6k
Merge medio
3 d 9 h
PR fusionados (30 d)
45

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de adobe/react-spectrum

Todos los issues de adobe/react-spectrum

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.