Styjun

Why isn't there armor to protect from spells in the Potterverse?

I transpose the source code, you transpose the input!

When did Unix stop storing passwords in clear text?

Kinematic formula for Euler characteristic

One-digit products in a row of numbers

Whaling ship logistics

Is there an equivalent of cash transportation in air cargo?

What in my code changed between MacTeX 2017 and MacTex 2019?

Why is a road bike faster than a city bike with the same effort? How much faster it can be?

Role of "einfach" in a certain context

Why aren't faces sharp in my f/1.8 portraits even though I'm carefully using center-point autofocus?

Is the order of words purely based on convention?

Is population size a parameter, or sample size a statistic?

Read-once memory

Can you trip a breaker from a different circuit?

Do interval ratios take overtones into account or solely the fundamental frequency?

String whitespaces

ZFS inside a virtual machine

Does the app TikTok violate trademark?

what organs or modifications would be needed to have hairy fish?

If a spaceship ran out of fuel somewhere in space between Earth and Mars, does it slowly drift off to the Sun?

Why would an airline put 15 passengers at once on standby?

How deep is the liquid in a half-full hemisphere?

Is a Middle Name a Given Name?

How do I use Menu with Collapse as my TransitionComponent on Material-ui?

Sharepoint navigation menu collapseBootstrap 3 Menu is not collapsing on IpadHow to disable margin-collapsing?How to pass props to this.props.childrenMaterial UI and Grid systemMaterial-ui horizontal menuMaterial-UI side menu?Material UI: drawer with expandable side menuReact Material UI Multiple CollapseTextfield with Autofocus and MenuItem

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

1

I'm having issues using the Collapse component as my TransitionComponent on Material-UI.

Not only does it not work, it also breaks the anchor.

Fade works fine, not sure where to look for answers.

Thanks in advance.

Link to codesandbox

import React, useState, useRef from "react";
import ReactDOM from "react-dom";
import Menu, MenuItem, Collapse, Fade, Typography from "@material-ui/core";

function App() 
 const [open, toggle] = useState(false);
 const ref = useRef(null);

 return (
 <>
 <div style= position: "absolute", top: "50%" ref=ref>
 <Typography variant="h4" className="App" onClick=() => toggle(true)>
 Click me!
 </Typography>
 </div>
 <Menu
 TransitionComponent=Collapse
 anchorEl=ref.current
 open=open
 onClose=() => toggle(false)
 >
 <MenuItem>Item do menu</MenuItem>
 </Menu>
 <Menu
 TransitionComponent=Fade
 transitionDuration=800
 anchorEl=ref.current
 open=open
 onClose=() => toggle(false)
 >
 <MenuItem>Item do menu</MenuItem>
 </Menu>
 </>
 );


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

reactjs menu material-ui transition collapse

share|improve this question

asked Mar 28 at 19:02

GrokkuGrokku

11011 gold badge11 silver badge55 bronze badges

add a comment
 | 

1

I'm having issues using the Collapse component as my TransitionComponent on Material-UI.

Not only does it not work, it also breaks the anchor.

Fade works fine, not sure where to look for answers.

Thanks in advance.

Link to codesandbox

import React, useState, useRef from "react";
import ReactDOM from "react-dom";
import Menu, MenuItem, Collapse, Fade, Typography from "@material-ui/core";

function App() 
 const [open, toggle] = useState(false);
 const ref = useRef(null);

 return (
 <>
 <div style= position: "absolute", top: "50%" ref=ref>
 <Typography variant="h4" className="App" onClick=() => toggle(true)>
 Click me!
 </Typography>
 </div>
 <Menu
 TransitionComponent=Collapse
 anchorEl=ref.current
 open=open
 onClose=() => toggle(false)
 >
 <MenuItem>Item do menu</MenuItem>
 </Menu>
 <Menu
 TransitionComponent=Fade
 transitionDuration=800
 anchorEl=ref.current
 open=open
 onClose=() => toggle(false)
 >
 <MenuItem>Item do menu</MenuItem>
 </Menu>
 </>
 );


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

reactjs menu material-ui transition collapse

share|improve this question

asked Mar 28 at 19:02

GrokkuGrokku

11011 gold badge11 silver badge55 bronze badges

add a comment
 | 

I'm having issues using the Collapse component as my TransitionComponent on Material-UI.

Not only does it not work, it also breaks the anchor.

Fade works fine, not sure where to look for answers.

Thanks in advance.

Link to codesandbox

import React, useState, useRef from "react";
import ReactDOM from "react-dom";
import Menu, MenuItem, Collapse, Fade, Typography from "@material-ui/core";

function App() 
 const [open, toggle] = useState(false);
 const ref = useRef(null);

 return (
 <>
 <div style= position: "absolute", top: "50%" ref=ref>
 <Typography variant="h4" className="App" onClick=() => toggle(true)>
 Click me!
 </Typography>
 </div>
 <Menu
 TransitionComponent=Collapse
 anchorEl=ref.current
 open=open
 onClose=() => toggle(false)
 >
 <MenuItem>Item do menu</MenuItem>
 </Menu>
 <Menu
 TransitionComponent=Fade
 transitionDuration=800
 anchorEl=ref.current
 open=open
 onClose=() => toggle(false)
 >
 <MenuItem>Item do menu</MenuItem>
 </Menu>
 </>
 );


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

