React-md: [Tabs] - Cant open DatePicker when on a new Tab

[jLynx]

Describe the bug & To Reproduce
When I have a DatePicker on one ExpansionPanel and then have a 2nd one on another ExpansionPanel, when I open the first one it works fine, but when I got o the new tab(ExpansionPanel) and try to open it, it wont show up.

Edit: Sorry I was getting confused with ExpansionPanel's and Tab's. What I meant above is Tab's

Expected behavior
It should show no matter what tab(ExpansionPanel) I am on

Desktop (please complete the following information):

• OS: Win10
• Browser FireFox
• Version [e.g. 22]

[mlaursen]

Can you provide a code sample? It seems to work as expected to me with both inline and dialog date pickers: https://codesandbox.io/s/react-md-datepicker-expansion-panel-gpmoi

[jLynx]

@mlaursen Here is my code sample: https://stackblitz.com/edit/react-mxtp6u?file=index.js

And sorry I was actually confused, I meant on different Tab's not ExpansionPanel's, my mistake

[mlaursen]

Darn, I've been having problems with codesandbox lately. Let's try this codepen instead.

Edit: Oh, it's within the Tabs/Tab components themselves. Let me look into that

[jLynx]

Awesome, thanks for that

[mlaursen]

Ok, I might see if there's a better way to handle this going forward, but you should be able to fix it by enabling the portal prop on the DatePicker. The problem with the Tabs component is that it does some translates when switching between views which causes the DatePicker to not show up as expected if you are not on the first tab. If you portal it out, the DatePicker's dialog won't be translated and will be shown.

https://stackblitz.com/edit/react-hlcued

[jLynx]

Ah perfect, that has solved my problem!
I'll leave this open as you may want to change it going forward, but feel free to close it if not.

[mlaursen]

Great! I think I'm going to leave this open a bit as a reminder to fix it in v2 once I start re-making the tabs component.

[jLynx]

Note, this is also an issue for DialogContainer. Adding portal also fixes it