Material-UI AccountsLoginForm - Autofocus on first Input Field

[diadama]

I added the three Example Files (Header, Layout and SideNavigation) to my Project. When you load the page the first input field of the AccountsLoginForm has autoFocus=true and it glitches and shows the Title and the Placeholder Text at the same time.

I didnt find any settings inside the Example Files regarding the autoFocus. Tested it on Chrome and Firefox

[ErikDakoda]

This should not be happening. Are you getting any errors or warnings in your console? Do you have the correct version of material-ui installed ("@material-ui/core": "^3.9.3") ?

[diadama]

Besides the warning that the Prop className doesnt match, I dont get an error. And yes I'm using the version ^3.9.3, exactly like in the readme

[ErikDakoda]

Oh, this is an SSR-related issue. Until SSR related issues are resolved wrap problem components like AccountsLoginForm or just you whole layout in NoSsr:

<import NoSsr from '@material-ui/core/NoSsr';

// And later in render()
<NoSsr><Components.AccountsLoginForm/></NoSsr>

[diadama]

Works, thank you for the help Is there a way to disable SSR all together? Besides wrapping everything with Its kinda weird with the two Styles (one from a style object inside html and the other in a big style object after ) in the DevTools

[ErikDakoda]

I am not sure if there a way to disable SSR all together. I know that @eric-burel has been working on fixing the issues related to SSR, so maybe he could give us an update.

[eric-burel]

SSR disabling is not implemented yet but that would be rather easy. It's enabled by this line, it's just a big Express middleware added to the server: https://github.com/VulcanJS/Vulcan/blob/devel/packages/vulcan-lib/lib/server/apollo-server/apollo_server.js#L168 We could wrap it with a setting. You can either PR or I'll try to do that later.

However I do not advise to remove SSR just for a matter of code style or devtools, as it changes user perceived performance a lot.

The accounts form indeed need to be wrapped with NoSSR because Meteor account system haven't been thought for SSR at the time, so a few options do not exists during the server render.

[eric-burel]

@diadama You can checkout https://github.com/VulcanJS/Vulcan/pull/2397 to disable SSR on the whole app, we now have an apolloSsr.disable option.