Material-ui: [Seleccionar] Cambiar la posición de la ventana emergente

Creado en 20 jul. 2018 · 11Comentarios · Fuente: mui-org/material-ui

[x] Este es un problema v1.x.
[x] He buscado las ediciones de este repositorio y creo que esto no es un duplicado.

Comportamiento esperado

Quiero deshabilitar la forma en que la selección muestra la ventana emergente, con el elemento seleccionado en la selección, la ventana emergente se mueve de manera extraña, solo quiero deshabilitarla y colocar el menú debajo de la selección de forma permanente .
Revisé los archivos de Select y no pude encontrarlo. si puedes guiarme, lo haré yo mismo y haré un PR.

Comportamiento actual

La ventana emergente se mueve de acuerdo con el elemento seleccionado y no hay una opción de desactivación / reposicionamiento.

Ejemplos

Quiero que el menú esté debajo de la selección.

Contexto

Select question

Fuente

w3nda

Comentario más útil

Oh, es con Select, vayamos un paso más profundo:

Seleccionar está usando el menú:
♻️

      <Select
        MenuProps={{
          anchorOrigin: {
            vertical: "bottom",
            horizontal: "left"
          },
          transformOrigin: {
            vertical: "top",
            horizontal: "left"
          },
          getContentAnchorEl: null
        }}
      >

https://codesandbox.io/s/18l2042y97

oliviertassinari en 21 jul. 2018

👍53 ❤8 🎉6 🚀5 😄2 👀1 👎1

Todos 11 comentarios

@ w3nda Siguiendo la documentación:

El componente Menú está construido sobre el Popover:
El Popover se puede colocar como espera:
Combinando estas dos informaciones y arreglando una advertencia, podemos llegar a:

        <Menu
          anchorOrigin={{
            vertical: "bottom",
            horizontal: "left"
          }}
          transformOrigin={{
            vertical: "top",
            horizontal: "left"
          }}
          getContentAnchorEl={null}

https://codesandbox.io/s/9l17k3qnk4

Espero que te ayude.

oliviertassinari en 21 jul. 2018

👍13

Oh, es con Select, vayamos un paso más profundo:

Seleccionar está usando el menú:
♻️

      <Select
        MenuProps={{
          anchorOrigin: {
            vertical: "bottom",
            horizontal: "left"
          },
          transformOrigin: {
            vertical: "top",
            horizontal: "left"
          },
          getContentAnchorEl: null
        }}
      >

https://codesandbox.io/s/18l2042y97

oliviertassinari en 21 jul. 2018

👍53 ❤8 🎉6 🚀5 😄2 👀1 👎1

¡Rey!
Descubrí que si el menú tiene suficiente espacio debajo, se renderizará perfectamente, pero si no tiene espacio en la pantalla, el menú se subirá. ¿cierto? o comportamiento roto?

w3nda en 22 jul. 2018

Descubrí que si el menú tiene suficiente espacio debajo, se renderizará perfectamente, pero si no tiene espacio en la pantalla, el menú se subirá.

@wenduzer Esto suena como el comportamiento esperado.

oliviertassinari en 22 jul. 2018

🎉3 ❤2

Oh, es con Select, vayamos un paso más profundo:

@oliviertassinari Gracias, esto es exactamente lo que he estado buscando durante las últimas 2 horas.

Shrikant9 en 4 mar. 2019

@ Shrikant9 ¿Cómo podemos mejorar la visibilidad de la respuesta?

oliviertassinari en 4 mar. 2019

¿Cómo podemos mejorar la capacidad de descubrimiento de la respuesta?

@oliviertassinari En mi opinión, tener versiones más diversas de demos en la página de demostración del componente <Select /> . Aunque honestamente, recientemente comencé a usar material-ui, por lo que todavía necesito acostumbrarme a los documentos.

Shrikant9 en 5 mar. 2019

🎉2

@ Shrikant9 Estaremos encantados de aceptar una solicitud de extracción 👍.

oliviertassinari en 5 mar. 2019

👍2

@oliviertassinari gracias amigo mío, me ayudaste mucho, mucho. Conozco el material ui lo suficientemente bien, pero no pude tomar esta decisión.