Issue 1:
I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

When a Select is opened with a long list of items, the top of the dropdown should be visible and the dropdown should be scrollable.

Current Behavior

Dropdown's top is set to a negative value and it clips the top part of it and makes it unscrollable on Chrome. And it's max height should be set to 100%

Steps to Reproduce (for bugs)

Add a select with about 50 items

Try to open it

** I traced this issue to the getPositioningStyle in popover.js. I found that modifying the code like below fixes it.

// Check if the horizontal axis needs shifting
if (left < this.marginThreshold) {
var _diff2 = left - this.marginThreshold;
left -= _diff2;
transformOrigin.horizontal += _diff2;
} else if (right > widthThreshold) {
var _diff3 = right - widthThreshold;
left -= _diff3;
transformOrigin.horizontal += _diff3;
}

Context

Your Environment

Tech
Version

Material-UI
v1.0.0-beta.18

React
16

browser
chrome 60

etc

Issue 2:
I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

The console.log(css) returns some CSS as string (?)

Current Behavior

The console.log(css) returns empty string "". Therefore my rendered material-ui components don't have styles.

Steps to Reproduce

I followed all steps in the official guide https://material-ui.com/guides/server-rendering/. And here is some sample of my code:

/* server.js */
...
import { SheetsRegistry, JssProvider } from 'react-jss';
import { create } from 'jss';
import preset from 'jss-preset-default';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import createGenerateClassName from 'material-ui/styles/createGenerateClassName';
import { red } from 'material-ui/colors';
...
app.use((req, res) => {
...
const sheetsRegistry = new SheetsRegistry();
const theme = createMuiTheme({
palette: {
primary: red,
type: 'dark',
},
});
const jss = create(preset());
jss.options.createGenerateClassName = createGenerateClassName;

const component = (
<Provider store={store} key="provider">
<JssProvider registry={sheetsRegistry} jss={jss}>
<MuiThemeProvider theme={theme} sheetsManager={new Map()}>
<ReduxAsyncConnect {...renderProps} />
</MuiThemeProvider>
</JssProvider>
</Provider>
);

const css = sheetsRegistry.toString();
console.log(css); // returns empty string

res.send(`<!doctype html>
${ReactDOM.renderToString(
<Html assets={webpackIsomorphicTools.assets()} style={css} component={component} store={store} />
)}`);
...
});

The response I got from initial render is correct, for example this AppBar component

<AppBar>
<Toolbar>
<IconButton color="contrast" aria-label="Menu" className={classes.menuButton}>
<MenuIcon />
</IconButton>
<Typography type="title" color="inherit" className={classes.title}>
Dashboard
</Typography>
<Button color="contrast">Login</Button>
</Toolbar>
</AppBar>

Rendered to string as

<header class="c10 c16 c3 c4 c8 mui-fixed" data-reactid="4">
<div class="c37 c38" data-reactid="5">
<button tabindex="0" class="c48 c39 c41 c2" type="button" role="button" aria-label="Menu" data-reactid="6"><span class="c45" data-reactid="7"><svg class="c50 c46" focusable="false" viewBox="0 0 24 24" aria-hidden="true" data-reactid="8"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" data-reactid="9"></path></svg></span><span class="c51" data-reactid="10"></span>
</button>
<h2 class="c58 c64 c77 c1" data-reactid="11">Dashboard</h2>
<button tabindex="0" class="c48 c82 c87" type="button" role="button" data-reactid="12"><span class="c84" data-reactid="13">Login</span><span class="c51" data-reactid="14"></span>
</button>
</div>
</header>

Context

Just trying to accomplish simple SSR by following official guide.

My Environment

Tech
Version

Material-UI
1.0.0-beta.20

React
15.5.4

JSS
8.1.0

react-jss
7.2.0