reactjs menu material-ui transition collapse

share|improve this question

asked Mar 28 at 19:02

GrokkuGrokku

11011 gold badge11 silver badge55 bronze badges

import React, useState, useRef from "react";
import ReactDOM from "react-dom";
import Menu, MenuItem, Collapse, Fade, Typography from "@material-ui/core";

function App() 
 const [open, toggle] = useState(false);
 const ref = useRef(null);

 return (
 <>
 <div style= position: "absolute", top: "50%" ref=ref>
 <Typography variant="h4" className="App" onClick=() => toggle(true)>
 Click me!
 </Typography>
 </div>
 <Menu
 TransitionComponent=Collapse
 anchorEl=ref.current
 open=open
 onClose=() => toggle(false)
 >
 <MenuItem>Item do menu</MenuItem>
 </Menu>
 <Menu
 TransitionComponent=Fade
 transitionDuration=800
 anchorEl=ref.current
 open=open
 onClose=() => toggle(false)
 >
 <MenuItem>Item do menu</MenuItem>
 </Menu>
 </>
 );


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

share|improve this question

asked Mar 28 at 19:02

GrokkuGrokku

11011 gold badge11 silver badge55 bronze badges

share|improve this question

asked Mar 28 at 19:02

GrokkuGrokku

11011 gold badge11 silver badge55 bronze badges

asked Mar 28 at 19:02

GrokkuGrokku

11011 gold badge11 silver badge55 bronze badges

asked Mar 28 at 19:02

GrokkuGrokku

11011 gold badge11 silver badge55 bronze badges

1 Answer
1

active

oldest

votes

2

This is a known bug with the Collapse transition in combination with the Popover component (which is used by Menu): https://github.com/mui-org/material-ui/issues/11337

share|improve this answer

answered Mar 28 at 23:39

Ryan CogswellRyan Cogswell

11.6k11 gold badge1818 silver badges3535 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Grokku If this issue is important to you, I recommend that you give it a thumbs-up/+1 in GitHub since the popularity of issues does have an impact on their prioritization.
  
  – Ryan Cogswell
  Mar 29 at 14:22
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks, I will follow that advice. That issue is somewhat important to me. I tried looking for something related on my own without success. Thanks for your help. Cheers.
  
  – Grokku
  Mar 29 at 19:27
  

  
  
  
  

add a comment
 | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/4.0/"u003ecc by-sa 4.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55405092%2fhow-do-i-use-menu-with-collapse-as-my-transitioncomponent-on-material-ui%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

2

This is a known bug with the Collapse transition in combination with the Popover component (which is used by Menu): https://github.com/mui-org/material-ui/issues/11337

share|improve this answer

answered Mar 28 at 23:39

Ryan CogswellRyan Cogswell

11.6k11 gold badge1818 silver badges3535 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Grokku If this issue is important to you, I recommend that you give it a thumbs-up/+1 in GitHub since the popularity of issues does have an impact on their prioritization.
  
  – Ryan Cogswell
  Mar 29 at 14:22
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks, I will follow that advice. That issue is somewhat important to me. I tried looking for something related on my own without success. Thanks for your help. Cheers.
  
  – Grokku
  Mar 29 at 19:27
  

  
  
  
  

add a comment
 | 

2

This is a known bug with the Collapse transition in combination with the Popover component (which is used by Menu): https://github.com/mui-org/material-ui/issues/11337

share|improve this answer

answered Mar 28 at 23:39

Ryan CogswellRyan Cogswell

11.6k11 gold badge1818 silver badges3535 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Grokku If this issue is important to you, I recommend that you give it a thumbs-up/+1 in GitHub since the popularity of issues does have an impact on their prioritization.
  
  – Ryan Cogswell
  Mar 29 at 14:22
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks, I will follow that advice. That issue is somewhat important to me. I tried looking for something related on my own without success. Thanks for your help. Cheers.
  
  – Grokku
  Mar 29 at 19:27
  

  
  
  
  

add a comment
 | 

This is a known bug with the Collapse transition in combination with the Popover component (which is used by Menu): https://github.com/mui-org/material-ui/issues/11337

share|improve this answer

answered Mar 28 at 23:39

Ryan CogswellRyan Cogswell

11.6k11 gold badge1818 silver badges3535 bronze badges

share|improve this answer

answered Mar 28 at 23:39

Ryan CogswellRyan Cogswell

11.6k11 gold badge1818 silver badges3535 bronze badges

answered Mar 28 at 23:39

Ryan CogswellRyan Cogswell

11.6k11 gold badge1818 silver badges3535 bronze badges

answered Mar 28 at 23:39

Ryan CogswellRyan Cogswell

11.6k11 gold badge1818 silver badges3535 bronze badges