Multi select dropdown implementation

[jllanosg]

Desc

Agrega el componente MultiSelectDropdown. Imita a SelectDropdown pero permite multiples elecciones.

How to test

// src/routes/vulnerabilities/vulnerabilities.tsx

import { useState } from "react";
import MultiSelectDropdown from "../../components/dropdown/MultiSelectDropdown";

interface ListItem {
  id: number;
  value: string;
  label?: string;
}

export const Vulnerabilities = () => {
  const items = [
    { id: 1, label: "opcion 1", value: "1" },
    { id: 2, label: "opcion 2", value: "2" },
    { id: 3, label: "opcion 3", value: "3" },
  ];

  const [selected, setSelected] = useState<ListItem[]>([]);
  return (
    <div className="p-4">
      {" "}
      <MultiSelectDropdown
        title="titulo"
        items={items}
        selected={selected}
        onChange={(i) => setSelected(i)}
      />
      <>{JSON.stringify(selected)}</>
    </div>
  );
};

[Sealra]

Esto puede ser un caso más específico, pero en caso de que se actualicen los items por alguna acción dentro del código una vez renderizado el Dropdown, cambiarán las opciones 'seleccionables', en efecto marcándose como ya seleccionadas con el ícono a la izquierda, pero no las que se encuentran dentro de la barra principal, como se muestra en la primera imagen. Además, para agregar una vez aceptado como issue, agregar margin vertical y horizontal al item, dado que cada item se encuentra junto como se ve en la segunda imagen.

[jllanosg]

Esto puede ser un caso más específico, pero en caso de que se actualicen los items por alguna acción dentro del código una vez renderizado el Dropdown, cambiarán las opciones 'seleccionables', en efecto marcándose como ya seleccionadas con el ícono a la izquierda, pero no las que se encuentran dentro de la barra principal, como se muestra en la primera imagen. Además, para agregar una vez aceptado como issue, agregar margin vertical y horizontal al item, dado que cada item se encuentra junto como se ve en la segunda imagen.

1. No entendí, podrías dar más detalles?
2. Se puede agregar ahora mismo :ok_hand:

[Sealra]

1. No entendí, podrías dar más detalles?

Bueno, si cambian los items, por ejemplo, usando un botón (aunque podría ser cualquier acción como realizar nuevamente un fetch dado un useEffect), y sólo cambien elementos distintos al id, o en otras palabras, sean nuevos items, pero con los mismos id de los items anteriores, se renderizará este cambio unicamente en los elementos selecionables, mas no en la barra principal.

Ejemplo simple:

[iTzGooDLife]

Con el cdigo de prueba proporcionado aparece el siguiente warning:

Es normal? aclarando que cada item tiene un valor (y por ende, key) distinto

[iTzGooDLife]

No estoy seguro de todos los contextos en los que se utiliza el multi select dropdown, pero si el texto dentro del chip es más grande que el espacio disponible, este se desconfigura, afectando a los otros seleccionados:

[jllanosg]

Con el cdigo de prueba proporcionado aparece el siguiente warning:

Es normal? aclarando que cada item tiene un valor (y por ende, key) distinto

Creo que tienes una versión antigua de la rama, por favor checkear si te deja pullear, si no avisa.

No estoy seguro de todos los contextos en los que se utiliza el multi select dropdown, pero si el texto dentro del chip es más grande que el espacio disponible, este se desconfigura, afectando a los otros seleccionados:

Buena observación, lo corregiré a la brevedad

[iTzGooDLife]

Creo que tienes una versión antigua de la rama, por favor checkear si te deja pullear, si no avisa.

Creo que estoy con los últimos cambios

[jllanosg]

Creo que tienes una versión antigua de la rama, por favor checkear si te deja pullear, si no avisa.

Creo que estoy con los últimos cambios

Faltaba el prop key en <Chip/> :+1:

[iTzGooDLife]

Faltaba el prop key en <Chip/> 👍

Nice, ya no pasa :handshake:

[jllanosg]

@iTzGooDLife respecto a los Chips "escapándose", agregando un overflow-x-auto al span donde se encuentran, queda de la siguiente manera:

Sin embargo, para que quede así de apretado debe ser más problema del diseño del componente padre, ya que probando con grid-cols, puedo hacer que quede de la siguiente manera:

De todas formas se agregará el overflow-x-auto para evitar problemas.