Material-ui: [Selecionar] Alterar a posição do popover

Criado em 20 jul. 2018 · 11Comentários · Fonte: mui-org/material-ui

[x] Este é um problema v1.x.
[x] Pesquisei os problemas deste repositório e acredito que não seja uma duplicata.

Comportamento esperado

Eu quero desabilitar a forma como o select exibe o popover, com o item selecionado estando no select, o popover movendo-se estranho, só quero desabilitá-lo e posicionar o menu sob o select permanentemente .
Procurei nos arquivos de Select , não consegui encontrar. se você puder me orientar, farei isso sozinho e farei um RP.

Comportamento Atual

O popover está se movendo de acordo com o item selecionado e não há opção de desabilitar / reposicionar.

Exemplos

Eu quero que o menu esteja sob a seleção.

Contexto

Select question

Fonte

w3nda

Comentários muito úteis

Oh, é com o Select, vamos um passo mais fundo:

O Select está usando o Menu:
♻️

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

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

oliviertassinari em 21 jul. 2018

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

Todos 11 comentários

@ w3nda Seguindo a documentação:

O componente Menu é construído sobre o Popover:
O Popover pode ser posicionado como você espera:
Combinando essas duas informações e corrigindo um aviso, podemos chegar a:

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

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

Espero que ajude.

oliviertassinari em 21 jul. 2018

👍13

Oh, é com o Select, vamos um passo mais fundo:

O Select está usando o Menu:
♻️

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

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

oliviertassinari em 21 jul. 2018

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

Rei!
Descobri que se o Menu tiver espaço suficiente embaixo dele, ele renderizará perfeitamente, mas se ele não tiver espaço na tela o Menu será empurrado para cima. verdadeiro? ou comportamento quebrado?

w3nda em 22 jul. 2018

Descobri que se o Menu tiver espaço suficiente embaixo dele, ele renderizará perfeitamente, mas se ele não tiver espaço na tela o Menu será empurrado para cima.

@wenduzer Parece o comportamento esperado.

oliviertassinari em 22 jul. 2018

🎉3 ❤2

Oh, é com o Select, vamos um passo mais fundo:

@oliviertassinari Obrigado, isso é exatamente o que eu estive procurando nas últimas 2 horas.

Shrikant9 em 4 mar. 2019

@ Shrikant9 Como podemos melhorar a descoberta da resposta?

oliviertassinari em 4 mar. 2019

Como podemos melhorar a descoberta da resposta?

@oliviertassinari Na minha opinião, ter versões mais diversas de demos na página demo do componente <Select /> . Embora, honestamente, eu comecei recentemente a usar o material-ui, então ainda preciso me acostumar com os documentos.

Shrikant9 em 5 mar. 2019

🎉2

@ Shrikant9 Teremos o maior prazer em aceitar um pedido de pull 👍.

oliviertassinari em 5 mar. 2019

👍2

@oliviertassinari obrigado meu amigo, você me ajudou muito, muito mesmo. Eu conheço bem o material, mas não consegui tomar essa decisão