Problema con el estilo de los componentes SelectDropdown y SimpleInput

[iTzGooDLife]

Se tiene un problema de sobreposición con los componentes SelectDropdown y SimpleInput. Esto sucede cuando se sobrepone una vista/página sobre alguno de los componentes mencionados. A continuación se muestra un ejemplo de lo mencionado, donde incluso se puede hacer uso de estos componentes cuando se superponen otros:

Si en el componente superpuesto se intenta sobreponer de alguna manera, entonces los dropdowns dentro de este ya no desplegarán sus menús (opciones). Nota: no encontré una manera de demostrar lo anterior xd

Investigando el problema, se llegó a la conclusión que depende del estilo "relative" dentro de estos. El componente SimpleInput es sencillo de arreglar, ya que solo se debe quitar esa clase, pero el componente SelectDropdown es un poco más complicado, ya que el icono que se encuentra a la derecha (la flecha), cuesta un poco de configurar, actualmente el estilo de SelectDropdown es:

<ListboxButton
          className={clsx(
            'block w-full rounded-lg bg-white/5 py-1.5 pr-8 pl-3 text-left text-sm/6 text-white',
            'focus:outline-none data-[focus]:outline-2 data-[focus]:-outline-offset-2 data-[focus]:outline-white/25'
          )}
          >
          {selected.value}
          <ChevronDownIcon
            className="group pointer-events-none absolute top-2.5 right-2.5 size-4 fill-white/60"
            aria-hidden="true"
            />

Buscando una solución, se encontró este que se asemeja bastante y se propone como solución:

<ListboxButton
          className={clsx(
            'inline-flex items-center w-full text-left rounded-lg bg-white/5 py-1.5 pl-3 text-left text-sm/6 text-white',
            'focus:outline-none data-[focus]:outline-2 data-[focus]:-outline-offset-2 data-[focus]:outline-white/25'
          )}
          >
          {selected.value}
          <ChevronDownIcon
            className="size-4 fill-white/60"
            aria-hidden="true"
            />

Que como se puede ver, ya no ocurre dicho problema:

Donde única diferencia notable es que la "flecha" ya no se encuentra al final derecho:

Por lo anterior mencionado, no se propone como solución final, pero si se puede trabajar sobre esa (que no da problemas) y mejorarlo.

NOTA: No probé con "SearchInput", pero también posee el relative, por lo que supongo que también le ocurre.

[massi-ponce]

Respecto al componente SelectDropdown, la solución propuesta no me funciona.

Durante el desarrollo de mi vista, en audits -> general, también tuve el mismo problema y lo solucioné de la siguiente forma:

<ListboxOptions
 anchor="bottom"
 transition
 className={clsx(
  "w-[var(--button-width)] rounded-xl border border-white/5 bg-stone-800 p-1 [--anchor-gap:var(--spacing-1)] focus:outline-none",
  "transition duration-100 ease-in data-[leave]:data-[closed]:opacity-0",
  "z-50"
 )}
>

Cabe destacar que, de esta forma, no aparece el "bug" de la flecha al lado izquierdo.

Pido si es que lo pueden probar para ver si esta solución es más efectiva, ya que quizás me funciona a mí pero no al resto.

[iTzGooDLife]

Tu solución parece bastante buena para tu problema, ya que esa solución afecta únicamente a las opciones del dropdown (esto se puede ver por el tag ListboxOptions al cual se le está dando estilo), por lo que al implementar esto, mi problema sigue ocurriendo, ya que el dropdown como tal se sigue sobreponiendo a otros elementos. Lo que se puede hacer, es complementar ambas soluciones, para que ambos problemas se vean solucionados, a continuación muestro una implementación de ambas soluciones unidas:

Lo que si, como se puede ver, sigue quedando "pegado" el icono con el texto. De igual manera queda abierto a opinión y discusión.

[massi-ponce]

Creo que encontré la "solución definitiva". Bastaría con realizar el siguiente cambio en el componente:

<ListboxButton
  className={clsx(
    "inline-flex items-center justify-between w-full text-left rounded-lg bg-white/5 py-1.5 px-3 text-sm/6 text-white",
    "focus:outline-none data-[focus]:outline-2 data-[focus]:-outline-offset-2 data-[focus]:outline-white/25"
  )}
>
  <span className="truncate">{selected?.value}</span>
  <ChevronDownIcon
    className="size-4 fill-white/60 ml-2 flex-shrink-0"
    aria-hidden="true"
  />
</ListboxButton>

Haciendo las siguientes pruebas (en mi vista) parece funcionar todo bien:

RESUMIENDO: sería implementar las 2 propuestas que dí, es decir, el cambio en ListboxButton (el de ahora) y ListboxOptions (mi comentario anterior).

[iTzGooDLife]

LETSGOO!

Me parece buena esa propuesta, salvo un detalle, el cúal es que si no hay un placeholder o valor, la altura es más pequeña en comparación de haber. Considerando lo tuyo, llegue a la siguiente implementación:

<ListboxButton
  className={clsx( 'inline-flex items-center justify-between w-full text-left rounded-lg bg-white/5 py-1.5 pl-3 text-left text-sm/6 text-white',
    'focus:outline-none data-[focus]:outline-2 data-[focus]:-outline-offset-2 data-[focus]:outline-white/25',
    'min-h-[2.3rem]'
  )}
  >
  <span className='truncate'>{selected ? (selected.label ? selected.label : selected.value) : placeholder}</span>
  <ChevronDownIcon
    className={`size-4 fill-white/60 mr-1`}
    aria-hidden="true"
    />
</ListboxButton>
<ListboxOptions
  anchor="bottom"
  transition
  className={clsx( "w-[var(--button-width)] rounded-xl border border-white/5 bg-stone-800 p-1 [--anchor-gap:var(--spacing-1)] focus:outline-none",
    "transition duration-100 ease-in data-[leave]:data-[closed]:opacity-0",
    "z-50"
  )}
  >

En este caso se añadió min-h-[2.3rem], lo que lograría lo mencionado anteriormente, se adjunta un ejemplo:

Se considera finalizado :handshake:

[massi-ponce]

En este caso se añadió min-h-[2.3rem], lo que lograría lo mencionado anteriormente, se adjunta un ejemplo:

Creo que solamente basta con agregar esto y nada más. O quizás no entendí el por qué del cambio en:

<span className='truncate'>{selected ? (selected.label ? selected.label : selected.value) : placeholder}</span>

Ya que logra el mismo resultado e incluso, en código, me salen algunos warnings.

[iTzGooDLife]

En este caso se añadió min-h-[2.3rem], lo que lograría lo mencionado anteriormente, se adjunta un ejemplo:

Creo que solamente basta con agregar esto y nada más. O quizás no entendí el por qué del cambio en:

<span className='truncate'>{selected ? (selected.label ? selected.label : selected.value) : placeholder}</span>

Ya que logra el mismo resultado e incluso, en código, me salen algunos warnings.

Ahh, es que eso va con los otros cambios. Actualmente se encuentran en la branch arreglo-componentes si quieres revisarlo.

Esos cambios abarcan:

• Cambio de prop onChange
• Arreglo sobreposición
• Se le agrega un componente label a ListItem (opcional)
• Se arregla el tamaño si no hay un texto default
• Se agrega un placeholder (opcional)

Con esto se buscan 4 casos:

• Si hay un elemento selecionado y tiene label, se muestre ese label
• Si hay un elemento selecionado y no tiene label, se muestra el value
• Si no hay seleccionado, pero hay un placeholder, se muestra eso
• En el caso que no haya un valor seleccionado, ni placeholder, entonces sale vacio (con la flecha para desplegar el menú)